|
View Full Version : Can anyone help with this CSS/Div Design?
Conica 01-15-2008, 11:07 PM Hey, Ive been playing about with CSS abit, and ive completly lost track of why my site is doing this.
Ive created a typical Header & 3 coloumn page with <div> tags,
Ive used Position: absolute; and positioned them accordingly, but all seperate divs all position at the same point on the page, can anyone see if they can spot what ive done wrong?
EDIT: All Divs position themselves at 10, 10
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#header {
position:absolute;
top:10;
left:10;
width:950px;
height:242px;
border:0px;
background-color:#3300FF
}
#leftnav {
position:absolute;
top:262;
left:10;
width:170px;
height:400px;
background-color:#66FF00;
}
#content {
position:absolute;
top:262;
left:190;
width:590px;
height:400px;
background-color:#66FFFF;
}
#rightnav {
position:absolute;
top:262;
left:790;
width:170px;
height:400px;
background-color:#FFFF00;
}
#container {
width:950px;margin:0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="leftnav"></div>
<div id="content"></div>
<div id="rightnav"></div>
</div>
</body>
</html>
stripeyteapot 01-16-2008, 03:12 AM Absolute positioning is where you're going wrong.
Try this; http://www.alistapart.com/articles/multicolumnlayouts
HTH :)
krystofo 01-16-2008, 06:55 AM I am not very advanced at webdesign. Maybe partly for that reason, I decided to use 'tables' to stabilize the right column in a 3-column layout. Part of the reason was Explorer then (and maybe still now?) did not read 'minimum width'. This can be addressed with 'Microsoft Expressions'. However this was a bit above my head and anyway I liked the greater stability of the table, and was told it was alright if not overused.
Harzem 01-16-2008, 07:23 AM Div positioning in three or more columns can be achieved using "float:left;" and "float:right;" properties, as well as "clear:left;", "clear:right;" and "clear:both;" properties.
Learning how to use them is a little tricky. You should define the divs in the reverse order, right, center and left :)
stripeyteapot 01-16-2008, 08:28 AM Tables for layout is bad, mmm'kay?
Seriously though, I would avoid using tables unless you specifically need to markup tabular data. ALA is an excellent resource (Link above), and the specific article I linked will help you with a multi-column layout. I personally would approach it a little differently, but that will get you on your way :)
liam_tmt7 01-16-2008, 11:14 AM Div positioning in three or more columns can be achieved using "float:left;" and "float:right;" properties, as well as "clear:left;", "clear:right;" and "clear:both;" properties.
Learning how to use them is a little tricky. You should define the divs in the reverse order, right, center and left :)
Im still trying to develop sites using css rather than tables as well, so just a little curious as to why you define the divs in reverse order?
thanks
Liam
Harzem 01-16-2008, 11:23 AM Im still trying to develop sites using css rather than tables as well, so just a little curious as to why you define the divs in reverse order?
thanks
Liam
The reverse order is necessary only when aligning divs side by side.
<div id="div1"></div>
<div id="div2" style="width:33%; float:right;"></div>
<div id="div3" style="width:33%;"></div>
<div id="div4" style="width:33%; float:left;"></div>
<div id="div5" style="clear:both;"></div>
will align them like that:
----------------------
| div1 |
----------------------
| div4 | div3 | div2 |
----------------------
| div5 |
----------------------
I have no idea why it is necessary to be that way, but it works.
stripeyteapot 01-16-2008, 03:31 PM Hm, it's not necessary, more optional, in my experience anyway. I prefer listing columns in the order that makes the most sense when viewed in linear(no style), usually left,center,right.
There's no single way about doing this, I can think of several off the top of my head, 2 of which are noted in this thread, I just didn't want to complicate things for the OP :)
awatson 01-16-2008, 06:05 PM in case you haven't already - install Firebug, it's saved me tons of time working on css stuff.
krystofo 01-16-2008, 11:06 PM ...You should define the divs in the reverse order, right, center and left :)
Thank you for the thoughtful tip Harzem.
I know that impressive things can be done with fancy top-of-page navigation margins using <LI> ('list' codes) in reverse order. So, it makes sense that <DIVS> in reverse order can improve possibilities. It is strange that I never heard that idea before!
When I learned CSS in 2006, I did read many articles including the ALA pages mentioned here. I used some tips from there. But, if you simply reduce the width of your IE browser while viewing most 3-column all-CSS pages, you usually find the page crumbles at some point. I don't care how 'accepted' or 'technically correct' this is. The proof of the pudding is in the eating, or in this case the viewing. As a craftsman, this is embarrassing. Also, although 'standard' screens are nowadays plenty large, there is an increasing use of laptops and ultra-portables. I take pride in my pages being 'accessible' no matter what is used. Also, the main bugaboo about 'tables' is they can muck things up for search engines and blind people. My semi-table design uses 'jump links' and frequent <h4> header summaries that more than make up for that.
I do recognize that 'all CSS' is the ideal. I just don't have endless time to fiddle. For me, webdesign is a means to an end. I must move on. But when the time comes to upgrade my sites, I hope to explore this key tip about 'reverse DIV's.' Thank you!
WebDesignGold 01-17-2008, 08:13 PM I'm a not an SEO expert and I don't know if this is still applicable but what I know is that reversing the order of the layout's columns is done for SEO purposes. Say you have a two columns layout like this:
Header
Left col, Right col
Footer
To give the right column's content more weight you want it presented to search engins earlier then the left column - which is less important for your ranking and keyword relevancy - and since SEs read the content in the order you put in the markup, you put the right column before the left one and in the style sheet you give it a float:right.
krystofo 01-18-2008, 02:03 AM WEBDESIGNGOLD, I agree with your interest in SEO. This is in fact another reason that I decided to retain my semi-table design. I did not want to complicate the subject but since you mention it...
Usually, the left margin contains links to my most important pages. I want these links to get the most SEO value.
The right margin contains advertising or secondary page links. I want these at the end of the code.
The 'main text' is very important. This spells 'respectable content' to search robots. There should not be too many links before this text. Many SEO enthusiasts advise coding the CSS so that the main text comes before all the links! However in my opinion, you are short-changing your SEO credit transferrance if you do not place at least a few of your most important links near the top of the code.
My personal preference is to code in this order: <h1> header... then the left links margin... then the main text... then the right links margin. Just the way that people read the page, and just the way that tables are coded.
In most CSS tutorials, the code order seems to be: left links... right links... <h1>... main text. Not good, in my little opinion.
However, in any method used, the <h1> can easily be put first. This <h1> is by far the most important on-page SEO factor. (Not including the <title> metatag.) The rest is probably nitpicking. I am not yet sure that 'reverse DIVs' can give me a stable design to my standards... but if it can, I am sure that I can work with it... even being the SEO nitpicker that I am...
|