10 replies [Last post]
Baltazar
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2005-03-23
Posts: 32
Points: 0

Hi, I'm new here and a new CSS developer Smile

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?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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)}

Baltazar
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2005-03-23
Posts: 32
Points: 0

3 columns and 3 rows?

Thanks, but I didn't quite follow you there Smile

Can you explain further please.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 columns and 3 rows?

Smile

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

Baltazar
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2005-03-23
Posts: 32
Points: 0

3 columns and 3 rows?

I still don't get it Smile

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.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

Baltazar
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2005-03-23
Posts: 32
Points: 0

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.

Baltazar
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2005-03-23
Posts: 32
Points: 0

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

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

3 columns and 3 rows?

like so?

Baltazar
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2005-03-23
Posts: 32
Points: 0

3 columns and 3 rows?

Yes Smile

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

Baltazar
Offline
Regular
Last seen: 13 years 51 weeks ago
Joined: 2005-03-23
Posts: 32
Points: 0

3 columns and 3 rows?

Solved it myself. Thanks again Chris..S Smile