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 424 results

  1. 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!
  2. I created my first website. Please tell me, what can I change and improve? http://mario89.smarthost.pl/
  3. 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...
  4. 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 !
  5. 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
  6. 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>
  7. Hey I can't find the CSS style to style this button. You can find it on https://ashleyassists.mystagingwebsite.com/social-media/
  8. RobDoyle

    Wrappers and Containers

    I am curious as to the difference between the two and when one should be used over the other. Thanks.
  9. 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"?
  10. 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); }
  11. 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?
  12. 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.
  13. Hi, Calling for some advice/support to put forward a few ideas as to how to best achieve a design I'm working on. I have attached an image outlining a section in a design that has a (not skewed, but similar) wavy curved shape on the top and bottom. The site will have a fixed container grid of 1200px but the height of the content will be variable depending on the viewport width. To make things a little more tricky too, I would like to do this with a gradient. This would cause issues with doing a static image top and bottom and a gradient background for the main content. Could anyone post a few quick codepen ideas to point me in the right direction? Or link me some jQuery/JS-based plugins that would be able to create something close to what I want to achieve. Alternatively, if you have any other suggestions i'm all ears (the gradient could go for example) Thanks
  14. Hi all, I have a CSS rule that I wish to change the margins of, but I can't be sure where else on the site I've used the CSS rule and how it would impact other pages. Is there a way that I can search the entire Wordpress site for pages where the CSS rule is used?
  15. I am looking for the ideal breakpoints and font size to enable the text to be readable on all devices. The breakpoints that I have at the moment are as follows: HTML <html lang="en"> <head> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> </head> CSS html { font-size: 16px; font-family: 'Open Sans',sans-serif; } @media only screen and (max-width: 320px) { } @media only screen and (min-width: 320px) { } @media only screen and (min-width: 480px) { } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 801px) { } @media only screen and (min-width: 1025px) { } @media only screen and (min-width: 1281px) { } What breakpoints and font size are you using?
  16. asomanikofi


    Issue:1 I am using juqeryui widgets to create section tags which contains data from an external json file I have attempted to style the data that is printed out however the text will appear on the right handside of the image for some entries while other ones pieces of text just filter down to the bottom of the page How do I go about fixing this issue? DisplayHoliday.css HolidayForm.html
  17. GrahamUK33

    CSS Flexbox Layout

    I am wondering if to create a new website using the CSS Flexbox Layout, is it good now good practice when creating a layout to use Flexbox? Does Flexbox work well cross-browser and with older browsers?
  18. Hey all, So I'm extremely new to this website - this is my first post. I come to with a problem, well, more of a question. Currently I'm working on my website for my final first year project for my web development course. I need to use JavaScript and jQuery (fine) but the problem I'm having is I don't even know where to start. The outline of what I want to do is this: - Single page design - Each page is tabbed, like a folder, one behind the other - Animated with JS / jQuery, e.g. as you hover over the tab it pulls it out a little and highlights it. That I can do myself or find out how to do with relative ease. So, I'll include some pictures of my designs. Any suggestions as to what I should look into or research would be greatly appreciated - I'd prefer to learn than copy / paste so I'm only asking for advice (which I'm sure is what is expected anyway ahahaha). Anyway. Have a great day and thank you for your time. This is due for the 8th of January, as an idea of timescale. http://imgur.com/9pRZD5r
  19. GrahamUK33

    Responsive menu not working

    I have an issue with a responsive menu that I have been working on One the screen size becomes 1024px the mobile menu button appears, the problem is that the menu does not appear as it should. Anyone know what the problem is? HTML with JavaScript <div class="container navigation group"> <div class="navigation-desktop" id="myNavigation"> <a href="index.html" class="active">Home</a> <a href="index.html">Item 1</a> <a href="index.html">Item 2</a> <a href="index.html">Item 3</a> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a> </div> </div> <script> function myFunction() { var x = document.getElementById("myNavigation"); if (x.className === "navigation-desktop") { x.className += "navigation-mobile"; } else { x.className = "navigation-desktop"; } } </script> CSS html,body { font-family: 'Open Sans',sans-serif; background-color: #ffffff; margin: 0px; } .container { position: relative; clear: both; padding: 0px; margin: 0px; } .navigation { background-color: #000099; height: 400px; color: #ffffff; } .navigation-desktop { overflow: hidden; background-color: #333; } .navigation-desktop a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navigation-desktop a:hover { background-color: #ddd; color: black; } .active { background-color: #4CAF50; color: white; } .navigation-desktop .icon { display: none; } /*-- solves floating problems, by forcing the section to self clear its children (aka the clearfix hack). This is good in Firefox 3.5+, Safari 4+, Chrome, Opera 9+ and IE 6+. --*/ .group:before, .group:after { content:""; display:table; } .group:after { clear:both; } .group { zoom:1; /* For IE 6/7 */ } @media screen and (max-width: 1024px) { .navigation-desktop a:not(:first-child) { display: none; } .navigation-desktop a.icon { float: right; display: block; } } @media screen and (max-width: 1024px) { .navigation-desktop .navigation-mobile { position: relative; } .navigation-desktop .navigation-mobile .icon { position: absolute; right: 0; top: 0; } .navigation-desktop .navigation-mobile a { float: none; display: block; text-align: left; } }
  20. Hello guys, how are you doing? I am making a new project for a local business and they seek a design similar to scabal and adviced me to take inspiration from it. However, I am having a hard time figuring out the kind of animation scabal.com has on scroll. The video gets transitioned to the left and few columns to the right pop up in style. I tried achieving the same by using AnimeJs and tried to scale the left column video to left and made the columns appear on the right but it looks weird and not exactly like how they did in scabal.com. The developers of scabal.com also made the same transition effect in their portfolio page (link) you can see the awesome smooth columns transitions when you scroll. Requesting someone to please give suggestions to achieve something similar or anything near to it. A tutorial or some code snippet would be greatly appreciated and sorry for my bad English. Thanks.
  21. Still working on the site My name is Elvis and I self taught how to create Web Sites. I learned how to programmate in HTML, CSS, JS, PHP, MYSQL, and it’s not so hard as it sound. I created ECODEWS- Elvis Code Web Sites to share with you my knowledge in web design and development. In my blog you can find a lot of useful information, tutorials, inspiration and news. http://www.ecodews.com
  22. rainland

    Technology overview

    Hello all, I'm planning on making a website, which will have a calculating web form in it. The form will have to do various basic mathematical tasks like multiplication and division for example. Also a very big plus for the form would be the possibility to save and load it (I'm thinking like either a database where you could save using a specific string and load by it or save as a xml file to the local computer or something). Now the qustion is what would be the best way of implementing this kind of site/tool? I know html5 and css and am fairly adept in C but everything else (javascript, php etc.) is unknown to me. Now, learning a new language will not be a problem because I will have lots of time to develop. I was thinking WordPress because of its ease of use and ive found this plugin but I am unsure of whether it will be able to have the save/load function. What do you guys think? How would you do this? Thanks in advance for your thoughts and feel free to ask any additional questions if I've missed something. regards, rainland
  23. Demonolith

    Media Queries aren't being called

    Hi all, Can anyone tell me why my some media query declaration are not being called? I know media queries should be placed at the bottom of a stylesheet, but they only seem to work when I place them at the top and in some cases the original declarations are called. Here is a media query I set: @media(max-width: 640px) { .copyrightwrapper { position: relative; top: 0; bottom: 0; float: left; width: 100%; height: 30px; margin: 20px 0 0 0; padding: 5px 0px 25px 0px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #999; border-top: solid 1px #ccc; } } Here is what's called even though my browser width is below 640px width: .copyrightwrapper { position: relative; top: 30px; bottom: 0px; float: left; width: 904px; color: #999; padding: 5px 0px 25px 0px; margin: 20px 15px 0 15px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-top: solid 1px #ccc; } Here's the page I'm using the CSS on.
  24. jmerlinb

    Weebly custom HTML/CSS help?

    Dear all, Would anyone be able to tell me how to edit the HTML of my Weebly website's banner image (the bike in the rain)? I know it must be somewhere under Design > Edit HTML/CSS, but as I have little HTML knowledge, I am unsure where to look. If it helps, the end game is to make the banner image interactive (so that it changes back and forth between two images upon mouse over or clicking). Take a look: www.lightcycles.xyz
  25. ***Sorry didnt mean to duplicate post*** I have copied the menu from: www.bootsnipp.com/snippets/featured/mega-menu-with-tabs-navigati‌​‌​on you will notice that when you drop the screen size down to mobile/tablet width that the menu forms an accordian dropdown. The top dropdown works fine at first - opens within the accordian... however when you then select a different tab at the bottom - men, women etc... instead of changing within the same area, it opens a dropdown at the bottom of the list does anyone know how to stop this? I have removed the below CSS code and it works fine when inspecting element. but not sure how to do thismyself as the code comes from Bootstrap CSS. Also the code is needed for fullscreen/desktop view. only seems to cause problems on mobile/tablet. although it may be something else which i have not found which is the problem .dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0px 6px 12px rgba(0,0,0,0.175); } any help would be great