I use to use html and css a few years ago and am getting back into it. I have achieved what I want look wise (except the footer) but I know my code is really wasteful. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>BNH Tech</title> <div id="header"> <img border="0" src="bnh.jpg" align="left" width="1000" height="100"> </div> <link rel="stylesheet" href="style.css"> </head> <body> <!--site nave menu--> <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="forum.html">Forums</a></li> <li><a href="stats.html">Stats</a></li> <li><a href="links.html">Links</a></li> </ul> </div> <div id="float"> <li></li> </div> <div id="float2"> <li><a href="contact.html">Contact Us</a></li> </div> <!--ads and sidebars--> <div id="leftbar"> <li></li> </div> <div id="rightbar"> <li></li> </div> <div id="ad"> <li>Click here so we make money!</li> </div> <!--main content--> <h1>Heading</h1> <p>text text text text text</p> <!--footer--> <div id='footer'> <li></li> </div> </body> </html> HTML: and the CSS: body { color: #000000; background-color: #ffffff } div#header { position:absolute; top:5px; left:5px; } h1 { position:absolute; top:225px; left:110px; } p { position:absolute; top:300px; left:110px; } div#leftbar{ position:absolute; top:130px; height:100%; left:5px; background-color:#336677; width:49px; bottom:100%; } div#rightbar{ position:absolute; top:130px; height:100%; right:5px; background-color:#336677; width:49px; bottom:100%; } ul { position:absolute; top: 107px; left: 5px; width:100%; padding:0; margin:0; list-style-type:none; } div#float{ position:absolute; top:107px; left:401px; right:104px; float:left; background-color:#336699; height:22px; } div#float2 { position:absolute; top:107px; right:5px; width:98px; color:white; height:22px; border-left:1px solid white; } div#ad { position:absolute; top:130px; left:55px; right:55px; height:100px; background-color:#336688; text-align:center; color:white; font-size:large; border:2px solid #000000; } div#footer { position:absolute; left:5px; right:5px; height:75px; bottom:100%; width:100%; background-color:#336699; color:white; } a { float:left; width:98px; text-decoration:none; color:white; text-align:center; background-color:#336699; height: 22px; border-right:1px solid white; } a:hover { background-color:#000000; font-weight:bold; } li { display:inline } Code (markup):
I don't see anything wrong with the code. you have all of your formatting in CSS so I think you are fine.
If you're starting a new site then use XHTML 1.0 Strict instead of HTML 4.0. See the WSchools tutorial on it - http://www.w3schools.com/Xhtml/. You'll be much happier with the end result having accomplished it, and better prepared for future browsers. I'd also look into CSS sprites as they'll speed up page loads. They basically combine multiple images into one image thus reducing the HTTP request burden on a page load.
Is there not a better way to code the float things in the CSS and HTML? Also what should I do about the 'a' because now anytime I use an href it will adhere to the css qualities of the 'a'. I did it that way because a tutorial said to do it like that.
Absolutely not! How so? Not necessarily true. XHTML does not work in Internet Explorer. In addition, 99% of most people do not serve XHTML as true XHTML so it gets interpreted as broken HTML by the browser. That is not a good thing. So since you are only being seen as HTML anyway, just use HTML.
We do all of our sites in XHTML 1.0 Strict and without exception they all render perfect in IE and all other browsers. You may be thinking of XHTML 1.1 Strict, which is not compatible with IE. When I say XHTML 1.0 Strict I mean error-free. As in all coding that makes a difference. The more error-free the code is the more you can count on your expected outcome.
I am not. No version of IE can handle XHTML served as XHTML. IE8 cannot either and neither will IE9 according to Microsoft's blog recently. Then what would you mean if you said HTML 4.01 Strict? That can be error free, too.
See these sites we've built recently that are all without exception error free XHTML 1.0 Strict, and render perfectly in all current browsers including IE6 and 7: http://www.21stsoft.com (click the W3C compliance icons at the bottom of all pages to verify) http://www.mercuryleads.com http://www.aadecorativeconcrete.com http://www.boulderremodels.com http://www.nationalrecoverysystems.com Do these sites render well in your IE6 or 7? We've been building all sites in XHTML 1.0 Strict since 2006. IE8 is in beta and Microsoft has already backed off of releasing it due to compatibility issues. I don't work in HTML 4.01 Strict because it is more than 10 years old. I recommend that everyone builds sites that will last as long as possible and render in browsers as much as possible. A simple concept really. Don't know why you are bringing up this argument since we have been building XHTML 1.0 Strict sites like this since 2006 that render just fine in all browsers and haven't had a problem. That is exactly why we use XHTML 1.0 Strict. Am I missing something?
agreed, I really don't know what drhowarddrfine meant when he said that. XHTML is safer than HTML 4.01. The code is stricter and less open to interpretation.
Because you are serving it as HTML, not XHTML. Putting a XHTML doctype at the top does not make your markup XHTML. It's the http header that determines that and you are serving HTML. No version of Internet Explorer can handle XHTML served as XHTML, that is properly served as application/xhtml+xml. XHTML is 9 years old. Then you are doing it the wrong way. On top of that, you aren't serving the xml declaration on the first line which is required for real XHTML. Would you like to view a true XHTML web page? Try this one and especially this one in IE and then any other browser. They serve true XHTML and not HTML. (However, the last I checked, I think the first one browser sniffs and may be serving HTML to IE while giving all the modern browsers XHTML.) Here is a little lesson from a well know web developer about XHTML vs HTML though there are more informative, less technical ones but I'm going to bed.
Not sure what you mean by "safer". It is not safer as in "more secure". XHTML served as XHTML is a XML application and any errors in markup will cause the page to fail. Another way to check if you are serving XHTML as XHTML is introduce some invalid syntax in your markup. You should get the "yellow screen of death" and not display anything. If your page still works at all, then you are serving HTML.
To be honest, do you guy know that actually "HTML strict 4.01" is recommended by many web industry developers . IE6 don't support xhtml . (I am not sure if IE7/IE8 support xhtml.)
No version of IE supports XHTML. And Microsoft has no plans to support it in IE9 either (yes, I said IE9). Another example of how IE holds back the web.
Everything Doc is saying is true. You can put the XHTML1.0 doctype on top of your sites and validate them but they are still not actually XHTML. They are HTML because that's how you're serving them. In this case, HOW you are sending this document out is, as far as the user agent is concerned, WHAT it is. Sounds stupid, I know, but that's how it is (for now). I did look at the first link posted earlier as XHTML1.0 Strict. <table cellpadding="0" cellspacing="0" class="fullwidth"><tr valign="bottom"><td><img src="http://www.21stsoft.com/wp-content/themes/21st/images/spacer.gif" width="17" height="10" alt="" /></td><td><a href="http://www.21stsoft.com"><img src="http://www.21stsoft.com/wp-content/themes/21st/images/logo.gif" width="187" height="157" alt="Web Development Firm Logo - 21st Century Technologies" /></a></td><td class="fullwidth"> Code (markup): You can do everything in tables, use things like cellpadding and valign and other nasty things, and it can validate. You can also put lipstick on a pig. Valid code isn't the same as good code and the above is certainly not semantic (is that tabular data? no, it's document header with decoration posing as content). A validator is a spell checker. You can have eyes before ease except after sea and the validator won't say boo. Which is why the other things are also just as important: semantics, well-formedness, accessibility/usability, and geez, logic. The code should make sense. The page should make sense even when there's no CSS applied. There's more to this web-page-building stuff than throwing a bunch of tags together and calling it HTML because it validates (and it is not my intention to pick on this site. My intention was to show an example of something and it was the first and only site of the list I looked at. It is a good sign that somebody cared enough to bother to make sure the page even validated and passed Cynthia says and all that. Kudos). You can write HTML4.01Strict exactly as strict as XHTML1.0 or even XHTML1.1-- it's the author who actually sets the strictness. However I will say there is ONE advantage to using the XHTML1 doctype when you're new-- when you send your page to the validator, if you forgot to close a tag that you (as a STRICT author) intended to close but aren't necessarily required to close (such as a /p or a /li tag), with the HTML4.01 Strict doctype the validator will let it go because, according to the rules you have chosen to be validated against, it's LEGAL. What I do: write strict, valid, semantic, well-formed HTML4.01 and then ask the validator to check it by the rules of XHTML1.0 Strict. Yes, it will call all my unclosed empty tags as errors, but I know to ignore them and look for "real" errors-- errors that you as the strict author would certainly consider real errors. The way you are closing your tags in "XHTML" are actually not even correct-- to prevent browsers from puking you are likely adding a space before the trailing /> (you actually are not supposed to). The validator has been trained to tolerate this because (some) browsers need it. Anyway, to the OP: yes, your code has some issues, but sending it through the validator would help point some of it out to you. There may be other errors but this one jumped out at me: <div id="float"> <li></li> </div> <div id="float2"> <li><a href="contact.html">Contact Us</a></li> </div> Code (markup): By anyone's rules, a li can only have a ul or ol as a direct parent. So, those <div>s have to be <ul>s or ol's (and ol doesnt' make sense here). Though as this isn't a finished page you may have them in there as content placeholders. Nevermind, you should still try to use the correct tags. You have content in your <head>. You may not. Your <head> is only required at a bare minimum to have a <title> however unless you are able to add in the correct HTTP headers on the server holding this page (and kudos to you if you can and did) usually you want to have meta tags telling user agents which charset you are using, how you are sending this document, and for teh googles it's nice to have a meta description tag (unless this is an internal page and you don't want search engines doing anything with your page anyway). Often the contents of the description tag are the little description you see under sites on Google that have been returned (not always but many times). Lastly, the CSS: while you may have gotten everything looking ok on your monitor (except the footer as you said), you might want to check out your page on another screen-- one much larger or much smaller than yours. Using absolute positioning for everything seems like the best way to set up your page, at first. Later as you see how browser windows change their sizes and how everyone has a different screen resolution, you'll see it's actually very brittle design. You need to bend like the bamboo, not break like the stick. This means using floats, margins, negative margins, and a scarce use of positioning (of either relative or absolute). It's harder to get working at first if you're new, but ultimately you'll have a more flexible page that can hold your design together no matter what the user does or has as a browser. Someone recommended W3schools. They aren't affiliated with W3C or anything related. I learned a lot of bogus things there before some people explained the old errors there that hadn't gotten corrected. Unless those guys have come back and done some revamping lately? I haven't checked recently.
Well those div's are just color bars that sit on the right and left of my screen for aesthetic purposes. I'm not sure how to do it other wise. Do you have any tips or links of how to use things other then absolute positioning?
So, I don't think it matters whether your website serves HTML or XHTML. My point is that your website is better off and safer if it is XHTML 1.0 Strict. Safer due to less variance in rendering across browsers and their versions. Does anyone disagree with this? If so, let's talk about it because my goal is to always write the best code for any application. I'd also like to discuss the semantic coding if anyone has great input on it. Again, what is the best code to create a website with and why...
Why do you have an LI inside every DIV, they should only really be used in lists, such as menu items as you have done correctly. Also you have your header actually in the head of the document, it should be in the <body> section, Thirdly no real need to position everything absolute on the page with your layout/ Lastly does any content actually go in these 2 bars, or are they just full of colour?
As to the LI. I wasn't really sure how to get the side bars to display and that seemed to work fine with FF. I moved the header now. No content goes in the sidebars, just color.
Well if i was doing the same layout I would do something like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css" media="screen"> body { margin: 100px 0 0 0; /*Allows room for header image*/ background: url(bnh.jpg) #99C top center; /*Change url to head image*/ } ul { height:22px; background:#336699; list-style:none; margin:0; padding:0; border-bottom:1px solid #fff; } li { margin:0; padding:0; display:inline; } li a { display:block; float:left; color:white; background:#336699; text-decoration:none; width:98px; border-right:1px solid #fff; text-align:center; height:22px; line-height:22px; /*Center Menu Text Horizontally*/ font-size: 16px; } li a:hover { background:#000; font-weight:bold; } li .contact { float: right; border-right:none; border-left:1px solid #fff; } #wrap { width:1000px; background:#336677; margin:0 auto; /*Center the Layout*/ } #content { margin: 0 48px 0 48px; /*Makes room for the colour (#336677) to show on left and right*/ background:#fff; position:relative; /*Allows for inner elements to be positioned within it*/ padding-top: 101px; /*Makes room for the ad */ } #content h1, #content p { margin:0; padding: 10px; } #ad { height:100px; background-color:#336688; text-align:center; color:white; font-size:large; border:2px solid #000000; text-align:center; position:absolute; /*Put the Ad at the top of Content DIV*/ top:0; left:1px; width:898px; } #footer { width:100%; height:50px; line-height:50px; text-align:center; color:#FFF; } </style> </head> <body> <div id="wrap"> <ul> <li><a href="index.html">Home</a></li> <li><a href="forum.html">Forums</a></li> <li><a href="stats.html">Stats</a></li> <li><a href="links.html">Links</a></li> <li><a class="contact" href="links.html">Contact Us</a></li> </ul> <div id="content"> <h1>Heading</h1> <p>text text text text text</p> <div id="ad">Click Here So We Make Money!</div> </div> <div id="footer">© All Rights Reserved 2009</div> </div> </body> </html> Code (markup): As your header was an image, and not a link or any text I would have put it as the background image for the body. I've also included the contact us button in the original menu list, given it a different class and floated it to the right to get the same desired effect. I got rid of the left and right bars and just put a background on a wrap which wraps the whole page and added a margin to the inner content so that the backgound has the same effect as the 2 bars. I also would want my content to appear before my advertisement in the markup just for small SEO reasons. To achieve this i did position the ad and added some padding to the content DIV to make room for it. You could even get away with eliminating the wrapper DIV but that depends on what went inside as content. Also you might not even need a footer DIV but I just threw it in there any way. If anybody else comes along this please give me some tips on how I can improve because I am also learning Oh and I did use XHTML 1.0 Transitional, simply cause it's already there on my text editor. What exactly is the difference between XHTML 1.0 Transitional XHTML 1.0 Strict, HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.1, HTML 5. Should I be able to see any differences if i change from one to another?