Wed, 2005-03-23 14:04
Hi, I'm new here and a new CSS developer 
I have a question ofcourse:
I'm on a new project and want to abandon everything that has to do with Tables and Frames doing it in CSS style instead.
What I was thinking was to do it in 3 columns and 3 rows, the way I had choosed to do it if I would do it the "old way".
This is what I have come up with yet so far:
http://hem.bredband.net/b117059/new/hem.htm
And this is the CSS file:
http://hem.bredband.net/b117059/new/style.css
The thing I wanted to do was to expand the "metallic line" both in the header and the "metallic line" in the footer expanding to fit users with higher resolutions. The way I have done it now, it's just one column. Maybe I should need both one topleft/topright (right/left to the header), middleleft/middleright (right/left to the content), bottomleft/bottomright (right/left to the footer) all theese three new divs expandable according to the used resolution?
Wed, 2005-03-23 14:10
#1
3 columns and 3 rows?
<div id="header_container"> <div id="header_left"></div> <div id="header_middle"></div> <div id="header_right"></div> </div> <div id="bar_top" class="bar"></div> <div id="centre_container"> ... </div> <div id="bar_bottom" class="bar"></div> <div id="footer_container"> ...
.bar {clear:both; background-image:url(http://path/to/yourimage.jpg)}
Wed, 2005-03-23 14:18
#2
3 columns and 3 rows?
Thanks, but I didn't quite follow you there
Can you explain further please.
Wed, 2005-03-23 14:53
#3
3 columns and 3 rows?
I am assuming you have/will sort out the rest of your layout. In order to get the bar to appear across the whole page it needs to be outside the individual "cell" divs. I am suggesting an intermediate div to be placed between header/content and content/footer.
For more details on possible three column layouts, check out these links:
http://www.fu2k.org/alex/css/
http://css-discuss.incutio.com/?page=ThreeColumnLayouts
http://webhost.bridgew.edu/etribou/layouts/skidoo_too/
http://www.glish.com/css/
http://www.positioniseverything.net/ordered-floats.html
Wed, 2005-03-23 15:06
#4
3 columns and 3 rows?
I still don't get it
From thoose examples there's always only one wide header/footer, well how do you center the header.gif in that div if it's supposed to be in the same "cell" as the line and if only the line image is to be repeated and expanded on higher resolutions?
If you have the time, please show me what to change in my html and css document thanks.
Wed, 2005-03-23 16:50
#5
3 columns and 3 rows?
I am not sure I understand what you are after. Right now your header image (and the rest of the page) are over to the right hand side because ...
#shadow {width: 649px; margin: 0 auto;}
#container {width: 800px;}
This makes div#shadow centred and makes div#container start from the top/left of div#shadow and bleeds out to the right by 151px. If you want your page centred, ensure div#shadow has a width of 802px (800 + (2 x border-width)).
Some problems with your page.
- you have a "<" in the middle of your doctype. it should be
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- you don't need quotes around url in css. Having them will cause problems with some browsers.
background: #E7E6CE url(bg.gif);
is fine.
Wed, 2005-03-23 21:32
#6
3 columns and 3 rows?
Thanks for your advice. I've correcting the width of the shadow and the other but still don't know how to do thoose "bars".. I've been trying around with TopStyle today but no success...
The thing is I really don't want the shadow, just tried it out. What I really need is the bar to be stretched horizontal expanding for users with higher resolutions. And the wider bar in the footer also to do the same...
Can you tell me exactly what to change in my documents and where to change them, nothing seemes to work, thanks.
Thu, 2005-03-24 08:06
#7
3 columns and 3 rows?
I've also added the "bar image" to be streched horizontally right and left of the header.gif (or behind the header.gif?):
http://hem.bredband.net/b117059/new/leftright.gif
Thu, 2005-03-24 10:14
#9
3 columns and 3 rows?
Yes
And then how do you add the "bar image" to be streched horizontally right and left of the footer.gif (or behind the footer.gif?):
http://hem.bredband.net/b117059/new/leftrightfooter.gif
Fri, 2005-03-25 09:37
#10
3 columns and 3 rows?
Solved it myself. Thanks again Chris..S