Hi everyone, I'm new here so go easy on me. I just had some questions regarding how to properly lay-out my website. My questions: 1. How do I properly assign a location for my nav bar? I want it to stay on the left and towards the top, but when I add a border to it, it moves the whole nav box down below my article (main) section. It also makes the border of my header thicker where the nav box is (which I found really odd). 2. I feel like I am doing something wrong with the way I'm laying out the page. I can't get my footer to center with my article, and I feel like everything is just a bit 'off'. Is there a go-to guide for how to do a proper layout - (header across top, nav on left, article center-right, footer across bottom) ? 3. Any tips for my code or comments would help, thanks! <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>XXXXXXXXXXXXXXXXXXXXXXX</title> <meta name="description" content=""> <meta name="keywords" content=""> <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> .c { text-align: center; } .b { border:2px solid black; } .a { text-align: center; height: 0 auto; width: 0 auto; } .d { text-align: center; float: right; } .I { float: center; border:5px solid black; } .uga { border: 2px solid black; width:500px; height:354px; margin:5px; } html { color: black; background-color: white; text-align: center; font-family: times; } body { color: black; width: 1250px; margin: 0 auto 0 auto; text-align: left; padding: 5px; } header, footer { width: 1250px; display: table; } nav { width: 300px; float: left; display: table; } article { width: 950px; display: table; } footer { text-align: center; } .outer { color: black; background-color: red; border: 5px solid black; padding: 5px; text-align: center; } .inner { color: black; background-color: red; border: 3px solid black; padding: 5px; text-align: center; } body { background-color: white; } header { text-align: center; background-color: red; } nav { background-color: white; } article { background-color: white; } footer { border: 2px solid black; background-color: red; } </style> </head> <body class="b"> <header> <div class="outer"> <h1 class="inner"> <strong> Welcome to XXXXXXXXXXXXXXXXXXXX </strong> </h1> <h2 class="c"> <strong> We are your one-stop technical support resource for individuals and small-businesses in the XXXXXXXX Area! </strong> </h2> </div> </header> <article class="d"> <h3 style=" float: center;"> At XXX, we offer a higher level of service coupled with a personal level of interaction. We will take time in helping you meet your technology goals and needs, whether they be fixing your desktop or laptop computer, removing viruses, setting up a secure network, or establishing a small-business server. <image class="uga" src="images\uga.jpg" width="500" height="354"> </article> </h3> <p> <nav style="background-color: red"> <table> <ul> <tr> <td><li><a href="BTSMain.html"><b>Home</b> </a></li></td> </tr> <tr> <td> <li><a href="BTSServices.html"><b>Services We Offer</b></a></li> </td> </tr> <tr> <td> <li><a href="BTSAboutUs.html"><b>About Our Company</b></a></li> </td> </tr> <tr> <td> <li><a href="BTSTestPage.html"><b>Testing Page</b></a></li> </td> </tr> <tr><td><li><a href="BTSTestPage2.html"><b>Testing Page 2</b></a></li></td></tr> </ul> </table> </nav> </p> <article class="a"> <h1>Your Technology Support Resource!</h1> <p> What can we help you with? </p> </article> <footer> <h1> <a href="BTSAboutUs.html"> About Us</h1> </footer> </body> </html> HTML:
Here's the lowdown. Include a full doctype for your webpage. Stylesheet should really be in another file. To get the nav bar above the article, move the code for the nav bar above the code for the article. If you need any more help, PM me and I'll send you my skype name. James.
Something like <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Code (markup):
Lose the HTML5 crap. It's not a standard yet and different tags will cause different problems in different browsers. Style belongs in your style section, not in your content. And tables are used for tabular data, not positioning.
From what I heard HTML5 is the best because of its CSS / JS functionality... it's also compatible across the major browsers now...
HTML5 has nothing to do with CSS3 or Javascript. Each one stands completely alone. It's also nowhere near cross-browser compatible. It's also a giant leap backwards. If all you know about it is what you've heard, you definitely shouldn't be using it. (And if you actually know what it does and how it does it - and you care about the quality of your work - you wouldn't use it.)
Well what I've heard, and from what I've seen, it drops a lot of useless syntax and other fluff, and allows a more personalized coding experience. More streamlined too. I saw a great app written up by Blackberry people that was an HTML5 Facebook app, x2 as fast as the native one.
why the hell are you here asking for advice when someone (rukbat) who actually knows what he's talking about gives you good advice and you choose to ignore it?? I forsee your career in "web design" will be very short lived
Because he didn't explain his dislike of HTML5. I am here for advice / information... if someone says "This sucks" I'm going to ask for details as to what makes it suck... not just go "ok!". Thanks for the kind words, though.
Yes I am, because I taught myself from scraps of tutorials... I haven't seen a better way to do it, so I improvised. Do you have constructive advice?
Did you actually read what he posted??, i think he explained it quite well and you are just to ignorant to take it in.
Are you normally this nice to people? Just saying it is not standard yet isn't saying much, many things are in beta. From what I've read online -- it is quickly taking hold as the new standard. With full browser support (and legacy with the right script), not having full compatibility (yet) doesn't seem like a good reason to just not use the newest markup. I don't see what's so wrong in asking why it is a step-backwards, and comparing / contrasting the benefits. P.S. it's hilarious you're insinuating I'm ignorant when you don't even know the proper usage of "too" vs. "to".