Well, I have finally decided that I should learn CSS. I have been using various tutorial websites, but am having trouble figuring out how to make a simple table less website. What I want to do is build a website that has 3 columns, a header and a footer which span the entire width of the three columns (something like www.entrepreneurprofit.co.nz, which uses tables to do what I want to do) can anyone show me an example or two of the style sheet and on page coding? Please keep it as minimalist as possible as I still get a bit confused with a lot of code on page.
<div style="width: 600px; margin: 0 auto;"> <div> Header </div> <div style="width: 200px; float: left;"> col 1 </div> <div style="width: 200px; float: left;"> col 2 </div> <div style="width: 200px; float: left;"> col 3 </div> </div> Code (markup): Haven't tested it, but it looks right.
Why is my container <div> not centering? I am doing everything the tutorial is saying but my writing still ends up on the left hand side of the page. <head> <style type=“text/cssâ€> body{text-align:center} #container{margin: 35px auto;width: 500px; text-align: left} </style> </head> <body> <div id="container"> Please Work </div> </body> Can any body help??
this is the tutorial I am using by the way http://www.tutorialtastic.co.uk/tutorial/create_a_tableless_layout
Your text-align: left; in #container over-rides text-align: center; in body. For a background - style="background-image: url(images/image.jpg);"
text-align: center is for centering in really, really old Internut Exploders. The text-align: center on the body should only affect the direct child (the container) because the container has text-align: left (which affects ITS children but not itself). Since the margin: 35px auto should work (in modern browsers like Opera or FF) I'm wondering if it's this: <style type=“text/cssâ€> see those funny quotes? They're not normal, they're special ones. Just saw them messing with someone's print.css on another forum so MAYBE that's the problem. Also, do you have a Doctype? Without any spaces above it? IE will act like IE5.5 and below (and use text-align: center) when there's a space before the doctype (or, anything before the doctype). I learned basic HTML and building a page with it with this book: Build Your Own Web Site the Right Way Using HTML and CSS by Ian Lloyd. You learn by doing-- he takes you step by step building this website: http://www.bubbleunder.com a diver's site. Afterwords, I got positioning more under my belt with help from this book: HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. I never built stuff in tables but it doesn't matter, they show you the effects of floats and absolute positioning and things. They only cover the basics so I learned the rest on forums and building more sites. I use the back of the book most, as there's a CSS index in the back. I can't find it but Dan Schulz has some two and three column templates which are clean and minimal markup. But, he's been working on his site and I dunno if they're still online.
Stu's pretty smart in figuring out CSS tricks, though not all of them are Best Practice. Some of them are best left as experiments : ) But his CSS animations are damn awesome. Sometimes I think I should recommend LayoutGala.com (or whatever it is) and just practice copying the various setups and play with them locally until they're understood by the student. Mostly basic two and three column setups.