28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai beau retourner le problème dans tous les sens, je ne trouve pas la solution. Les tutos d'Alsa et autres n'y ont rien fait. Je suis en train de créer un site et je n'arrive pas à positionner mes trois div correctement.

En fait, le problème est que dans un <DIV>, je place trois autre <DIV>. Je veux que ces trois <DIV> se placent côte à côte, et qu'ils restent dans le <DIV> parent.

Voici le site : http://www.inwebwetrust.fr

Voici ensuite le code de mon fichier css

@charset "iso-8859-1";

html {font-size:100%}
body {margin:0 ; padding:0 ; color:#000 ; background-color:#ddd ; font-size:0.85em ; font-family: Helvetica, Arial, sans-serif ; text-decoration:none}
h1 {margin:0 ; padding-left:0.5em ; color:#c0d569 ; border-bottom:1px solid #c0d569 ; font-size:1em ; text-align:left}
h2 {margin:0 ; padding-left:0.5em ; color:#000 ; border-bottom:1px solid #c0d569 ; font-size:1em}
img {border:0}

#page {margin:10px 5% ; border:1px solid #c0d569 ; padding:0 ; width:90% ; background-color:#fff}

#header {margin:0 ; border:0 ; padding:0 ; height:250px ; background-image:url(img/anana.gif) ; background-repeat:no-repeat ; text-align:center inherit}

/* Menu Horizontal - Début */
#menu_rubrique {position:relative ; top:170px ; margin:auto ; border:0 ; padding:0 ; width:576px}
#menu_rubrique ul {display:inline ; margin:0 ; padding:0 ; list-style: none}
#menu_rubrique li {float:left ; margin:0 ; padding:0 ; border-right:1px solid #FFF}
#menu_rubrique a:link, #menu_rubrique a:visited{float:left ; width:75px ; margin:0 ; padding:5px 10px ; background:#778899 ; color:#FFF ; font:bold 0.8em Helvetica, Arial, sans-serif ; text-transform:uppercase ; text-decoration:none}
#menu_rubrique a:hover, #menu_rubrique a:active  {color:#555 ;	background:#f4d63c}
/* Menu Horizontal - Fin */

#pub_header {position:relative ; top:130px ; margin:0 auto ; border:0px solid #789 ; padding:0 ; width:468px ; height:60px}

#conteneur {margin:2em 0 0.5em ; border:1px solid #789 ; padding:0 ; height:100% ; width:100%}

#menu_navigation {float:left ; margin:0; border:0px solid #789 ; padding:0 ; width:150px ; height:100%}
#menu_navigation ul {list-style: none ; margin:0 ; padding:0 ; width:140px}
#menu_navigation li {margin:0.5em ; padding:0 ; width:140px}
#menu_navigation a:link, a:visited {padding:0.5em ; width:140px ; font:bold 0.8em Helvetica, Arial, sans-serif ; color:#000 ; text-transform:uppercase ; text-decoration:none}
#menu_navigation a:hover{padding:0.5em ; width:140px ; font:bold 0.8em Helvetica, Arial, sans-serif ; color:#000 ; background:#f4d63c ; text-transform:uppercase ; text-decoration:none}


#content {float:left inherit ; margin:auto 150px ; border:0px solid #789 ; padding:0 1em ; width:auto ; text-align:justify}

#pub_droite {float:left inherit ; margin:0 0 auto auto ; border:0px solid #789 ; padding:0 ; width:150px ; text-align:center}

#footer {clear:both ; margin:0 ; border:0px solid #789 ; padding:5px 0 ; height:auto ; vertical-align:middle ; text-align:center ; color:#fff ; background-color:#c0d569}


Les <DIV> menu_navigation, content et pub_droite se trouve dans le <DIV> content.

Son poid en fromage rapé à celui qui peut m'aider. Smiley lol
Modifié par levince (28 Nov 2006 - 19:53)
levince a écrit :
Son poid en fromage rapé à celui qui peut m'aider. Smiley lol

Je pourrais te donner la réponse immédiatement et ainsi te couter une somme non négligeable en fromage râpé, mais comme je suis magnanime je te propose plutôt de trouver toi-même la réponse en passant ta feuille de style au validateur :
http://jigsaw.w3.org/css-validator/
Merci pour le lien, je connaissais mais je n'y avais pas pensé. C'est vrai que de temps en temps, c'est bien de passer son fichier css au validateur. Cependant, l'erreur est toujours là. Je n'arrive pas à passer cette ****** de pub à droite du <DIV> content.

Pour ce qui est du fromage rapé, c'est vrai que ça doit faire un joli trou dans le budget (sans jeu de mot) Smiley cligne
levince a écrit :
Cependant, l'erreur est toujours là. Je n'arrive pas à passer cette ****** de pub à droite du <DIV> content.

Tu as corrigé l'erreur suivante (normalement signalée par le validateur) ?
#content {float:left inherit;}

la valeur "left inherit" n'existe pas pour la propriété float.
Modifié par mpop (29 Nov 2006 - 17:29)
Oui, c'est fait, j'ai réglé le problème mais maintenant je bute sur un autre problème. La fonction "min-height" ne fonctionne pas avec IE. Donc, je vais devoir encore rusé. Sinon le problème est résolu et ce topic n'a plus raison d'être.

Merci encore.
Modérateur
bonsoir , pour le probleme du min-height , regarde la faq , tu as les explications qu'il te faut Smiley smile .

++