Page 1 sur 1
Positionnement et CSS
Posté : 11 mars 2009, 15:07
par Nad21
Bonjour
Je em lance a faire otut mon site en CSS et c'est pas tjrs simple
Pourtant c'est un truc facile, au dessus une premeir bloc avec le log et un texte, en dessous un second bloc bandeau avec le menu
et en dessous un 3eme bloc texte
le hic c'est que seul le 3eme bloc est bien au centre de ma page et pas les 2 autres
voila le code
Code : Tout sélectionner
#container{
width : 100%;
text-align:center;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image:url(images/fond.jpg);
}
#haut{
margin: 0px;
padding: 0px;
position: relative;
width:925px;
height:142px;
}
#logo{
float:left;
}
#accroche{
text-align:right;
}
#bandeau{
margin: 0px;
padding: 0px;
position: relative;text-align:right;
width:925px;
height:242px;
}
.georgia12{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}
.georgia14{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
}
.georgia24{
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFFFFF;
}Code : Tout sélectionner
div id="container">
<!-- bandeau avec logo -->
<div id="haut">
<div id="logo"><img src="images/logo.jpg" border="0"/></div>
<div id="accroche"><span class="georgia24"><br />
accroche</span><br />
<span class="georgia14">
pettit texte</span></div>
</div>
<!-- fin bandeau avec logo -->
<!-- bandeau central -->
<div id="bandeau"><img src="images/pix_blanc.jpg" width="720px" height="3px" /> <span class="georgia12">version anglaise - mention legale</span><img src="images/bandeau.jpg" /></div>
<!-- bandeau central -->
<div id="texte"><img src="images/essai3.jpg" /></div>
</div>
merci
nadege
Posté : 11 mars 2009, 15:21
par Aureusms
Pour centrer un élément en gauche - droite, il te suffit juste d'utiliser :
Code : Tout sélectionner
width : 90%; /*il faut stipuler une largeur < 100% ou < à ta fenêtre sinon pas d'effet de centrage*/
margin-left : auto;
margin-right :auto;
Posté : 11 mars 2009, 15:22
par Nad21
pourquoi ca ca ne marche pas j
j'ai stipulé la largeur en px
#bandeau{
margin: 0px;
padding: 0px;
position: relative;text-align:right;
width:925px;
height:242px;
}
Posté : 11 mars 2009, 15:26
par Aureusms
Essaye dans ton cas de modifier comme ceci :
Code : Tout sélectionner
#container{
width : 100%;
text-align:center;
}
body {
margin :0;
background-image:url(images/fond.jpg);
}
#haut{
margin-top: 0;
margin-bottom :0;
margin-right : auto;
margin-left : auto;
padding: 0;
position: relative;
width:925px;
height:142px;
}
#logo{
float:left;
}
#accroche{
text-align:right;
}
#bandeau{
clear :both;
margin-top: 0;
margin-bottom :0;
margin-right : auto;
margin-left : auto;
padding: 0px;
position: relative;text-align:right;
width:925px;
height:242px;
}
.georgia12{
font-size: 12px;
}
.georgia14{
font-size: 14px;
}
.georgia24{
font-size: 24px;
}
.georgia12,.georgia14,.georgia24 {
color: #FFFFFF;
font-family:Georgia, "Times New Roman", Times, serif;
Posté : 11 mars 2009, 15:37
par Nad21
pffff
c'est enervant mais ca marche
c'est doncun probleme de margin d'apres ce que je vois
je dois avouer que je comprend pas tout, je vais etudier ca
ainsi que clear :both;
que je ne connaissais pas
merci
Posté : 11 mars 2009, 16:09
par Victor BRITO
Pour que les marges automatiques aient des chances d'être prises en compte, il est important que le document (X)HTML ait un doctype en bonne et dûe forme : en effet, en l'absence d'un doctype ou en présence d'un doctype erronné ou tronqué, certains navigateurs (surtout Internet Explorer) basculent en mode de rendu Quirks (autrement dit, ils se mettent à reproduire certains bugs, IE se comportant par exemple comme IE 5.5 pour le modèle de boîte et les marges automatiques).
Quelques liens pour compléter ce propos :
Pensons-y.
Posté : 11 mars 2009, 17:45
par Invité
pffff
c'est enervant mais ca marche
c'est doncun probleme de margin d'apres ce que je vois
je dois avouer que je comprend pas tout, je vais etudier ca
ainsi que clear :both;
que je ne connaissais pas
merci
Heureux que cela marche.
Le clear: both; te permet d'annuler l'effet du Float.
Il peut prendre clear:left; (place l'élément en dessous à gauche), right (à droite), both (les deux : en clair : ta boîte se mets en dessous de toute tes éléments en position float)
Posté : 11 mars 2009, 21:14
par Nad21
oui merci j'ai reussi a voir ce que c'etait
c'est unpeu chaud de tout faire en css mais bon ca avance
bonne soirée