Jump to content

Search the Community

Showing results for tags 'css'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • The Web Designer Forum Community
    • Web Designer Forum News
    • Web Designer Forum Introductions
    • General Chat
    • Design Competitions
  • Web Design Resource
    • Website Design and Layout
    • Website Reviews and Feedback
    • Other Resources
    • Graphic Design Forum
  • Web Development
    • Frontend
    • Server Side
    • Content Management Systems (CMS)
  • SEO, Website Marketing and Business
    • Social Media
    • Freelancing, Business and Legal Discussion
    • SEO (Search Engine Optimisation) & Search Engines
    • Website Management
  • Software & Hardware
    • Web Browsers
    • Web Design Scripts & Software
    • Web Development Scripts & Software
    • Hardware
  • The Marketplace

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start




Website URL




Found 435 results

  1. Hey WebDesignerForum community, I am designing a website mockup, and will attach an image of what it looks like currently. I'm attempting to use CSS Grid to design my homepage. From here I really have 2 questions: First, my home page seems fairly long, at least compared to websites shown in tutorials I've found on CSS Grid. It seems like 'grid-template-areas' may be one way of building my home page. Will this become overly complicated and a less effective way of building something that looks like what I'm currently showing in my attached image(s)? The way I'm picturing it is that my 'grid-template-areas' will end up looking like this: ‘header header header nav nav' 'article article article article article’ 'article article article aside aside’ 'article article article article article' 'aside aside aside aside aside’ 'article article article article article' ‘aside aside article article article' 'article article article article article’ 'article article article article article' 'article section section section article' ‘footer footer footer footer footer’; I'm uncertain if I'm using the right semantic language for everything, but I will also overlay each 'grid-template-area' item on my website mockup so you can see exactly what I have imagined in my mind. I hope I have provided enough information for someone with more experience to help me here. Secondly, some of my imagery, such as the header, footer, and a few other images, touch the edge of the webpage. In the past when using CSS Grid, I couldn't get the grid to go all the way to the edge of the screen, but it had a small margin that seemed inherent. How can I avoid this from happening when I begin the html/css process? web mockup Web mockup with grid item assignments
  2. Hi I am new to design Could someone help to create something like that. https://ibb.co/bg2K2QP
  3. Hi, I'm looking to create a website that can show a preview of a personalised book. On this site a user should be able to enter their name and choose a character with different hair colours, skin colours and then hit 'preview'. This opens up a flipbook with just these variables replaced. Please see a great example here: Click HERE for website with customization page I know that templates exist for things like flipbooks (personally i use Wordpress as a novice, so a wordpress plugin would be useful), but how would this customized feature be created? For example, would i use a PDF, convert to a flipbook, and then layer (css?) the name, character on top with HTML5 code? Are there any existing templates that do this already or simpler alternatives? Thanks
  4. Hello guys, godd afternoon !! I studied one apostille about CSS, but I can´t realize one simple task !! Hen I mouseover the 'button.botao', active the movement of 'div.traco' ! See below the 'Source Code' that I´m trying: <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Help me please !! Thanks
  5. Luke Ottey

    CSS caption placement

    @Seth and I are working on a website that uses Envira-gallery and are unable to use CSS code to move the image caption (which is currently located in a white font in the top left) of the front-page gallery images to below the bottom border of the image (in order too see the caption you have to first click on the image). We are looking for a way to center the caption below the image in the same spot regardless of what the viewport size is. Here is a link to the page: https://webdesignstaging.site/firstfloorflow/ Any help would be wonderful, thanks so much!
  6. Hello there !! I need some help to resolve some doubts in CSS !! If you can help me I will appreciate !! First visit the link: http://terezanininha.com.br/CSS/Animations/Pagina_1_TryIt_3.html See the 'Source Code' from the browser ! What am I trying to do ??!! I want that the div element, make move animation, comes from {top:200px} to {top:0px} !! In this example, I found two erros: - First Error: When the div is automatically start moving, if I put my mouse into it, before it´s finished, the div gives a jump directly to the top !! "I don´t want that" ! I want if I place the mouse pointer until it´s moving, that don´t make the div to jump !! I want that don´t happen nothing if I place the mouse until is moving!! - Second Error: After the div comes to top, If I put the mouse into it, it´s change the color, made by animation ! But after that, when I put the mouse pointer out, the div again comes to top:200px and start the movement to the top:0px again !! What I want is: that the div moves only "one time" and "stops" at top:0px !! And after stop, the change div color mouse over keeps active !! I tried searching in the internet but I didn´t found something that resolve this two problems !! If it is possible, Can you give a hand ?? Thanks Carlos
  7. Hello Everyone!, My name is José Luis Rodríguez and im a Graphic Designer and 3D animator (I have like 9 years working in this), another of my passions is software and web design and development, but now i decided to introduce myself full time to web dev at first , but im failing in the try , i know basics of html and css , i can create a basic template and i bought some web desing and backend courses, but i start watching the videos and after some time i quit!, so please , i need some guidance from you, if you think i need to specialize on front end or back end or full stack? or some user friendly way to learn this and start creating! I will be glad with your help! Thanks so much!
  8. This is my first post. I apologise if the question is very basic. I can't seem to find a resolution to this problem. I am trying to center a Vimeo video IFrame perfectly within a simple black border. The video fits the border height wise but there are white spaces to both the left and the right within the border. I have attached an image. The video is behaving as it should in responsive terms. I am using Bootstrap and my code is as follows: HTML <div class="vimvid"> <div class="container"> <iframe src="https://player.vimeo.com/video/289437293?portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> </div> </div> CSS .vimvid { padding: 56.25% 0 0 0; position:relative; } .vimvid iframe { position:absolute; top:0; left:0; width:100%; height: 100%; border: 25px solid #000000; border-radius: 25px; } I am trying to center a Vimeo video IFrame perfectly within a simple black border. The video fits the border height wise but there are white spaces to both the left and the right within the border. The video is behaving as it should in responsive terms. I am using Bootstrap and my code is as follows: HTML <div class="vimvid"> <div class="container"> <iframe src="https://player.vimeo.com/video/289437293?portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe> </div> </div> CSS .vimvid { padding: 56.25% 0% 0% 0%; position:relative; } .vimvid iframe { position:absolute; top:0; left:0; width:100%; height: 100%; border: 25px solid #000000; border-radius: 25px; } I want the video to be displayed perfectly centrally within the border without there being white spaces to the left and to the right. How do I achieve this? Thanks in advance for any advice.
  9. Stooly

    CSS for fixed header

    Morning all. I was hoping for a bit of help. So I added the following to the Additional CSS field, in my wordpress theme. .site-header { position: fixed; top: 0; width: 100%; z-index: 2000; } .container { padding-top: 120px; } And it worked, the header is now finally fixed. But the problem I have now is that even though it's fixed on every page, it overlaps everything at the top of each page. Is there a way for it to not do that, or will I like have to make sure there is enough clear space on each page I add?
  10. dawnlimbu

    Widget Title Font Colour

    Hello there, I am currently working on a Wordpress Website. https://nationalexecutivechauffeurs.co.uk/ If you scroll down the homepage you will see a display of cars. I have added these using the single image widget. I also have titles for these cars, but you cannot see these as the text is white instead of black. I am really struggling to change the colour to black, does anyone have any advice? Thank you
  11. I have a boarder around an image, but when a caption is added underneath the image, I am after the boarder to encapsulate the caption. .php <div id="attachment_55" style="width: 810px" class="wp-caption aligncenter"><img class="wp-image-55 size-full" src="http://ithorizon.online/wp-content/uploads/britain-at-war.jpg" alt="britain at war" width="800" height="600" srcset="http://ithorizon.online/wp-content/uploads/britain-at-war.jpg 800w, http://ithorizon.online/wp-content/uploads/britain-at-war-300x225.jpg 300w, http://ithorizon.online/wp-content/uploads/britain-at-war-768x576.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"><p class="wp-caption-text">Britain at War</p></div> .css /*-- image, video --*/ img, video { height: auto; /* maintain scaled height. */ max-width: 100%; /* width of container. */ } img.alignleft, img.alignright { float: none; margin: 0; } img.size-full { padding: .4rem .4rem .4rem .4rem; background-color: #fdf8f1; border: 1px solid #f8e4ca; border-radius: 4px; -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); } /*-- image, video caption --*/ .wp-caption, .gallery-caption { color: #666; font-style: italic; margin-bottom: 1rem; /* margin before text */ max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { margin: 0; /* text padding */ } As you will notice, I am creating a WordPress theme. I am not sure if I have called up the all the right tags in CSS for the image and caption.
  12. Hi all, I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like: - to be able to have images of different heights and widths, not all the same size (as it is now). - vertically/horizontally centered. Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/ Thanks! HTML: <div id="contentwrapper"> <div class="centreme"> <img src="https://picsum.photos/200/200?image=1" id="animation" /> <img class="hidden" src="https://picsum.photos/200/200?image=1" /> <img class="hidden" src="https://picsum.photos/200/200?image=2" /> <img class="hidden" src="https://picsum.photos/200/200?image=3" /> <img class="hidden" src="https://picsum.photos/200/200?image=4" /> <img class="hidden" src="https://picsum.photos/200/200?image=5" /> <div id="bottommark"></div> </div> </div> CSS: body, html { height: 7000px; margin: 0; background-color: grey; } .hidden { position: absolute; top: -9999999px } #bottommark { position: absolute; bottom: 0; } #contentwrapper { width: 100%; height: 100%; position: fixed; } .centreme { position: fixed; width: 200px; /* the image width */ height: 200px; /* the image height */ top: 50%; left: 50%; margin-top: -100px; /* half the image height */ margin-left: -100px; /* half the image width */ } JS: $(document).ready(function() { var a = $(document).height(); var b = a - $("#bottommark").position().top; $(window).scroll(function() { var e = $(document).height(); var f = $(window).scrollTop(); var c = e - $("#bottommark").position().top - f; var d = b / 5; $("span").html(c); if (c > d * 4) { $("#animation").attr("src", "https://picsum.photos/200/200?image=1") } if ((c < d * 4) && (c > d * 3)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=2") } if ((c < d * 3) && (c > d * 2)) { $("#animation").attr("src", "https://picsum.photos/200/200?image=3") } if (c < d * 2 && c > d * 1) { $("#animation").attr("src", "https://picsum.photos/200/200?image=4") } if (c < d) { $("#animation").attr("src", "https://picsum.photos/200/200?image=5") } }) });
  13. Here is my website. www.vibe432.com please check every link and every possible page ans let ne know whats wrong. Id evenlike to have the responsiveness looked at too. Im having someone do the css and html for me so i need to tell them exactly what wrong and why it's wrong.
  14. Hello everyone :) I am working on a grid type layout and really having troubles and hoping someone might be able to help. The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row. I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help. Attached is a very basic example of what I am trying to achieve. Thanks in advance.
  15. Hello !! Following the instructions from the site 'W3Schools', I created one dropdown menu in javascript, like shows in the link below: http://www.terezanininha.com.br/Exemplo_proprio_4.html But what I need, for exampple, after click in the button and show de list, at mouseover on the link 'Link2' for example, shows another list in the right side with more link options !! How Can I do that ?? Wating answer...
  16. I’m very curious about this topic cause the definition of web designer is different from country to country, for example some countries define a web designer as a person who knows design and programing (Javascript and php etc). I wanna know where you are from and which language you need to be web designer like the following. Country : Japan Language: HTML,CSS,*JavaScript, *wordpress *As to JavaScript, you don’t have to know everything about it but at least how it works. Plus you basically just need to know how to customize jQuery. I really wanna know to what extent I should learn JS or php if I need to learn them as web designer in some countries. Thanks in advance for your help !
  17. I created my first website. Please tell me, what can I change and improve? http://mario89.smarthost.pl/
  18. colinbrazier

    I need a responsive dropdown menu

    Hi everyone, My dropdown multi-level menu at www.fobgfc.org doesn't work with touch devices. It doesn't drop down at all. Basically because it makes use of :hover. I'd like the functionality to behave like the menu on www.chipsteadfc.org.uk I will consider using jQuery. How's best to do this please? Cheers, Col
  19. Trying to get the outside border to go around all the copy including the bullets. What am I missing here? Code: <html> <head> <title>fancy box 2 column bullet list</title> </head> <body> <div style="border: 1px solid #41b6e6; padding:0px;"> <div style="background: #41b6e6; color:#fff; font-weight:bolder;">SMI Network Security Services</div> <div>Some of the key services we provide to help you address your security needs include</div> <div style="width:50%; float:left;"> <ul> <li>Vunerability Management</li> <li>Web Application Security/Firewall</li> <li>DDoS Monitoring & Mitigation</li> <li>Real-time Log Flow Analaysis</li> </ul> </div> <div style="width:50%; float:left;"> <ul> <li>Event Log Management</li> <li>Managed Cloud Security</li> <li>Network-Based Security & Protection</li> </ul> </div> </div> </body> </html>
  20. Hey I can't find the CSS style to style this button. You can find it on https://ashleyassists.mystagingwebsite.com/social-media/
  21. RobDoyle

    Wrappers and Containers

    I am curious as to the difference between the two and when one should be used over the other. Thanks.
  22. I'm trying to create this site and this is the code I have right now. How do I make a container and place it just like on the "this site"? How do I insert an image instead of "go to site" button? And make it all responsive just like on "this site"?
  23. BruceJustice

    CSS Accordion Issue

    Hey everyone, I can't sort this out myself. Basically, I have implemented a CSS Accordion code on my website, which basically expands and shows content on hover and is based on ul and li elements. I'd like the content of one of the items to be visible without having to drag the mouse over it, however, so far I couldn't think of any way to do it and I wonder if anyone could help me out. That would be very much appreciated! HTML: <div class="accordion"> <ul class="a-ul"> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 1</h2> <p class="a-p">Description here</p> </a> </div> </li> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 2</h2> <p class="a-p">Description here</p> </a></div> </li> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 3</h2> <p class="a-p">Description here</p> </a></div> </li> <li class="a-li"> <div class="a-div"><a class="a-a" href="#"> <h2 class="a-h2">Heading 4</h2> <p class="a-p">Description here</p> </a></div> </li> </ul> </div> CSS: /* This section is for the accordion styling */ body { margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; } .accordion { width: 100%; height: 100vh; overflow: hidden; } .accordion .a-ul { width: 100%; display: table; table-layout: fixed; margin: 0; padding: 0; } .accordion .a-ul .a-li { display: table-cell; vertical-align: bottom; position: relative; width: 16.666%; height: 100vh; background-repeat: no-repeat; background-position: center center; transition: all 500ms ease; } .accordion .a-ul .a-li .a-div { display: block; overflow: hidden; width: 100%; } .accordion .a-ul .a-li .a-div .a-a { display: block; height: 100vh; width: 100%; position: relative; z-index: 3; vertical-align: bottom; padding: 15px 20px; box-sizing: border-box; color: #fff; text-decoration: none; font-family: Open Sans, sans-serif; transition: all 200ms ease; } .accordion .a-ul .a-li .a-div .a-a * { opacity: 0; margin: 0; width: 100%; text-overflow: ellipsis; position: relative; z-index: 5; white-space: nowrap; overflow: hidden; -webkit-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 400ms ease; transition: all 400ms ease; } .accordion .a-ul .a-li .a-div .a-a .a-h2 { font-family: Montserrat, sans-serif; text-overflow: clip; font-size: 24px; text-transform: uppercase; margin-bottom: 2px; top: 250px; } .accordion .a-ul .a-li .a-div .a-a .a-p { top: 250px; font-size: 13.5px; } /* Background images for the Accordion Tabs */ .accordion .a-ul .a-li:nth-child(1) { background-image: url("..."); background-size: cover; } .accordion .a-ul .a-li:nth-child(2) { background-image: url("..."); background-size: cover; } .accordion .a-ul .a-li:nth-child(3) { background-image: url("..."); background-size: cover; } .accordion .a-ul .a-li:nth-child(4) { background-image: url("..."); background-size: cover; } /* Expands the accordion item on mouse hover using :hover pseudo element */ .accordion .a-ul:hover .a-li { width: 8%; } .accordion .a-ul:hover .a-li:hover { width: 60%; } .accordion .a-ul:hover .a-li:hover .a-a { background: rgba(0, 0, 0, 0.4); } .accordion .a-ul:hover .a-li:hover .a-a * { opacity: 1; -webkit-transition: All 1s ease-in-out; -webkit-transform: translateX(0); transform: translateX(0); }
  24. GrahamUK33

    CSS Validation

    I have been using the W3C CSS Validator to highlight any problems with the code. What I am getting is ‘Congratulations! No Error Found’ for CSS Level 3, but there are warnings for code like the following: -webkit-linear-gradient(top,#1e5087,#1a4677) -moz-linear-gradient(top,#1e5087,#1a4677) -ms-linear-gradient(top,#1e5087,#1a4677) -o-linear-gradient(top,#1e5087,#1a4677) Do W3C not recognise the above has good practice?
  25. Hi guys, I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly: General Stuff: http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it You can also save revisions of your Fiddle to track your progress. http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some server-side code. Instead of pasting masses of lines inside a topic, paste your code in to pastebin and get someone to have a look at it for you http://jsonlint.com/ - JSON Validator http://paletton.com/ - Color Scheme Designer. See what colours complement each other etc. Useful stuff. http://www.lipsum.com/ - Lorem Ipsum - Useful for inserting dummy text in to your web pages. http://net.tutsplus.com/category/tutorials/php/ - PHP tutorials, quizzes etc. They also do the same for JavaScript, HTML, CSS, WordPress, ASP.NET to name a few. Really good site. Javascript: You Don't Know JavaScript - https://github.com/getify/You-Dont-Know-JS JavaScript scene https://medium.com/javascript-scene Webpack Asset bundler https://webpack.js.org/ Jest, Automated tests for JavaScript https://facebook.github.io/jest/ CSS: http://css3generator.com/ - Generate CSS3. Box Shadow, Border Radius etc. http://border-radius.com/ - Generate border radius quickly! http://www.javascripter.net/faq/hextorgb.htm - HEX to RGB conversion. http://meyerweb.com/eric/tools/css/reset/ - CSS Reset Stylesheet. Resolve browser inconsistencies such as varying margins/padding. http://www.cssplay.co.uk - Lots of experiments with CSS, menus and layouts. CSS Wizardry: https://csswizardry.com/ Sass Guidelines https://sass-guidelin.es/ Responsive Design: http://www.getskeleton.com/ - Responsive Grid. Nebula - a framework built by WDF member, rbrtsmith: https://nebulaui.github.io/nebula/ Server-Side Coding: http://net.tutsplus.com/tutorials/php/php-database-access-are-you-doing-it-correctly/ - How to connect to a database using PDO http://www.php.net/manual/en/index.php - PHP manual for everything PHP! Form Validation (Client-Side): https://jqueryvalidation.org/ - (My preferred method) Simple to use. Include the necessary jQuery and Validation.js files. Simple usage example, call the function using $('#myForm').validate(); and add a class="required" to fields you want to validate Also allows you to create custom messages and make the validation more advanced! I hope these are useful! If anyone has any others to share, please do Lyndsey.