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


Forums

  • 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

Found 419 results

  1. 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
  2. Hey I can't find the CSS style to style this button. You can find it on https://ashleyassists.mystagingwebsite.com/social-media/
  3. Wrappers and Containers

    I am curious as to the difference between the two and when one should be used over the other. Thanks.
  4. 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"?
  5. 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); }
  6. 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?
  7. 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
  8. 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?
  9. Confusion

    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
  10. 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?
  11. 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
  12. 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; } }
  13. 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?
  14. 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.
  15. 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
  16. 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.
  17. 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
  18. ***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
  19. 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
  20. Cleaning CSS

    Anyone used purifycss or similar tools to clean up unused styles in their css?
  21. Anyone using 'vh' to set div height

    I'm using 'vh' to ensure our puzzle games fit in the current browser viewport. Anyone else using this or got horror stories, or can suggest alternatives? TIA Paul
  22. Hello everyone! I'm new here! This is my first post! My name is Piotr, I love coding and design. I am a fulltime freelancer who creates WordPress web sites by building templates from scratch based on PSD projects. I also create PHP / HTML / CSS / JavaScript web pages without the WordPress platform. I can also build all kinds of JavaScript / WordPress plugins, sliders, etc. I hope someday you will need a programmer to implement some project. Thank you for your time. Below is a link to my portfolio on themeforest.net. https://themeforest.net/user/digitalcavalry/portfolio If necessary I can also show my newer projects. My freelancer.com profile: https://www.freelancer.com/u/pbcode.html If you think we can cooperate with the capabilities of this wonderful forum please contact me by PM. Best Regards, Piotr
  23. Hello, I'm trying to code the creation of 'sticky notes' on a webpage with a contextual menu right-click option. I nearly have it working, but there are a couple of things I cannot seem to figure out (I've been trying for a couple of weeks now!). I'm very new to web development (beginner level). I've combined some code for the sticky notes and context right-click menu. The problem I'm having is that when the page loads for the first time, a sticky note appears: I do not want that to happen. I would like it to initially load with no sticky notes visable, and only make them visable once they are added, or if they were previously added and automatically saved (which is already part of the code). So I used `display: none` to hide the css "note" element. However, if I do that then when I right-click to add a note it doesn't show up at all. So I understand I need to tell it to show if it's been created by my right-click menu option, but I've been struggling to understand how to do this. The second issue I have is that the sticky notes are created in random positions; whereas, I would like them to show up next to where I have right-clicked. Please could someone point me in the right direction? I apologise for my lack of basic knowledge. I've attached my current version. Many thanks. stickies-context-menu.zip
  24. Hi Everyone I hope you're well. I've been trying to work out how to make a video player with a playlist for the project that I'm working on. Their doesn't seem to be many tutorials on this and was wondering if someone on here could help me out? I would like to make something similar to this https://cdn.athemes.com/wp-content/uploads/onplay-video-magazine-theme.jpg If anyone can help me out it would be much appreciated. Thanks!
  25. Hi there, I am fairly new to web design as I only recently just completed a diploma....I am currently creating a website and am having a slight trouble trying to get my JavaScript function to work for the buttons on my clickable navigational dropdown menu. At the moment the dropdown content will not show, but the other function to hide it when clicking away from the menu seems to be working. My knowledge is very limited on JavaScript right now having only covered HTML and CSS so need the help! The website is currently at https://uklivesound.app.com HTML CSS JavaScript
×