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

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 894 results

  1. I was told to always write Float left or right when putting something in the container just so it doesnt get messy later http://imgur.com/a/kZtoh i have no idea why its like that .can someone tell me is that suposed to happen if i put flaot or did i do something else wrong
  2. hi guys im starting to re- learn html and css and i came across options that are called Float(left right ..) and Clear both . i remember when i first learned about html and css i used that non stop but a friend of mine told me i should stop using that bcs there are other ways of adjusting something on the page without float or clear option. he said to use Flex box (not sure what that is but il check it out soon ) My question is why is it bad to use Float and Clear .Is it going to ruin the page in some way? Or does Flex box do what float and clear can and much more ?
  3. Hey all, I have got a jquery slideshow on my website which am trying to make the images in it responsive so that they can fit on tablets and mobile device screens, but it doesn`t work as expected. Kindly assist? HTML <div id= "hero"> <div id= "pager"> </div> <div id= "pause"> ≈ </div> <div id= "play"> Δ</div> <div id= "next"> 〉 </div> <div id= "prev"> 〈 </div> <div id= "slider"> <div class= "items"> <img src= "images/hp.jpg" alt="HP Computers" id="img"> <div class = "info"> <h2> HP Computers </h2> <p> We deliver all type of HP laptops <a href= "laptops.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/mobile.jpg" alt="Mobile Phones"> <div class = "info"> <h2> Mobile Phones</h2> <p> We create all kinds of mobile websites <a href= "mobile.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/photography.jpg" alt="Photography Portfolio Designs"> <div class = "info"> <h2> Photography Brochures </h2> <p> We create unique, responsive and amazing photography portfolio <a href= "photography.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> <div class= "items"> <image src= "images/graphic_design.jpg" alt= "Graphics Design"> <div class = "info"> <h2> Graphics Designs </h2> <p> We create amazing graphic contents for your project or institution <a href= "graphic_design.html" class="link2"> Learn more </a> </p> </div> <!--End_info--> </div> <!--End_items--> </div> <!--End_slider--> </div> <!--End_hero--> <script type="text/javascript" src= "jquery-1.12.3.js"> </script> <script type="text/javascript" src= "jquery.cycle.all.js"> </script> <script type="text/javascript" src= "test.js"> </script> CSS /*Screen size of laptop and Desktop monitors.*/ @media screen and (min-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 550px; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 550px; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 550px; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 15px; } .info p { font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 15px; line-height: 1px; } } /* Screen size of a tablet and below.*/ @media screen and (max-width: 1024px){ /*Index page Slideshow styles*/ #hero{ width: 98%; background-size: auto; height: 250px; border: 2px solid brown; box-shadow: 7px 7px 7px; display: block; position: relative; margin: auto; } #slider{ width: 98%; background-size: auto; height: 250px; display: block; position: absolute; overflow: hidden; } .info { width: 98%; height: 100px; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 8px; } .info p { width: 98%; font-family: sans-serif; font-size: 13px; font-weight: lighter; color: #ffffff; padding: 0 0 0 8px; line-height: 1px; } } /*Screen size of a phone in potrait and landscape mode.*/ @media screen and (max-width: 480px){ #hero{ width: 98%; border: 2px solid brown; box-shadow: 3px 3px 3px; display: block; position: relative; margin: auto; } #slider{ width: 98%; display: block; position: absolute; overflow: hidden; } .info { width: 98%; display: block; position: relative; bottom: 100px; background: rgba(102,204,204,.2); z-index: 50; } .info h2 { font-family: sans-serif; font-size: 16px; font-weight: bold; color: #ffffff; padding: 28px 0 0 5px; } .info p{ opacity: 0; } }
  4. Hi All; The height element does not seem to be working as expected for the following example: http://www.w3schools.com/css/tryit.asp?filename=trycss_dim_max-height When I resize the window/browser, the div element does not change in height. I made a few changes to the code, adding a "border" to show the box better: <!DOCTYPE html> <html> <head> <style> div { max-height: 600px; min-height: 200px; background-color: powderblue; border : solid; } </style> </head> <body> <h2>Set the max-height and min-height of an element</h2> <p>Resize the browser window to see the effect.</p> <div>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div> </body> </html> Any ideas as to what the issue is? ... or am I missing something here? Thanks!
  5. johoki

    Small caps rendering

    Hi guys! I'm currently working on a new online store and i have a small issue that really bugs me. I'm using "font variant: small-caps" + "text-transform: lowercase" for the menu and all headlines (Font: "Questrial"). It looks great in Chrome and Safari on my Mac and almost as good on my Galaxy S6.. but Firefox, it looks like the small caps ate too much food. They are too thick! The body text is as far as i can see the same. I'm no expert, but i understand that the browsers render fonts (or the small caps in my case) differently. My question is if there is any way to work around this or should i just accept the fact? Many thanks!
  6. Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance. <!DOCTYPE html> <html lang= "en-us"> <head> <meta charset= "utf-8"/> <title>About</title> <link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style type= "text/css"> body { margin: 0; padding: 0; color: white; background-color: black; overflow: auto; } .about { max-width: 100%; height: 200px; background-color: black; color: white; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 5px; margin: 0; } .characteristics-wrapper { max-width: 100%; padding: 10px; margin-bottom: 200px; border: 1px solid white; overflow: hidden; } .characteristics-quote { max-width: 40%; float: left; transform: translateX(-5%); position: fixed; color: white; } .characteristics-quote h1 { max-width: 70%; text-align: center; margin: auto; padding-top: 100px; } .characteristics-container { max-width: 60%; float: right; text-align: center; position: relative; } .characteristics-item-row1, .characteristics-item-row2 { max-width: 50%; } .characteristics-item-row1 { padding-top: 50px; } .characteristics-item-row2 { position: absolute; top:50px; right: 0; } .characteristics-item { max-width: 80%; display: block; margin: auto; margin-bottom: 20px; margin-top: 20px; } .characteristics-icon { font-size: 60px; padding: 15px; border: 1px solid lightgrey; border-radius: 50%; height: 76px; width: 76px; margin: auto; } .characteristics-item:hover .characteristics-icon{ background-color: white; color: black; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } /**Animations**/ .left { -webkit-animation-name: left; -webkit-animation-duration: 1s; -moz-animation-name: left; -moz-animation-duration: 1s; -ms-animation-name: left; -ms-animation-duration: 1s; -o-animation-name: left; -o-animation-duration: 1s; animation-name: left; animation-duration: 1s; } .right { -webkit-animation-name: right; -webkit-animation-duration: 3s; -moz-animation-name: right; -moz-animation-duration: 3s; -ms-animation-name: rightt; -ms-animation-duration: 3s; -o-animation-name: right; -o-animation-duration: 3s; animation-name: right; animation-duration: 3s; } .scale { -webkit-animation-name: scale; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: scale; -ms-animation-duration: 2s; -o-animation-name: scale; -o-animation-duration: 2s; animation-name: scale; animation-duration: 2s; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: fade; -ms-animation-duration: 2s; -o-animation-name: fade; -o-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } /**Animating from the left**/ @-webkit-keyframes left { from {left: -500px;} to {left: 0;} } @-moz-keyframes left { from {left: -500px;} to {left: 0;} } @-ms-keyframes left { from {left: -500px;} to {left: 0;} } @-o-keyframes left { from {left: -500px;} to {left: 0;} } @keyframes left { from {left: -500px;} to {left: 0;} } /**Animating from the right**/ @-webkit-keyframes right { from {right: -500px;} to {right: 0;} } @-moz-keyframes right { from {right: -500px;} to {right: 0;} } @-ms-keyframes right { from {right: -500px;} to {right: 0;} } @-o-keyframes right { from {right: -500px;} to {right: 0;} } @keyframes right { from {right: -500px;} to {right: 0;} } /**Animating scale**/ @-webkit-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-moz-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-ms-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-o-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } @keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } /**Fading animation**/ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-ms-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-o-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <div class= "about"> <h1>Who we are?</h1> <div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div> </div> <div class= "characteristics-wrapper"> <div class= "characteristics-quote"> <h1>Main characteristics of our services</h1> </div> <div class= "characteristics-container"> <div class= "characteristics-item-row1"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> <div class= "characteristics-item-row2"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item item2"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> </div> </div> <div style= "height: 700px"></div> </body> </html>
  7. Hi, here is a code. I want to make the .characteristics-quote to stay fixed when scrolling to the .characteristics-wrapper. But When the characteristics-wrapper class scrolling is finished the .characteristics-quote should be vanished. Can you please tell me how I can fix this ? Thank you in advance. <!DOCTYPE html> <html lang= "en-us"> <head> <meta charset= "utf-8"/> <title>About</title> <link rel= "stylesheet" type= "text/css" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style type= "text/css"> body { margin: 0; padding: 0; color: white; background-color: black; overflow: auto; } .about { max-width: 100%; height: 200px; background-color: black; color: white; text-align: center; padding-left: 10%; padding-right: 10%; padding-top: 5px; margin: 0; } .characteristics-wrapper { max-width: 100%; padding: 10px; margin-bottom: 200px; border: 1px solid white; overflow: hidden; } .characteristics-quote { max-width: 40%; float: left; transform: translateX(-5%); position: fixed; color: white; } .characteristics-quote h1 { max-width: 70%; text-align: center; margin: auto; padding-top: 100px; } .characteristics-container { max-width: 60%; float: right; text-align: center; position: relative; } .characteristics-item-row1, .characteristics-item-row2 { max-width: 50%; } .characteristics-item-row1 { padding-top: 50px; } .characteristics-item-row2 { position: absolute; top:50px; right: 0; } .characteristics-item { max-width: 80%; display: block; margin: auto; margin-bottom: 20px; margin-top: 20px; } .characteristics-icon { font-size: 60px; padding: 15px; border: 1px solid lightgrey; border-radius: 50%; height: 76px; width: 76px; margin: auto; } .characteristics-item:hover .characteristics-icon{ background-color: white; color: black; -webkit-transition: 0.6s ease-in-out; -moz-transition: 0.6s ease-in-out; -ms-transition: 0.6s ease-in-out; -o-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } /**Animations**/ .left { -webkit-animation-name: left; -webkit-animation-duration: 1s; -moz-animation-name: left; -moz-animation-duration: 1s; -ms-animation-name: left; -ms-animation-duration: 1s; -o-animation-name: left; -o-animation-duration: 1s; animation-name: left; animation-duration: 1s; } .right { -webkit-animation-name: right; -webkit-animation-duration: 3s; -moz-animation-name: right; -moz-animation-duration: 3s; -ms-animation-name: rightt; -ms-animation-duration: 3s; -o-animation-name: right; -o-animation-duration: 3s; animation-name: right; animation-duration: 3s; } .scale { -webkit-animation-name: scale; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: scale; -ms-animation-duration: 2s; -o-animation-name: scale; -o-animation-duration: 2s; animation-name: scale; animation-duration: 2s; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 2s; -moz-animation-name: fade; -moz-animation-duration: 2s; -ms-animation-name: fade; -ms-animation-duration: 2s; -o-animation-name: fade; -o-animation-duration: 2s; animation-name: fade; animation-duration: 2s; } /**Animating from the left**/ @-webkit-keyframes left { from {left: -500px;} to {left: 0;} } @-moz-keyframes left { from {left: -500px;} to {left: 0;} } @-ms-keyframes left { from {left: -500px;} to {left: 0;} } @-o-keyframes left { from {left: -500px;} to {left: 0;} } @keyframes left { from {left: -500px;} to {left: 0;} } /**Animating from the right**/ @-webkit-keyframes right { from {right: -500px;} to {right: 0;} } @-moz-keyframes right { from {right: -500px;} to {right: 0;} } @-ms-keyframes right { from {right: -500px;} to {right: 0;} } @-o-keyframes right { from {right: -500px;} to {right: 0;} } @keyframes right { from {right: -500px;} to {right: 0;} } /**Animating scale**/ @-webkit-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-moz-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-ms-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} }@-o-keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } @keyframes scale { from {transform: scale(3);} to {transform: scale(1);} } /**Fading animation**/ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-moz-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-ms-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-o-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @keyframes fade { from {opacity: 0;} to {opacity: 1;} } </style> </head> <body> <div class= "about"> <h1>Who we are?</h1> <div class= "about-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan. Pellentesque commodo, enim nec faucibus tristique, risus nibh ullamcorper velit, sed egestas urna erat sit amet justo.</div> </div> <div class= "characteristics-wrapper"> <div class= "characteristics-quote"> <h1>Main characteristics of our services</h1> </div> <div class= "characteristics-container"> <div class= "characteristics-item-row1"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> <div class= "characteristics-item-row2"> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-pagelines" aria-hidden="true"></i></div> <div class= "characteristics-title">Innovative</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-cogs" aria-hidden="true"></i></div> <div class= "characteristics-title">Great Features</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item item2"> <div class= "characteristics-icon"><i class="fa fa-modx" aria-hidden="true"></i></div> <div class= "characteristics-title">Unique Design</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> <div class= "characteristics-item"> <div class= "characteristics-icon"><i class="fa fa-graduation-cap" aria-hidden="true"></i></div> <div class= "characteristics-title">Well Documented</div> <div class= "characteristics-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada. Integer dapibus nisi id eros scelerisque accumsan.</div> </div> </div> </div> </div> <div style= "height: 700px"></div> </body> </html>
  8. Hi, I thank all of you in this forum because whenever I don't understand anything you people help me. Now I want to know something more. I know HTML, CSS, JavaScript and jQuery. Now I have started building an e-commerce shopping website. But I don't know how I will manage the data on this site, how I will request data from server,keep the recordings of the sales and products. Is there any way, I can complete my website with just javascript scripting language. Please have some dynamic suggestion for me. Thank you in advance.
  9. Hi, I am having some problem while creating a mega dropdown menu. I want the mega-dropdown-content to be divided to 4 column and 3column will be for the menu and rest 1 column will be for an image. But this is not the expected result. Here is the code. Please tell how can I fix it? Thank you. <!DOCTYPE html> <html> <head> <link rel= "stylesheet" href= "mega%20menu%20copy%20copy.css"/> <link rel= "stylesheet" href= "font-awesome-4.7.0/css/font-awesome.min.css"/> <style> .menu-container, .mega-menu, .nav, .nav li, .nav a, .nav div{ margin: 0; padding: 0; border: none; outline:none; } .nav { position: relative; } .nav a { text-decoration: none; } .nav li { list-style: none; } a { color: white; } .menu-container { position: relative; width: 100%; } .mega-menu { position: absolute; width: 48%; left: 26%; height: 40px; background-color: red; } .nav > li { display: inline-block; height: 40px; font-size: 20px; font-weight: bold; } .nav > li > a { display: block; padding: 10px 10px; color: white; text-align: left; vertical-align: center; margin-bottom: 10px; } .mega-menu-content, .dropdown { padding-top: 60px; position: absolute;; width: 100%; display: none; background-color: white; color: black; font-size: 16px; border: 2px solid lightgrey; } .mega-menu-content > ul > li:first-child,.dropdown > ul >li:first-child { padding-top: 10px; } .mega-menu-content > ul> li, .dropdown > ul > li { display: block; min-width: 120px; min-height: 40px; margin: 0; padding: 0; } .mega-menu-content > ul > li > a, .dropdown > ul > li > a { color: red; font-size: 16px; min-width: 120px; padding: 8px 10px; border: 1px solid lightgrey; } .mega-menu-content { column-count: 3; column-width: 33%; column-gap: 0; } .mega-menu-content > ul > li > a:hover, .dropdown > ul > li > a:hover { background-color: lightgrey; } .nav > li:hover .mega-menu-content, .nav > li:hover .dropdown{ display: block; } </style> </head> <body> <div class= "menu-container"> <div class= "mega-menu"> <ul class= "nav"> <li><a href= "#">Home</a></li> <li><a href= "#">Clothing <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <ul>Men<hr/> <li><a href= "#">T-shirts</a></li> <li><a href= "#">Shirts</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Shoes</a></li> <li><a href= "#">Sunglasses</a></li> <li><a href= "#">Caps</a></li> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Others</a></li> </ul> <ul>Women<hr/> <li><a href= "#">Jewelry</a></li> <li><a href= "#">Coats & Jackets</a></li> <li><a href= "#">Tops & Blouses</a></li> <li><a href= "#">Intimate & Sleep</a></li> <li><a href= "#">Jeans</a></li> <li><a href= "#">Pants</a></li> <li><a href= "#">Skirts</a></li> <li><a href= "#">Sweaters</a></li> </ul> <ul>Others<hr/> <li><a href= "#">Boys</a></li> <li><a href= "#">Girls</a></li> <li><a href= "#">Baby</a></li> <li><a href= "#">Luggage</a></li> </ul> <ul>From Popular Sites<hr/> <li><a href= "#">Amazon</a></li> <li><a href= "#">Ebay</a></li> <li><a href= "#">Etsy</a></li> <li><a href= "#">Shoppify</a></li> </ul> <img src= "#" height= "100px" width= "100px" style= "float: right;"/> </div> </li> <li><a href= "#">Products <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class= "mega-menu-content"> <img src= "#" height= "100%" width= "25%" style= "float: left;"/> <hr/> <ul>Electronics & Computers<hr/> <li><a href= "#">TV & Video</a></li> <li><a href= "#">Cellphone & Camera</a></li> <li><a href= "#">Head Phones</a></li> <li><a href= "#">Video Games</a></li> <li><a href= "#">Computers & Tablets</a></li> <li><a href= "#">Monitors</a></li> <li><a href= "#">Schools & Office Supplies</a></li> <li><a href= "#">Trade In Your Electronics</a></li> <hr/></ul> <ul>Health & Beauty<hr/> <li><a href= "#">All Beauty</a></li> <li><a href= "#">Luxury Beauty</a></li> <li><a href= "#">Specialty Diets</a></li> <li><a href= "#">Health,Household & Baby care</a></li> <li><a href= "#">Coupons</a></li> <hr/></ul> <ul>Sports & Outdoors<hr/> <li><a href= "#">Athletic Clothing</a></li> <li><a href= "#">Exercise & Fitness</a></li> <li><a href= "#">Hunting & Fishing</a></li> <li><a href= "#">Team Sports</a></li> <li><a href= "#">Cycling</a></li> <li><a href= "#">Water Sports</a></li> <li><a href= "#">Winter Sports</a></li> <li><a href= "#">All Sports</a></li> </ul> </div> </li> <li><a href= "#">Gifts <i class="fa fa-chevron-circle-down" aria-hidden="true"></i></a> <div class="dropdown"> <ul> <li><a href= "#">Games</a></li> <li><a href= "#">Books</a></li> <li><a href= "#">Show Piece</a></li> <li><a href= "#">Kids Birthday</a></li> </ul> </div> </li> <li><a href= "#">Arts & Crafts</a></li> <li><a href= "#">Services</a></li> </ul> </div> </div> </body> </html>
  10. I've Found This Awesome Icons Stylesheet. It's Name Is Icofont,It Has +2000 Icons,And I Thought It Would Be A Good Idea If You Could Add It To Your Icons Tutorial. Here's Icofont Website Link: http://icofont.com A List Of Available Icons Can Be Found Here:http://icofont.com/icons
  11. Hi, I'm building a website and I'm wondering if I can use a stylesheet provided by W3schools for some elements on the site. This is the stylesheet http://www.w3schools.com/lib/w3.css Thanks,
  12. Hi, I am new using Less, and I am wondering what the proper way to transform this css classes into less classes in order to reuse them. .body-404 #content-wrapper, .page-404 { background: transparent !important; } .page-404 .error-code { color: #f4b04f; } .body-500 #content-wrapper, .page-500 { background: transparent !important; } .page-500 .error-code { color: #e66454; } 2 Questions : 1/ Let's say one day I'll have a 403-error. Should it be one function that generate the class: .mynewerror(403) 2/ And if yes or not, how it should be ?And same with this example: .left-buffer-5 { margin-left: 5px; } .left-buffer-10 { margin-left: 10px; } .top-buffer-5 { margin-top: 5px; } .top-buffer-10 { margin-top: 10px; } .right-buffer-5 { margin-right: 5px; } .right-buffer-10 { margin-right: 10px; } I understand the mere principles of Less, but I have trouble to organize it and apply the DRY rule. Thanks, Stéphane.
  13. In my site www.mikroviologos.gr I would like to make a news section at the bottom of the content like this example. I tried different ways: 1. Inside <div id="content" class="col-9"> after the last <p> I created a <div class="col-4"> to divide the content into 3 columns. 2. I made .floating-box following this tutorial inside <div id="content" class="col-9"> after the last <p> but the result was always the same: part of bottom text goes under footer. Why does this happen? Since I put news section inside <div id="content" class="col-9"> shouldn't it have the behavior of content (push the footer down)? So, I would like to ask, which is the best way to create a News section and how can I make it not hide under the footer, but push the footer down like now content does? Here is my .css: * {box-sizing: border-box;} html{overflow-y:scroll;position:relative;height:100%} header{height:92px;width:100%;margin:auto;background-color:#1a3365;border-bottom:2px solid #6e98c2;} header > .container {overflow: visible;white-space:nowrap;} #nav a{color:#d2dce6;font-size:15px;display:block;padding:3px 4px;font-weight:bold;} #nav li{margin-left:8px;border:2px solid #6e98c2;border-radius:5px;float:left} #nav li:hover,#nav li:active,#nav li.selected{background-color:#101f3d;border:2px solid #4b80b4;} #l1 {color:#f2f2f2;font-size:19px} #l2 {color:#d2dce6;font-size:14px} #logoArea {display:inline-block;float:none;height:auto;padding-bottom:0;vertical-align:top;font-weight:bold;font-family:Arial} #logoArea > a {white-space:normal;} #logoArea > a div {margin-left:12px;} #nav {list-style:outside none none;overflow:hidden;} #logoArea,#nav {margin:0;} #navArea {display:inline-block;margin:50px 0 0;position:relative;white-space:nowrap;} ul#nav {padding:0;} .container {width: 81%; margin:0 auto;max-width:1000px} aside{height:100%;margin:12px 0 15px 0} h1{color:#4A6B98;font-size:21px;} h2{font-size:19px} h3{font-size:16px} #block1{height:auto;margin-top:14px;} #block1 ul{height:auto;padding:0;margin:0;} #block1 ul li{list-style:none;padding:6px;text-align:left;margin:0 6px;border-bottom:1px solid #d9d9d9;} #block1 ul li a{color:#4a6b98;text-decoration:none;font-size:15px;padding:0;display:block;font-weight:bold;} #block1 ul li a:hover, #block1 li a.selected{color:#262626;} #block1 li:first-child{border-top:1px solid #d9d9d9;} #block2, #block3{height:auto;background-color:#ecf1f8;border-top:1px solid #fff;box-shadow:1px 1px 3px rgba(0,0,0,0.2);border-radius:5px;padding:10px;margin-top:20px;line-height:1.5} #block2 h2, #block3 h2{margin:0;font-size:18px} #block2 h3, #block3 h3{margin-top:0;} #block2 p, #block3 p, #block2 form{font-size:13px;} p{font-size:15px;} body{height:100%;background:#fff;margin:0;padding:0;font-family:"Trebuchet MS",Helvetica,Arial;font-size:14px;line-height:1.43;color:#4d4d4d;} body a{text-decoration:none;color:#4a6b98;} #content{font-size:15px;margin:26px 0 15px;line-height:1.5} footer{width:100%;text-align:center;background-color:#dae4f1;margin-left:auto;margin-right:auto;border-top:#6e98c2 2px solid} footer p{font-size:12px;text-align:left;margin:0;line-height:1.43} #iso {width:41px;height:40.5px;float:left;margin-right:5px} #p1 {color:#1a3365} #p2 {color:#dae4f1} #c {color:#1a3365} ul.topnav li.icon {display:none;} .row::after {content: "";clear:both;display:block;} [class*="col-"] {float:left;padding:15px;} .col-1 {width:8.33333%;} .col-2 {width:16.6667%;} .col-3 {width:25%;} .col-4 {width:33.3333%;} .col-5 {width:41.6667%;} .col-6 {width:50%;} .col-7 {width:58.3333%;} .col-8 {width:66.6667%;} .col-9 {width:75%;} .col-10 {width:83.3333%;} .col-11 {width:91.6667%;} .col-12 {width:100%;} #wrapper {min-height:100%;} footer.col-12 {position:relative;bottom:auto;overflow:hidden;min-height:100px;padding-top:0;padding-bottom:0;} aside:after, #content:after {content:"";display:block;padding-bottom:100px;} footer.col-12 {margin-top:-100px;} @media screen and (max-width:1020px) { aside:after {padding-bottom:15px;} #content img:first-child, #content h1:first-child + img {margin:0 auto;display:block;} ul.topnav li:not(:first-child) {display:none;} ul.topnav li.icon {float:right;display:inline-block;} #logoArea {display:block;text-align:center;} header {height:auto;} #navArea {display:block;height:30px;margin:1em 15px;} [class*="col-"] {width:100%;} #nav li {float:none;margin:0;background-color:#1a3365;} #nav {position:absolute;left:0;right:0;} ul.topnav li.icon {display:inline-block;position:absolute;right:0;top:0;} #navArea #nav a {font-size:16px;} #content {margin-top:0px;} aside {margin-bottom:0;} .container{width:auto;} ul.topnav.responsive {position:relative;} ul.topnav.responsive li.icon {position:absolute;right:0;top:0;} ul.topnav.responsive li {float:none;display:block;margin: 0;} ul.topnav.responsive li a {display:block;text-align:left;} #nav.topnav.responsive > li:not(:first-child):not(:last-child) {margin-top:-1px;} } @media screen and (max-width:1090px) {#nav a {font-size:14px;}} and here is my .html <!DOCTYPE html> <html lang="el"> <head> <meta name=viewport content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="css/main.css"> <title>Αρχική σελίδα | Μικροβιολογικό Εργαστήριο στην Καβάλα</title> <meta name="description" content="Ο Χάρης Καραχριστιανίδης είναι Mικροβιολόγος στην Καβάλα. Το Μικροβιολογικό Εργαστήριό του λειτουργεί από το 2005 στην οδό Φιλικής Εταιρείας 5"> <style> h1 {margin-top:0;font-weight:bold;font-family:Arial;margin-left:12px} #mc {max-width:100%;height:auto} #l1, #l2 {display:block} </style> </head> <body><div id="wrapper"> <header> <div class="container"> <div id="logoArea" class="col-3" title="Μικροβιολογικό Εργαστήριο στην Καβάλα"><h1><a href=/><span id="l1">mikroviologos.gr</span><span id="l2">Εργαστήριο Μικροβιολογίας</span></a></h1></div> <div id="navArea"> <ul id="nav" class="topnav"> <li><a href="/">Αρχική σελίδα</a></li> <li><a href="biografiko">Βιογραφικό</a></li> <li><a href="syxnes-erotiseis">Συχνές ερωτήσεις</a></li> <li><a href="arthra/">Άρθρα</a></li> <li><a href="apotelesmata">Αποτελέσματα</a></li> <li><a href="epikoinonia">Επικοινωνία</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div><!--End of navArea--> <script> function myFunction() { var x = document.getElementById("nav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; }} </script> </div> </header> <div class="row"> <div class="container"> <aside class="col-3"> <div id="block1"> <ul> <li><a href="organosi-ergastiriou">Οργάνωση εργαστηρίου</a></li> <li><a href="exoplismos">Εξοπλισμός</a></li> <li><a href="fotografies">Φωτογραφίες</a></li> <li><a href="tmimata-exetaseis">Τμήματα - εξετάσεις</a></li> <li><a href="proliptikes-exetaseis">Προληπτικές εξετάσεις</a></li> <li><a href="politiki-poiotitas">Πολιτική ποιότητας</a></li> <li><a href="asfalistika-tameia">Ασφαλιστικά ταμεία</a></li> </ul> </div><!--End of block1--> <div id="block2"><h2>Εξετάσεις αλλεργίας</h2><hr><p>Το εργαστήριό μας πρόσφατα απέκτησε τον αναλυτή της Phadia UniCAP 100 που προσδιορίζει με μεγάλη ακρίβεια με τη μέθοδο αναφοράς ImmunoCAP τις ειδικές IgE και την τρυπτάση</p></div> <div id="block3"><h2>Αποτελέσματα online</h2><hr><p>Αν θέλετε να μπορείτε να βλέπετε τα αποτελέσματά σας online και να τα κατεβάζετε σε μορφή pdf παρακαλώ ενημερώστε μας και <a href="/user/register">εγγραφείτε στην ιστοσελίδα μας</a></p></div> </aside> <div id="content" class="col-9"> <img id="mc" src="http://s.mikroviologos.gr/image/microscope.jpg" alt="Μικροβιολογικό Εργαστήριο του Χάρη Καραχριστιανίδη στην Καβάλα"><p>Το μικροβιολογικό εργαστήριο του Χάρη Καραχριστιανίδη, Iατρού Bιοπαθολόγου (Mικροβιολόγου), λειτουργεί από τις αρχές του 2005 στο κέντρο της πόλης της Καβάλας. Σε καίριο σημείο, με εύκολη πρόσβαση από τα χωριά του νομού μας καθώς και από άλλους νομούς, προσφέρουμε υπηρεσίες ιατρικής με εγκυρότητα και υπευθυνότητα.</p> <p>Ο άρτια εξοπλισμένος χώρος μας με αναλυτές τελευταίας τεχνολογίας, σε συνδυασμό με το εξειδικευμένο και ειδικά καταρτισμένο προσωπικό, σας εγγυώνται αξιοπιστία και ασφάλεια.</p> <p>Η συνέπεια, η στήριξη, ο επαγγελματισμός και το ανθρώπινο πρόσωπο είναι τα βασικά στοιχεία της παροχής υπηρεσιών υγείας του εργαστηρίου μας, για την κάλυψη των δικών σας αναγκών, κάθε στιγμή που αυτό είναι απαραίτητο.</p> </div><!--End of content--> </div><!--End of container--> </div><!--End of row--> </div><!--End of wrapper--> <footer class="col-12"><div class="container"><p class="col-3"><u>Πιστοποίηση ποιότητας</u><br><img id="iso" src=http://s.mikroviologos.gr/image/iso_logoss.png alt="Πιστοποιημένο με ISO 9001:2008 Μικροβιολογικό Εργαστήριο στην Καβάλα">Εργαστήριο πιστοποιημένο<br>με <a href="http://s.mikroviologos.gr/files/iso90012008.pdf" target="_blank">ISO 9001:2008</a> από την<br>TUV Hellas</p><p class="col-2"><u>Διεύθυνση</u><br>Φιλικής Εταιρείας 5<br>(έναντι ΙΚΑ και ΚΤΕΛ),<br>Καβάλα</p><p class="col-3"><u>Επικοινωνία</u><br><span id="p1">☏</span> 2510-620630,<br><span id="p2">☏</span> 6974-900493<br><span id="c">✉</span> <a href="http://www.mikroviologos.gr/forma-epikoinonias">Φόρμα επικοινωνίας</a></p><p class="col-4"><br>Σχεδιασμός: <a href="/">Χάρης Ν. Καραχριστιανίδης</a><br>Copyright © 2005-2016</p></div></footer> </body> </html> Thank you!
  14. Hello I want to learn to do more stuff like in this Wordpress theme: https://www.anchour.com/ After the video and the heading with white background there's a section with pictures, whenever you hover over a picture they get dark and some text appear on them. How can i do this? i know i can do something with the :hover pseudo-class and put some style there to get the picture darker, but... how can i make text that wasn't there in the first place appear?
  15. I Know That Parameters In The 2D Matrix Function Are: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()). But What Does Those (n)'s Parameters Mean In The 3D Matrix Function? matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
  16. This is my page: http://codelcolab.feriapixel.cl/ When i shrink the browser window or watch it on a mobile device, the first divs (with class row) have least width than the ones that came after them, so i'm having a blank space to the right of the first divs because of the wider ones. How can i do to make all the divs the same width? Here is how it looks, notice the white space to the right of the orange boxes:
  17. hi. To hide an element i am setting display property to "none" and to display it again i am just removing "none" that means i am setting display property to ""(empty) using java script and my element get displayed so why should i use "block" then and what is the use of it?
  18. I am developing a survey in a platform called Qualtrics. Qualtrics allows you to use what they call "embedded data" to "pipe text" into the survey in order to customize aspects of your survey itself. For example, if I want to insert the name of a school or person into a question I would use piped text which allows the customization to vary from person to person. It is a similar process to what would happen in a mail merged document that allowed someone to insert the name of a person to give the appearance of personalization. As part of the survey I am designing I have figured out how to insert the logo of each school as a header into the document through embedded data and piped text that corresponds to each recipient. I would like to do the same thing and have each institution's colors correspond to respondent within the survey itself as well. This would be things like the forward and back buttons, selected responses, and the progress bar. I've not been able to get the piped text to work in the same manner as the logo. Does anyone have any suggestions? Below is the section of code I am trying manipulate. I'm can provide more information if needed.....Thank you. /* Place your CSS here */ .Skin label.MultipleAnswer.q-checked, .Skin label.SingleAnswer.q-checked { " !important; Color}" !important; color: #fff; } Field/Color}" ; } .Skin label.q-radio.q-checked { outline: 0; } .Skin label.q-checkbox, .Skin label.q-radio { } .Skin .ProgressBarFill { }
  19. Hello all, pretty new here (and to web design, in truth) I have been toying around with Dreamweaver the past 3 weeks or so trying to redesign my company's web page and one of the elements I was adding to the page is a carousel for showing off some things. I have the carousel working properly and things are great, but there are a few things I want to try and learn how to do in order to make the page look fresh and appealing. Here is an example of what my bootstrap resembles for this topic. Pay attention to only the carousel at the top. https://getbootstrap.com/examples/carousel/ So I am trying to find out a few different styling things with the carousel. First off, on the sides of where the image would be (centered) there are areas of dark gray with arrow glyph icons indicating the direction the user can make the carousel rotate. I found a way to remove the background coloring and make the carousel "white" however I would prefer to remove those areas altogether. I would also like to push the arrow keys into the actual carousel on top of the images (maybe in a corner out of the way) I want to change what the image indicators look like on the bottom of the carousel. Currently, as in the example, the indicators are small circles that change color when a particular image pane is active. Is there a way to design icons to replace those, perhaps a line that brightens when the selection is active? For example, in the 3 slide referenced above, instead of 3 circles, the indicators are dashes that, when a current active slide is up in the carousel, the dash indicator brightens or is highlighted. The last thing I want to do is make a translucent/transparent box covering half or third of the image in the center (on a side) with text. The issue I am having is trying to get the text in a transparent/translucent box preferably one that does not change when the carousel rotates.
  20. Hi i am new for the PHP, i had the experienced before to do a login system page but what i want it is HTML and PHP file to separate i dont want PHP with HTML together to 1 file , cause professional people will more likely to use 2 file rather than 1 file easy to maintain and edit how to use the external PHP file coding without re-design whole page cause normally what i tested before was link or turn to other new page and result will come out but the design was totally gone so have any ways and suggestion to do that ... in the end, im sorry i not well in english and my knowledge of PHP still quite new , thanks you so much
  21. I've Been Analyzing W3.CSS When I Found A Strange Thing. I Found That !important Rule Is Used More 90 Times In This Framework,The Problem Here Is That !important Is Paralyzing The Ability To Manipulate Some Of Those Elements Who Carries Some Of The w3-* Classes Using Javascript,For Example: .w3-deep-purple,.w3-hover-deep-purple:hover { color:#fff !important; background-color:#673ab7 !important; } As You Can See,I Can't Manipulate Any Element Which Carries The .w3-deep-purple Class Because The !important Rule Has Disabled Style Manipulation Using JavaScript,This Means That The Following Code Is Useless: function changeFontColor() { document.getElementsByClassName("w3-deep-purple")[0].style.color="orange"; } Although This Code Is 100% Valid,But This Just Won't Work Because Of !important. I Suggest Removing This Rule From The Future Versions Of W3.CSS In Order To Give The Ability To The Developer To Add More Interactivity To His Projects.
  22. HI i trying to create a website of forum textarea editor are necessary too for recommendation which editor are best for textarea such as summernote, wysihtml5 .... and how is work to store the data/value/text with styling effect in mysql database ? Thanks all of you
  23. HI i trying to create a website of forum textarea editor are necessary too for recommendation which editor are best for textarea such as summernote, wysihtml5 .... and how is work to store the data/value/text in mysql database ? Thanks all of you
  24. HI, i have no good enough of the knowledge about the CSS design, i try to making the effect like Facebook, when mouse enter the people name will pop-up a small box , displaying like the people name,profile image,background image , and other 3 button in footer. i try to made it but still fail .... i dont have idea how to make a picture in-between the background image and some simple description. is not mistaken been using the CSS change the profile image position to absolute, and i guess the z-index also need higher of number .... but those of the design ... i not design similar like the facebook....or else other webpage same as the effect but the profile image show in center instead on the left side .... have any one can make a example or sample to teaching me how to do that ... thanks all for you help and in the end ...sorry for my english are not very well, i hope you understand what i mean Thanks
  25. I am trying to help an friend with a new website and it seem that at the work section, media queries are ignored in landscape, portrait is working fine. The problem is that I realy don't know what I am doing wrong, maybe someone could tell me where I have done something wrong. When looking on mobile device the work images (buttons) should be organized one under each other. In portrait this works fine, but in landscape it ignores the media queries and the work images (buttons) are displayed as on desktop next to each other en up on each other. Why are media queries working in portrait but are ignored in landscape. One of the media queries is: @media only screen and (min-width: 230px) and (max-width: 650px) { .work { height: 1670px; } .work_container { right: 0%; width: 100%; } .work_layer { opacity: 1; background-color: rgba(0, 0, 0, 0.3); } .beauty { top: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .beauty:hover { top: 25px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .hair { top: 525px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .hair:hover { top: 525px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .advertising { top: 740px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .advertising:hover { top: 740px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .fashion { top: 1240px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .fashion:hover { top: 1240px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .lingerie { top: 1455px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .lingerie:hover { top: 1455px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); right: auto; } .landscape { height: 190px; width: 300px; } .line_bottom { width: 197px; } .be { width: 200px; } .ha { width: 110px; } .ad { width: 115px; } .fa { width: 145px; } .lin { width: 120px; } } I tried changing @media only screen and (min-width: 230px) and (max-width: 650px) to @media only screen and (min-width: 230px) and (max-width: 650px) and (orientation:landscape) So one media querie for landscape and one for portrait, both with the same css, whitout succes. Then all so portrait works fine, landscape ingnored. Viewport is set to <meta name="viewport" content="width=device-width, initial-scale=1.0"> I tried to load it to my friends own server, but that didn't change anything. I know have solved it by making 2 section one fot landscape and one for portrait, so I can display ore hide them with display:none on portrait or landscape. But I am just curious what I have done wrong and why media queries only not working in landscape. Thanks
×
×
  • Create New...