fromthericefields Posted May 9, 2012 Share Posted May 9, 2012 Hi, I'm starting out with HTML5/XHTML and CSS/CSS3 and am soon getting around to JavaScript. I have a basic structure of my website that I've been making to practice improving my skills. Building it, it works on Firefox (No support for Chrome or IE9 yet, haven't got around to that) until I zoom in and out, then it breaks. Most speficially the Navagation bar... What am I doing wrong? Here is the HTML <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <title>Home</title> <meta name="description" content="" /> <meta name="author" content="fromthericefields" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <link rel="stylesheet" href="main.css" type="text/css" /> </head><body> <div id="all"> <header> <h1>fromthericefields</h1> <h2>Death and life are in the power of the tounge, and those loving it eat it's fruit.</h2> </header> <nav> <ul id="mainav"> <li id="leftnav">/</li> <li><a href="index.html">Home</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="advntr.html">Advntr</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact</a></li> <li id="rightnav">\</li> </ul> </nav> <section id="maincontent"> <article> <h2>Home:</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> </article> </section> <aside id="sidebox1"> <h2>About:</h2> <article> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a turpis urna, ac rhoncus felis. Sed accumsan odio vel justo hendrerit quis egestas neque sagittis. Aliquam sit amet lectus justo, sit amet iaculis justo. Aenean molestie gravida arcu, faucibus feugiat orci viverra a. In hac habitasse platea dictumst. Donec faucibus pulvinar lacus. Suspendisse mattis ornare mauris id tristique. Maecenas scelerisque massa ac ante molestie scelerisque egestas dui rutrum. Nunc elementum nisl eu diam placerat varius. Morbi adipiscing porta malesuada. </p> </article> </aside> <footer> <p> Copyright: 2012 fromthericefields.inc All rights reserved. </p> <nav id="footernav"> <ul> <li><a href="terms.html">Terms and Conditions</a></li> <li><a href="privacy.html">Privacy Policy</a></li> </ul> </nav> </footer> </div></body></html> The CSS is: #all {width: 900px;height: 400px;margin-left: auto;margin-right: auto;}header {text-align: left;border: outset #946040;border-radius: 25px;height: 100px;background-color: #945129;width: 900px;margin: 0px;}header h1 {text-shadow: 5px 5px 5px #FFFFFF;font-family:"Comic Sans MS", "TSCu_Comic";margin-left: 30px;margin-top: 5px;}header h2 {color: #00CC88;margin-left: 100px;margin-top: -20px;font-size: 15px;}/*The main navgation bar located in the header area*/nav {margin-left: 2px;margin-top: -20px;margin-bottom: 30px;width: 900px;}#mainav {list-style-type: none;margin: 0px;padding: 0px;width: 900px;}#mainav li {background: -moz-linear-gradient(top, #945129 0%, #944020 45%, #944020 55%, #945129 100%);display: inline;padding-top: 2px;padding-bottom: 2px;margin-top: -5px;border-bottom: outset;float: left;}#mainav li:hover {background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);}#mainav li:hover > a {color: black;}#mainav a {text-decoration: none;color: #ffffff;float: left;padding-left: 63px;padding-right: 63px;}#leftnav {border-bottom-left-radius: 25px;border-left: outset #944020;padding-left: 10px;padding-right: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-left: -2px;}#rightnav {border-right: outset #944020;border-bottom-right-radius: 25px;padding-right: 10px;padding-left: 10px;background: -moz-linear-gradient(top, #945129 0%, #d6a98b 45%, #d6a98b 55%, #945129 100%);float: left;margin-right: -4px;}/*End*//*The main content of the page*/#maincontent {border: outset #946040;border-radius: 25px;background-color: #945129;width: 75%;float: left;min-height: 500px;}#sidebox1 {border: outset #946040;border-radius: 25px;background-color: #945129;width: 22.6%;float: left;margin-left: 1%;min-height: 500px;}/*End*//*The footer*/footer {border: outset #946040;border-radius: 25px;background-color: #945129;width: 900px;clear: both;float: left;margin-top: 5px;min-height: 20px;text-align: center;}footer p {display: inline;margin-left: 10px;}#footernav {margin-bottom: -10px;}#footernav ul {list-style-type: none;margin-left: -2.5em;}#footernav li {display: inline;margin: 8px;}#footernav a {text-decoration: none;}/*End*/ All help would be appriticated, susgestions, and tips, as I am learning and am egear to learn all I can from my mistakes. This is what my webpage looks like, properly on my browser (Located as attachment) Thanks for your help Forgive me if this should be in another form as it regards both my HTML and CSS. 1 Link to comment Share on other sites More sharing options...
niche Posted May 9, 2012 Share Posted May 9, 2012 Please post just the part of your code that's malfunctioning as a single executable script that can be analyzed. Link to comment Share on other sites More sharing options...
Ingolme Posted May 9, 2012 Share Posted May 9, 2012 The problem is that when you're resizing, the width of the text changes, and you've forced a specific padding on each navigation element so it may be too large and force extra list items to the next line. When the bottom right round corner of the header drops to the next line, the fact that is is floated left makes the main content area go next to it. The content area's width added to the width of that round corner and the width of the right column is too large for the line, so the last element is forced below the content. The first solution would be to give each link of the navigation menu a fixed width and text-align: center, and remove all the left and right padding. Make sure that the sum of all the fixed widths of the elements does not exceed the width of the parent container. Your bottom-right corner element, even when it fits, does not seem to be properly positioned so it's probably best to float it to the right instead of the left. Link to comment Share on other sites More sharing options...
fromthericefields Posted May 9, 2012 Author Share Posted May 9, 2012 Please post just the part of your code that's malfunctioning as a single executable script that can be analyzed.I posted the whole thing as I didn't know which part wasn't functioning correctly. But thanks to Ingolme I might have the problemsolved, but have to wait for the computer to be available to tweak my code a bit. You're right I'd never thought about the text resizing.I'd better make sure I remember for the future. Looks like the computer is free. Whoops..... Spoke too soon... eh!Thanks for your input (both of you) cheers! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now