March 1, 201412 yr Hi all, hoping someone can help me out and point me in the right direction please, it seems I have hit a wall. Apologies in advance for the fairly long post and if i haven't made sense or you need more info please let me know. My issues . . . 1 & 2. If you look at the upload (img1) you will see a gap between the header and main elements & main and section elements? 3. My section element is being shown underneath the footer? Could this be anything to do with floats? If so then I was under the impression that when you float an element you need to clear that float which is done by applying a 'clear fix' rule to it's parent element? (Please correct me if I'm wrong). Or could this be anything to do with the selector and value overflow: hidden; in the body element? Or could this be something to do with the background image in the main element . . . or . . . something else? I've uploaded a very rough image to show you what I'm actually trying to achieve. (img 2) Thanks in advance for any comments/help. HTML code . . . <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700,300,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/reset.css" type="text/css"> <link rel="stylesheet" href="css/main.css" type="text/css"> </head> <body> <header> <div id="bar"> <div id="bar-wrap" class="clear"><p id="quote-info">Get a quote now<a href="tel:012345678910">01234 567 8910</a></p></div> </div> <div id="header-wrap" class="clear"> <a href="#" id="brand">Quisque <span id="limos">et</span></a> <nav id="header-nav"> <ul> <li><a href="#">Our Vehicles</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </header> <main> <div id="main-wrap"> <p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing</p> <p id="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et egestas sem.</p> <a href="#" class="btn">Find out more</a> </div> </main> <section> <div id="section-wrap"> <h1>Lorem ipsum dolor sit amet</h1> <div id="service-1" class="service"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Quisque et egestas sem. Vivamus et quam tincidunt, vestibulum sem quis, tristique.</p> </div> </div> </section> <footer> <div id="footer-wrap"> <nav> <ul id="footer-nav"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Our Vehicles</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Terms & Conditions</a></li> <li><a href="#">Feedback</a></li> <li><a href="#">Sitemap</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> </ul> </nav> <p id="copy">sit amet © | 2006 – 2014</p> </div> </footer> </body> </html> CSS code . . . html, body { font-family: 'Open Sans', sans-serif; height: 100%; overflow: auto; position: relative; } p { font-family: 'Open Sans', sans-serif; font-weight: 300; } #bar-wrap, #header-wrap, #main-wrap, #section-wrap, #footer-wrap { max-width: 1200px; margin: 0 auto; max-height: 100%; } #bar { width: 100%; background-color: #333; } #bar-wrap { height: 100%; color: #fbfbfb; } a[href^="tel"] { color: #bca95b; margin-left: 8px; } header { width: 100%; height: 140px; background-color: #fbfbfb; } #quote-info { float: right; margin: 10px 0; } #brand { font-size: 38px; font-weight: 700; float: left; margin-top: 20px; color: #bca95b; } #limos { color: #333; font-weight: 300; letter-spacing: -1px; } #header-nav { margin-top: 26px; float: right; } #header-nav ul { margin-top: 9px; } #header-nav li { display:inline; font-size: 18px; padding: 0 30px 0 0; letter-spacing: -0.50px; } #header-nav li:last-child { padding: 0; } #header-nav a { color: #333; } main { width: 100%; background: #666 url(../images/bg.jpg) no-repeat center; background-size: cover; } #intro { font-size: 60px; font-weight:700; letter-spacing: -0.5px; color: #fbfbfb; margin: 100px 0 80px; text-align: center; } #desc { font-size: 18px; font-weight: 400; color: #fbfbfb; text-align: center; } section { width: 100%; background-color: #fbfbfb; } #cta { margin: 0 auto; } .btn { width: 125px; height: 40px; background: #bca95b; background-image: -webkit-linear-gradient(top, #bca95b, #91834c); background-image: -moz-linear-gradient(top, #bca95b, #91834c); background-image: -ms-linear-gradient(top, #bca95b, #91834c); background-image: -o-linear-gradient(top, #bca95b, #91834c); background-image: linear-gradient(to bottom, #bca95b, #91834c); -webkit-border-radius: 6; -moz-border-radius: 6; border-radius: 6px; font-family: 'Open Sans', sans-serif; color: #fbfbfb; font-size: 15px; font-weight: 300; text-align: center; text-decoration: none; display: block; margin: 60px auto; } footer { background-color: #fbfbfb; position: absolute; bottom: 0; width: 100%; height: 80px; } #footer-nav { font-weight: 300; font-size: 14px; margin-top: 10px; text-align: center; } #footer-nav li { display: inline; margin-right: 20px; } #footer-nav a { color: #333; } #copy { font-size: 12px; text-align: center; margin-top: 40px; } .clear:before, .clear:after { content: " "; display: table; } .clear:after { clear: both; } .clear { zoom: 1; }
March 1, 201412 yr #intro { font-size: 60px; font-weight:700; letter-spacing: -0.5px; color: #fbfbfb; padding: 100px 0 80px; //Change margin to padding text-align: center; } Hope that helps Also I dont think tag <main> exist in HTML5, maybe change it to <section role="main">?
March 2, 201412 yr main element Poorly supported but already in W3C HTML specification ! http://html5doctor.com/the-main-element/
March 2, 201412 yr main element Poorly supported but already in W3C HTML specification ! http://html5doctor.com/the-main-element/ I stand corrected
March 2, 201412 yr Author Thanks for the replies. Maybe I should hold off using <main> until it is supported a little better?
Create an account or sign in to comment