homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
tableless CSS design
it really makes me mad
ProfMoriarty




msg:1179981
 4:38 am on Aug 15, 2002 (gmt 0)

Hello,

I´m just trying to switch my design from old fashionend table based layout to complete CSS layout. But - it really makes me mad. I don´t get it.

This is how it should look like:


____________________
¦...... (1) .......¦
¦__________________¦
¦...... (2) ...... ¦
¦__________________¦
¦.. ¦...¦..........¦
¦.. ¦...¦..........¦
¦(3)¦(4)¦.. (5) ...¦
¦.. ¦...¦..........¦
¦___¦___¦__________¦
¦...... (6) ...... ¦
¦__________________¦

(1): header, width 100% fluid
(2): main navigation, width 100% fluid
(3): sub navigation, width 175 px fixed
(4): separator, width 100 px fixed
(5): content, rest of width fluid
(6): footer, width 100% fluid

Problem:
(3) should have a bgcolor down to the footer, (4) and (5) a background image down to the footer.

What was quite easy with tables is getting more and more difficult with divs. By the way: It doesn´t have to work with NS4, only modern browsers should display it correctly. But they don´t. They just ignore the backgrounds for (3) and (4) when text in (5) is longer than one screen.

Any help is really appreciated!

Thanks in advance,

ProfMoriarty

 

Purple Martin




msg:1179982
 5:02 am on Aug 15, 2002 (gmt 0)

This is what I would try:

1. Make another 100% wide div to contain 3,4,5.
2. Put 3,4,5 in that div with height:100%;

I haven't tried it but it'd be my first guess. The idea is that when you specify 100% for a div it will fill 100% of it's container. As 3,4,5 all have the same container, they will all have the same height. BTW - beware of position:absolute; because the container is then the body (I think).

ProfMoriarty




msg:1179983
 5:12 am on Aug 15, 2002 (gmt 0)

Thanks Martin,

I tried that. Works fine in IE 6 but not in NS 7. NS 7 overwrites the footer when the text in the content area is longer than one screen. Not _the_ solution

glengara




msg:1179984
 6:27 am on Aug 15, 2002 (gmt 0)

Pageoneresults seems to have cracked it, sticky him maybe.

copongcopong




msg:1179985
 6:34 am on Aug 15, 2002 (gmt 0)

may i know if your layout (containing all the css) would also be fluid for the browser or are you planning to make it in a specific width? (e.g. width:720px) If you are going to make the layout in fixed width then let it hold those css, you may use "float:left" then let each one push each other.

ProfMoriarty




msg:1179986
 7:44 am on Aug 15, 2002 (gmt 0)

The layout should be fluid in general. Only the sub navigation and the seperator are fixed (see sheet above).

Here is my stylesheet:

body
{
background-color: #000000;
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, Sans-Serif;
color:#FFFFFF;
font-size: smaller;
}
div{
margin: 0px;
}

div.header
{
position: relative;
top: 0px;
width: 100%;
padding: 0px;
background-color: #000000;
}

div.naviMain
{
position: relative;
top: 0px;
width: 100%;
background-color: #7D99B0;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
}

div.naviSub
{
position: relative;
top: 0px;
width: 200px;
height: 100%;
background-color: #2A333B;
float:left;
vertical-align: top;
}

div.seperatorContent
{
position: relative;
left: 0px;
float:left;
width: 100px;
height: 100%;
background-image: url("/images/layout/bg.jpg");
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
vertical-align: top;
}

div.content
{
position: relative;
top: 0px;
left: 0px;
margin-left: 301px;
background-image: url("/images/layout/books.jpg");
text-align: justify;
}

div.footer
{
position: relative;
top: 0px;
width: 100%;
background-color: #DCBC70;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
}

Hope this helps :-)

ProfMoriarty




msg:1179987
 9:49 am on Aug 15, 2002 (gmt 0)

Maybe a look at the site layouted with tables helps more than just the abstract code. See URL in my profile.

Thanks!

Nicu_Alecu




msg:1179988
 11:04 am on Aug 15, 2002 (gmt 0)

Unfortunately, the site in your profile gives me a "Connection timeout". Nevertheless, I took the liberty of testing your CSS in a HTML file (see here [alegradesign.com]). There are so many problems with it that I figured I'd rather think about a different solution.

What I came up with is this [alegradesign.com]. It is based on a CSS layout found on [glish.com...] which, by the way, is a great resource to learn from, but it does contain a lot of alterations.

As you can see, the Separation area is actually contained in the side navigation box and floated right. This was the simplest way I could think of to actually get to the layout you desired.

Now, I'm not going to say it's a final solution or even a problem-free one, just a way of dealing with your layout. If you need any special clarifications, sticky me or email me.

I've tested both your CSS and mine in IE6, NN6.2 and Opera 5.12, on various resolutions, and it works just fine ... well, there are some content related problems, but I think you can work them out by playing with the CSS file.

Hope this DOES help.

copongcopong




msg:1179989
 3:14 am on Aug 16, 2002 (gmt 0)

Prof,

hav you tried to arrange the layout in this manner?

<div style="float:left;">
<div class="header">etc</div>
<div class="naviMain"> etc</div>
<div class="naviSub">etc</div>
<div class="seperatorContent">etc</div>
</div>

<div class="footer">sadsad</div>

BTW: I tried it in MSIE 5.0 and it work <!-- cannot test it in opera and ns since im at work right now ... shhhhh -->

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved