Questions about coding a CSS layout for a website
Ok, I'm a bit new to web design standards.: P
Is this the correct way to create a website using CSS?
Each box has its own DIV tag, with its own settings. I'm guessing the background image: the box inside the hierarchy takes precedence over the outer box, right?
The "box" that has the background image of the site.
Another smaller "box" that acts as a container for the site's content.
And other smaller "boxes" that act as containers for certain things inside the contents of the "Box".
Here's a little picture of what I mean:
source to share
Ok, some simple points to clarify for you ...
The "entire site block" is likely to be a page body element. You could add a full wrapper div for it, but in the first case it doesn't really benefit much.
Using a "content box" is fine, but I'd be wary of using it unless you want to specifically restrict your site to a fixed width layout.
Other boxes can be added directly to your body element and placed / created individually. You will probably end up with something like this ...
<html> <*-- include your doctype and stuff, obviously -->
<head>
<title>My site</title>
<link rel="stylesheet" type="text/css" href="sytle.css" />
</head>
<body>
<div id="header">Your site header content here</div>
<div id="mainNav">navigationhere</div>
<div id="content">main content here</div>
<div id="footer">footer stuff here</div>
</body>
</html>
There are many resources for positioning, etc. around. I found the best way to learn (although I'm very rusty these days) was to look at examples, split what they were doing, and walk on my own. Try looking at http://meyerweb.com/eric/css/ and http://www.csszengarden.com/ for a starting point of the possible.
HTH, but I'm sure someone with modern html skills will get through in a minute.
source to share
I totally agree with Samuel that you shouldn't have functional divs. This is what got us all the mess in the first place (if you don't know what a mess is, do a search for the planned layout).
BUT
something to be aware of: if you set the outer element (like body or even html, but careful) to relative, it will need an explicit height, or it might shrink or no longer contain (visually) children, but if you set the body is at 100% height, it will be 100% of the window , not the document, which means that when the user scrolls down, the body doesn't scroll with them. This is very strange and annoying.
I honestly recommend just not worrying about the layout. Make your copy nice and clean and people will hang out (see: this site). Obviously, there are some aspects that make the site more useful or attractive, but I always use a rule of thumb: if I turn everything off, will it work and it makes sense? I'd rather make the page look boring but readable without CSS and then start messing around with layout and colors and then a site that turns into a bunch of divs and p one browser (cough, IE) doesn't play.
source to share
There is a small flaw in your approach - you shouldn't put a div in your HTML unless it makes any difference. An element already exists for this purpose body
(in good browsers html
, body
elements can be styled as well). However, this shortcoming is likely insurmountable, as currently widely used browsers support some important features of CSS 2.1.
Plus, your design feels right.
source to share