28220 sujets

CSS et mise en forme, CSS3

Décalage de div

Bonjour à tous Smiley smile

Je voudrais aligner 2 éléments sur 2 colonnes sur plusieurs lignes, mais il se produit un décalage à la troisième ligne.

Voici ce qu'il se passe en image :

(j'ai mis des couleurs pour se rendre compte : le bleu doit se trouver à gauche et le jaune doit se trouver à droite)

http://bluesmilies.celeonet.fr/decalage_div.gif

Et voici mon code:


<style type="text/css">
<!--
body {
background-color: #9CDBFF;
}
.h {
background-color: #00FFFF;
float: left;
margin-left: 25px;
width: 300px;
Font-family : Comic-sans-ms, Helvetica, sans-serif;
font-size : 18px;
font-weight : bold;
color : #EAA619;
text-align : center;
font-style : normal;
}
.h2 {
background-color: #FFFF00;
float: left;
margin-left: 50px;
width: 300px;
Font-family : Comic-sans-ms, Helvetica, sans-serif;
font-size : 18px;
font-weight : bold;
color : #EAA619;
text-align : center;
font-style : normal;
}
.wall {
background-color: #00FFFF;
float: left;
margin-left: 25px;
}
.wall2 {
background-color: #FFFF00;
float: left;
margin-left: 50px;
}
.clique{
background-color: #00FFFF;
float: left;
margin-left: 25px;
width: 300px;
font-family : verdana, arial, sans-serif;
font-size : 11px;
font-weight : bold;
color : #0882BD;
text-align : center;
font-style : normal;
}
.clique2 {
background-color: #FFFF00;
float: left;
margin-left: 50px;
width: 300px;
font-family : verdana, arial, sans-serif;
font-size : 11px;
font-weight : bold;
color : #0882BD;
text-align : center;
font-style : normal;
}
.dl {
background-color: #00FFFF;
float: left;
margin-left: 25px;
width: 300px;
text-align: center;
}
.dl2 {
background-color: #FFFF00;
float: left;
margin-right: 50px;
width: 300px;
text-align: center;
}
a:link {text-decoration:none;color:#EF1727;font-family:verdana, arial, sans-serif;font-size:9pt;font-weight:bold;}
a:visited {text-decoration:none;color:#EF1727;font-family:verdana, arial, sans-serif;font-size:9pt;font-weight:bold;}
a:active {text-decoration:none;color:#EF1727;font-family:verdana, arial, sans-serif;font-size:9pt;font-weight:bold;}
a:hover {text-decoration:underline;color:#EAA619;font-family:verdana, arial, sans-serif;font-size:9pt;font-weight:bold;}
.p {
font-family : verdana, arial, sans-serif;
font-size : 11px;
font-weight : bold;
color : #0882BD;
text-align : center;
font-style : normal;
}
//-->
</style>
<div class="h">Incognito
</div>
<div class="h2">Pas touche !
</div>
<div class="wall"><a href="http://bluesmilies.celeonet.fr/incognito_800.jpg" target="_blank"><img src="http://bluesmilies.celeonet.fr/site_incognito.jpg" width="300" height="226" border="0" alt="Incognito" /></a>
</div>
<div class="wall2"><a href="http://bluesmilies.celeonet.fr/pas_touche_800.jpg" target="_blank"><img src="http://bluesmilies.celeonet.fr/site_pas_touche.jpg" width="300" height="225" border="0" alt="Pas touche" /></a>
</div>
<div class="clique">Cliquez sur l'image<br />pour la visualiser en taille réelle
</div>
<div class="clique2">Cliquez sur l'image<br />pour la visualiser en taille réelle
</div>
<div class="dl"><img src="telecharger.gif" hspace="5" height="32" width="32" alt="Télécharger" /><a href="http://bluesmilies.celeonet.fr/incognito_800.exe" class="wallpaperblue">800 x 600</a>
<span class="p">-</span>
<a href="http://bluesmilies.celeonet.fr/incognito_1024.exe">1024 x 768</a>
</div>
<div class="dl2"><img src="telecharger.gif" hspace="5" height="32" width="32" alt="Télécharger" /><a href="http://bluesmilies.celeonet.fr/pas_touche_800.exe" class="wallpaperblue">800 x 600</a>
<span class="p">-</span>
<a href="http://bluesmilies.celeonet.fr/pas_touche_1024.exe">1024 x 768</a>
</div>


Je n'aimerais pas utiliser la méthode :
position: absolute;
left: 0px;
ou
right: opx;
car j'ai 20 lignes et ça me ferait 40 codes CSS pour définir le margin-top de chaque élément Smiley biggol , enfin, si j'ai tout bien compris Smiley lol
Merci pour votre aide Smiley smile
Modifié par blue (27 Jun 2005 - 16:23)
bon, j'ai réussi à adapter Smiley biggrin

par contre, j'arrive à centrer ma page qu'avec la solution


#global {
margin-left: auto;
margin-right: auto;
width: 760px;
}


ce qui est impeccable pour une résolution 800x600, mais qui me laisse des marges, à droite et à gauche, trop importantes pour une résolution 1024x768 Smiley ohwell (mon site est en largeur 100%)

comment pourrais-je faire pour centrer horizontalement sans préciser une largeur svp ?
Sujet clos
Aller à