Stylesheets - HELP : can't solve css templates PB !

Author

HELP : can't solve css templates PB !

zefri

2004-11-22, 11:22 pm

Hi,

I want to create a simple css template like this :
http://www.alsacreations.com/articl...eles/g_fixe.htm

But i've got a problem : the footer doesn't follow if contents(menu or
center) grow !

- Try to fill the menu with text so that its content is bigger than the
content of the center (right block).
you can see that the footer doesn't follow...!!!

-on the contrary, if the content of center is bigger than the content of
menu, footer follow as expected.

How to solve this ?!

Thanks a lot for any help !!

Regards,

Zefri

Neal

2004-11-22, 11:22 pm

On Thu, 18 Nov 2004 14:49:24 -0800, mscir <mscir@access4less.net> wrote:

> #gauche {
> position: relative;
> float: left;
> width: 150px;
> background-color: #FFAABB;
> }

I recommend choosing an ID which reflects the content, not the location on
the rendered page. Same with #centre.

Beauregard T. Shagnasty

2004-11-22, 11:22 pm

zefri wrote:
> Hi,
>
> I want to create a simple css template like this :
> http://www.alsacreations.com/articl...eles/g_fixe.htm

And change this:

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;

...to this:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;

http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

--
-bts
-This space intentionally left blank.

mscir

2004-11-22, 11:22 pm

zefri wrote:

> Hi,
>
> I want to create a simple css template like this :
> http://www.alsacreations.com/articl...eles/g_fixe.htm
>
> But i've got a problem : the footer doesn't follow if contents(menu or
> center) grow !

<snip>

Try this. Also use units everywhere, e.g. body margin and padding.

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#CCCCFF;
}

#header {
height: 100px;
width: 100%;
background-color: #99CCCC;
}

#gauche {
position: relative;
float: left;
width: 150px;
background-color: #FFAABB;
}

#centre {
position: relative;
float: left;
width: 600px;
background-color:#9999CC;
}

#pied {
height: 30px;
width: 100%;
background-color: #99CC99;
}

Mike