[Résolu] Débutant... Mise en page en colonnes

Bonjour,

C'est mon premier post sur ce forum, merci d'être indulgent...

Je débute dans ma mise en page en css (personne n'est parfait ).

J'ai aujourd'hui un site mis en page avec plein de zoulis tableaux, et bon, j'ai envie de passer à autre chose.

J'ai commencé par faire un gabarit, très largement inspiré de divers tutos d'Alsacreations. Je compte procéder par étapes et améliorer petit à petit.

Il est ici : http://gpts1.free.fr/test.htm
Les couleurs sont là pour repérer mes blocs...

Le problème que j'ai est lorsque le texte est plus petit que le menu - je pense avoir compris pourquoi, mais y a-t-il un moyen simple de pallier cet inconvénient ?

J'ai bien regardé la FAQ, il y a des astuces avec des images de fond, ou des techniques qui me semblent trop complexes pour moi (je veux comprendre ce que je fais...).

Voici la feuille de style :

body {
font-family: Verdana, Arial, Hevetica;
font-size: 0.75em;
color: #000000;
text-align: justify;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
html {
height:100.1%;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-top: 10px;
margin-left: -375px;
border: #000000 1px solid;
background-color: #ffffa0;
}
#header {
height: 100px;
padding: 5px;
background-color: #e2f700;
}
#header-left {
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 80px;
background-color: #e200ff;
}
#header-right {
position: absolute;
top: 0;
right: 0;
width: 90px;
height: 80px;
background-color: #aaaaaa;
}
#centre {
background-color:#fff0ff;
margin-left: 160px;
border-top: #000000 1px solid;
border-left: #000000 1px solid;
padding: 10px;
}
#gauche {
/*
position: absolute;
left: 0;
*/
float: left;
width: 150px;
border-top: #000000 1px solid;
padding: 10px 5px 10px 5px;
background-color: #ffffa0;
}
#pied {
clear: both;
border-top: #000000 1px solid;
padding: 5px;
background-color: #66668a;
}

Merci d'avance de votre aide
Modifié par DidierK (21 Aug 2006 - 19:53)

DidierK a écrit :
Le problème que j'ai est lorsque le texte est plus petit que le menu - je pense avoir compris pourquoi, mais y a-t-il un moyen simple de pallier cet inconvénient ?

Je pense avoir trouvé l'astuce sur Openweb avec un spacer.

hr {
  clear: both;
}
et dans le achetemeuleu
<hr /> en fin de texte

Avant de supprimer le Presque de Résolu des âmes charitables pourraient-elles me dire ce que ça donne avec IE, Safari,... ?
http://gpts1.free.fr/test.htm

Je ne peux tester que sous Firefox .
Modifié par DidierK (20 Aug 2006 - 13:00)

ok pour Safari.

Ok pour Firefox, je confirme...
MAIS pour IE6, il faut que je clique pour voir apparaitre le texte à l'écran.
Et un tout petit problème de bordure à droite.
Il faut que quelqu'un d'autre essaie pour voir.

(Tu n'as pas installé IE pour faire tes tests, didierK?)

*Edit
Peut-être un rapport avec ceci:
http://forum.alsacreations.com/topic-1-17287-1.html
Modifié par dom (21 Aug 2006 - 14:27)

dom a écrit :
Ok pour Firefox, je confirme...
MAIS pour IE6, il faut que je clique pour voir apparaitre le texte à l'écran.
Et un tout petit problème de bordure à droite.
Il faut que quelqu'un d'autre essaie pour voir.

(Tu n'as pas installé IE pour faire tes tests, didierK?)

J'ai Win98 et IE qui plante, et désinstaller-réinstaller ne règle pas le problème...
Je devrais passer sous XP bientôt, voire sous Linux, mais css c'est déjà prise de tête, une à la fois...
J'ai pu ramener un portable du boulot avec IE, donc OK maintenant...

dom a écrit :

*Edit
Peut-être un rapport avec ceci:
http://forum.alsacreations.com/topic-1-17287-1.html

Dans le mille !
J'ai rajouté ce bout de code

line-height: 1.2;

dans le conteneur.

Je n'ai plus qu'à rendre cette verrue la moins purulente possible...

Merci beaucoup de ton aide !
Modifié par DidierK (21 Aug 2006 - 19:52)