[CSS] Probleme d'alignement

lorsque le fond doit se repeter :/

15 février 2006 à 22:08:45

Salut, bon en fait ca fait longtemps que j'ai pas revu les cours de CSS/XHTML donc j'ai oublier pas mal de notions néanmoins j'ai relus certaines parties et je m'embrouille :

Résultat mon design a beaucoup de mal à bien suivre

En temps normal

Image utilisateur

Voici le fichier css :

body
{
width: 800px;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
}
#en_tete1
{
float: left; /* Le menu flottera à gauche */
width: 199px; /* Très important : donner une taille au menu */
height: 151px;
background-image: url("V2/haut_gauche.png");
background-repeat: no-repeat;
}
#en_tete2
{
float: left; /* Le menu flottera à gauche */
width: 520px; /* Très important : donner une taille au menu */
height: 151px;
background-image: url("V2/haut_milieu.png");
background-repeat: no-repeat;
}
#en_tete3
{
float: left; /* Le menu flottera à gauche */
width: 80px; /* Très important : donner une taille au menu */
height: 151px;
background-image: url("V2/haut_droite.png");
background-repeat: no-repeat;
}
#gauche_1
{
float: left; /* Le menu flottera à gauche */
width: 159px; /* Très important : donner une taille au menu */
height: 164px;
background-image: url("V2/milieu3_gauche.png");
background-repeat: no-repeat;
}
.element_gauche_1
{
border: 0px solid white;
padding-left: 27px;
}
.element_gauche_1 a /* Tous les liens se trouvant dans un menu */
{
color: red;
}
.element_gauche_1 a:hover /* Quand on pointe sur un lien du menu */
{
padding-right: 2px;
color: white;
}
#gauche_1_1
{
float: left; /* Le menu flottera à gauche */
width: 40px; /* Très important : donner une taille au menu */
height: 164px;
background-image: url("V2/milieu3_gauche_milieu.png");
background-repeat: no-repeat;
}
#centre_1
{
float: left; /* Le menu flottera à gauche */
width: 520px; /* Très important : donner une taille au menu */
height: 164px;
background-image: url("V2/milieu3_milieu.png");
background-repeat: no-repeat;
}
.element_centre_1
{
padding-left: 12px;
padding-bottom: 20px;
color: black;
font-weight:bold;
}
.element_centre_1 h1
{
padding-left: 12px;
color: black;
font-weight: bold;

}
.element_centre_1 h2
{
padding-left: 12px;
color: DarkGray;
font-weight: bold;

}
.element_centre_1 a /* Tous les liens se trouvant dans un menu */
{
color: black;
}
.element_centre_1 a:hover /* Quand on pointe sur un lien du menu */
{
padding-right: 10px;
color: white;
}
#fin_1
{
float: left; /* Le menu flottera à gauche */
width: 80px; /* Très important : donner une taille au menu */
height: 164px;
background-image: url("V2/milieu3_droite.png");
background-repeat: no-repeat;
}
#gauche_2
{
float: left; /* Le menu flottera à gauche */
width: 159px; /* Très important : donner une taille au menu */
background-image: url("V2/milieu2_gauche.png");
background-repeat: repeat-x;
}
#gauche_2_1
{
float: left; /* Le menu flottera à gauche */
width: 40px; /* Très important : donner une taille au menu */
background-image: url("V2/milieu2_gauche_milieu.png");
background-repeat: repeat-x;
}
#centre_2
{
float: left; /* Le menu flottera à gauche */
width: 520px; /* Très important : donner une taille au menu */
background-image: url("V2/milieu2_milieu.png");
background-repeat: repeat-x;
}
.element_centre_2
{
padding-left: 12px;
padding-bottom: 20px;
color: white;
}
.element_centre_2 h1
{
padding-left: 12px;
color: black;
font-weight: bold;
}
.element_centre_2 h2
{
padding-left: 12px;
color: DarkGray;
font-weight: bold;
}
.element_centre_2 a /* Tous les liens se trouvant dans un menu */
{
color: black;
}
.element_centre_2 a:hover /* Quand on pointe sur un lien du menu */
{
padding-right: 10px;
color: white;
}
#fin_2
{
float: left; /* Le menu flottera à gauche */
width: 80px; /* Très important : donner une taille au menu */
background-image: url("V2/milieu2_droite.png");
background-repeat: repeat-x;
}
#gauche_3
{
float: left; /* Le menu flottera à gauche */
width: 159px; /* Très important : donner une taille au menu */
height: 155px;
background-image: url("V2/milieu_gauche.png");
background-repeat: no-repeat;
}
.element_gauche_3
{
border: 0px solid white;
padding-left: 27px;
}
.element_gauche_3 a /* Tous les liens se trouvant dans un menu */
{
color: red;
}
.element_gauche_3 a:hover /* Quand on pointe sur un lien du menu */
{
padding-right: 2px;
color: white;
}
#gauche_3_1
{
float: left; /* Le menu flottera à gauche */
width: 40px; /* Très important : donner une taille au menu */
height: 155px;
background-image: url("V2/milieu_gauche_milieu.png");
background-repeat: no-repeat;
}
#centre_3
{
float: left; /* Le menu flottera à gauche */
width: 520px; /* Très important : donner une taille au menu */
height: 155px;
background-image: url("V2/milieu_milieu.png");
background-repeat: no-repeat;
}
.element_centre_3
{
padding-top:10px;
border: 0px solid white;
padding-left: 16px;
color: black;
font-weight:bold;
}
.element_centre_3 a /* Tous les liens se trouvant dans un menu */
{
color: black;
}
.element_centre_3 a:hover /* Quand on pointe sur un lien du menu */
{
padding-right: 10px;
color: red;
}
#fin_3
{
float: left; /* Le menu flottera à gauche */
width: 80px; /* Très important : donner une taille au menu */
height: 155px;
background-image: url("V2/milieu_droite.png");
background-repeat: no-repeat;
}
#bas
{
float: left; /* Le menu flottera à gauche */
width: 199px; /* Très important : donner une taille au menu */
height: 121px;
background-image: url("V2/bas_gauche.png");
background-repeat: no-repeat;
}
#bas_2
{
font-weight: bold;
color: white;
padding-top: 60px;
float: left; /* Le menu flottera à gauche */
width: 520px; /* Très important : donner une taille au menu */
height: 121px;
background-image: url("V2/bas_milieu.png");
background-repeat: no-repeat;
}
#bas_3
{
float: left; /* Le menu flottera à gauche */
width: 80px; /* Très important : donner une taille au menu */
height: 121px;
background-image: url("V2/bas_droite.png");
background-repeat: no-repeat;
}

Merci de vos conseils pour bien ordonner tout cela

vava69

16 février 2006 à 9:37:55

Mais si tu nous diseais exactement ce que tu veux faire parceque là je sais pas trop si tu veux un menu à droite un à gauche que le corps flotte autour d'un menu qu'il soit au centre et pui il faut que tu donne aussi le code ss parceque ça dépend beaucoup de voir si la balise est block ou inline

le_stoppeur

16 février 2006 à 9:55:53

Une url serait appréciable...
Parce que l'on a besoin du fichier *.html aussi :°

JulFisher

16 février 2006 à 10:01:56

Citation : le_stoppeur

Une url serait appréciable...
Parce que l'on a besoin du fichier *.html aussi :°

Bah je ne vois pas le problème

Suffit de rajouter un peu de texte dans ça page pour tout faire foirer :-°

Sateth

16 février 2006 à 14:41:31

L'url est dans le premier post

Mais voila index.php :

(ya quasiment pas de php ;))

<body>

<div id="en_tete1">
</div>

<div id="en_tete2">
</div>

<div id="en_tete3">
</div>

<div id="gauche_1">
<div class="element_gauche_1">
<a href="tux.php"><img src="V2/boutons/tux.png" /></a>
<br>
<a href="avatux.php"><img src="V2/boutons/avatux.png" /></a>
</div>
</div>

<div id="gauche_1_1">
</div>

<div id="centre_1">
<div class="element_centre_1">
<center>
<h2><? echo "Samedi 11 février :"; ?></h2>
<br/>
<? echo "Mise à jour par Sateth"; ?>
<br/>
<? echo "__________________________________________"; ?>
<br/>
<? echo "Ajout du *.xcf pour faire rapidement son tux sous The Gimp"; ?>
<br/>
<? echo "Ajout de quelques tux persos"; ?>
</center>
</div>
</div>

<div id="fin_1">
</div>

<div id="gauche_2">
</div>

<div id="gauche_2_1">
</div>

<div id="centre_2">
<div class="element_centre2">
</div>
</div>

<div id="fin_2">
</div>

<div id="gauche_3">
<div class="element_gauche_3">
<a href="ustentux.php"><img src="V2/boutons/ustentux.png" /></a>
<br>
<a href="cliptux.php"><img src="V2/boutons/cliptux.png" /></a>
<br>
<a href="walltux.php"><img src="V2/boutons/walltux.png" /></a>
</div>
</div>

<div id="gauche_3_1">
</div>

<div id="centre_3">
<div class="element_centre_3">
<a href="http://www.webeffect-fr.com" target=_blank><img src="http://img364.imageshack.us/img364/6536/penser5tp.gif" /></a>
<br><center>
<? echo "Afin de profiter au maximum de ce site"; ?>
<br>
<? echo "(transparence | cadrage | couleurs)"; ?>
<br>
<? echo "Cliquez sur le logo animé"; ?>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="50" height="50" id="titre" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="quality" value="high" /> <param name="movie" value="Images/firefox.swf" /> <param name="wmode" value="transparent" /> <param name="Flashvars" value="link=http://www.mozilla-europe.org/fr/products/firefox/" /> <embed src="Images/firefox.swf" quality="high" wmode="transparent" Flashvars="link=http://www.mozilla-europe.org/fr/products/firefox/" width="50" height="50" name="titre" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
</center>
</div>
</div>

<div id="fin_3">
</div>

<div id="bas">
</div>

<div id="bas_2">
<center>Copyright Sateth 2006 - Skin et Code par Sateth - Aucun droit réservé </center>
</div>

<div id="bas_3">
</div>
</body>

En fait je veut simplement que l'image de fond se repete correctemen chambouler des que je rajoute trop de texte dans les parties gauche2 et centre 2)