PDA

View Full Version : Help with inline DIVs (I think anyhow)



Crim
12-15-2005, 04:46 AM
OK first off this is my first time trying to figure out CSS, I'm sure this will be blatently obvious from reading my attached code.

Essentially I'm trying to re-create the following layout using html/css. What I'm trying to recreate (http://crim.darksci.net/AS/site-layout.jpg)

I'm having issues with the main content box, I've gotten it to look pretty good in IE, but firefox comes out all weird.

The page is located here for you to view (http://crim.darksci.net/AS/index.php)

The headings "News" and "Links" appear correctly in IE, however they show up placed all wrong in FireFox. Can anyone help show me where I've gone wrong?

Attached are links to the code with .txt extension:
http://crim.darksci.net/AS/index.php.txt
http://crim.darksci.net/AS/style.css.txt


Thanks!

Crim
12-19-2005, 09:07 PM
*bump*

Any clue, this is still driving me crazy trying to figure out. Is it not proper to have multiple div's enclosed in one another?

billyboy
12-20-2005, 10:33 AM
Nothing wrong with nesting div inside one another.
First thing you want to do is add a doctype declaration to the top of your html pages, get rid of the extra meta tag for content type and insert the missing opening body tag.

You've got some unneeded divs, and floats going on all over the place when all thats really needed is positioning of two elements - the left hand column and the content on the right side of the main content. There's five main elements on the original page: main top, main left, main right, main bottom, and the left column. Assign each of those a div. Then you'll need one div wrapped around everything but the left column, and one div wrapped around main left and main right for positioning.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Something</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
**meta name tags here**
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<div id="maintop">Content</div>
<div id="holder">
<div id="mainleft">Content</div>
<div id="mainright">Content</div>
</div> <--!close of holder div -->
<div id="mainbottom">Content</div>
</div> <--!close of main div -->
<div id="leftcolumn">Content</div>
</body
</html>Then in your CSS: Set the margins in body to center your content and pull it down from the top of the page. Set the left margin of main to slightly more than the width of the left column. Add position relative to holder to contain any element positioned inside it. Set the widths of mainleft and mainright. Add absolute positioning to mainright to place it within the holder div and to left column to bring it up to the top of the page. From there its a matter of adding some margins, padding and styles to the different elements.
body {
margin: 15px 7%;
}
#main {
margin-left: 180px;
}
#main-top {
** position and width can be left at default**
}
#holder {
position: relative;
}
#mainleft {
width: 70%;
}
#mainright {
position: absolute; top: 0; right: 0;
width: 30%;
}
#main-bottom {
** position and width can be left at default**
}
#leftcolumn {
position: absolute; top: 15px;
width: 175px;
}Floats can be buggy, absolute positioning gives you more precision and is less prone to quirks in different browsers. Using % for horizontal values allows for a flexible design. Placing the left column with your navigation at the bottom of the markup ensures that user agents that don't support CSS (screenreaders for visually impaired users for example) and search engines will see the most important content first and not have to wade through a list of links at the top of every page.

A couple other things that don't have to do with positioning: Use id rather than class for elements that only occur once on the page. Use an unordered list for your navigation (it's a list of links), it's sematically correct and gives you access to the ul, li, and a tags for adding style. Use borders instead of adding an extra division for a line. You don't need all those font styles, declare your overall font style once in the body tag and use plain <p></p> tags for each paragraph. Use h1, h2, h3 etc. for the headings and define styles for those in your CSS.

Crim
12-20-2005, 06:53 PM
Awesome, I *really* appreciate you taking some time out to lend me a hand. Thanks!

mwinter
12-24-2005, 11:22 PM
[...] get rid of the extra meta tag for content type [...]That still leaves the second, which should also be removed. Even though the server doesn't automatically send a charset parameter, this can be corrected through one of three methods: get the server administrator to setup the server properly, add the charset parameter yourself using a .htaccess file, or use PHP to modify the response headers.


and insert the missing opening body tag.Not strictly necessary, but not a bad idea either.


<div id="main">
<div id="maintop">Content</div>
<div id="holder">
<div id="mainleft">Content</div>
<div id="mainright">Content</div>
</div> <--!close of holder div -->
<div id="mainbottom">Content</div>
</div> <--!close of main div -->
<div id="leftcolumn">Content</div>All of those id attribute value are bad examples (and the comment declarations are wrong; typo, I'm sure). HTML is semantic, and both id and class attribute values should be.


body {
margin: 15px 7%;
}It should be noted that not all browsers place a margin on the body element. Opera, for instance, uses padding. Set both.


#mainleft {
width: 70%;
}
#mainright {
position: absolute; top: 0; right: 0;
width: 30%;
}Rounding typically means that percentage values can be computed too large. It's often a good idea to leave a little margin for error.


Floats can be buggy,When used in certain ways, yes. However, not always.


absolute positioning gives you more precisionIrrelevant. Pixel-perfect positioning is a total waste of time.


Using % for horizontal values allows for a flexible design.And so do em units, which are proportional to font size. When sizing an element containing text, the latter may be more appropriate.


Placing the left column with your navigation at the bottom of the markup ensures that user agents that don't support CSS (screenreaders for visually impaired users for example) and search engines will see the most important content first and not have to wade through a list of links at the top of every page.But that also means that they'd have to wade through all of your content to actually get anywhere within the site.

I don't believe there is any real consensus on this issue. However, one way to help in both cases is to include a link near the start of the document that will either go to the content (skipping navigation), or visa versa. This link can be absolutely positioned off the left-hand edge of the viewport.


Use id rather than class for elements that only occur once on the page.Though it should be for elements that will only ever occur once. If elements of the same 'type' may occur, then use a class attribute.


You don't need all those font styles [...]And the font element should never be used. Ever. Also avoid deprecated attributes (like center), and use margins, not forced line breaks, to add spacing.

Mike