Positionnement CSS

toto2525 · 2 Juillet 2008

Salut à tous,

Je cherche à créer un bloc horizontal de 986 x 12 pixels dans laquelle je place 3 textes : l'un positionné à gauche dans mon bloc, l'autre positionné au centre et le dernier texte positionné à droite dans mon bloc. Je n'arrive pas à positionner correctement le dernier texte à droite dans mon bloc, il me l'affiche en dessous du bloc, je ne vois d'ou ça peut venir, voici mon code :

Code du fichier CSS :

Code:

#barre_horizontale
{
   width:986px;
   height:12px;
   border:solid #FF0000 1px;
   margin:5px;
   padding:2px;
   font-size:9pt;
   color:#000000;
   vertical-align:middle;
}

.element_barre1
{
   float:left;
   width:150px;
   padding-left:10px;
   text-align:left;
}

.element_barre2
{
   float:center;
   width:666px;
   text-align:center;
}

.element_barre3
{
   float:right;
   width:150px;
   text-align:right;
   padding-right:10px;
}

Code HTML

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/style.css\">
<title>Exemple</title>
</head>
<body>
<div id="barre_horizontale">
            <div class="element_barre1">Mon site</div>
            <div class="element_barre2">Mon site est le plus beau...</div>
            <div class="element_barre3">02 Juillet 2008 - 10h 46mn </div>
</div>
</body>
</html>

Quelqu'un voit-il mon erreur ?

smoof86 · 2 Juillet 2008

Tu peux tester d'augmenter de 2px ton #barre_horizontale puisque tu as rajouté un border de 1px...

Sinon tu peux tester de mettre ta barre en absolute, et tu mets simplement deux div en absolute, l'un a left: 0 l'autre à right 0; et le texte de ta barre en text align center.
Le pb avec cette solution c'est qu'il te faut une taille fixe.

ltressens · 2 Juillet 2008

Ca rentre pas car y'a pas la place.
150+150+666 = 966
reste 20 pixels

et tu as des padding 10 sur les elements 1 et 3, plus un margin 5 sur le div contenant, etc...

toto2525 · 2 Juillet 2008

Merci pour vos réponses.

J'ai enlevé mes padding et margin et mis les bonnes dimensions dans mes éléments 1,2 et 3 mais ça ne marche toujours pas (pour l'élement 3 qui va se placer sous la barre).

Code:

#barre_horizontale 
{ 
   width:986px; 
   height:12px; 
   border:solid #FF0000 1px; 
   margin:0px; 
   padding:0px; 
   font-size:9pt; 
   color:#000000; 
   vertical-align:middle; 
} 

.element_barre1
{
   float:left;
   width:150px;
   padding-left:0px;
   text-align:left;
}

.element_barre2
{
   float:center;
   width:656px;
   text-align:center;
}

.element_barre3
{
   float:right;
   width:180px;
   text-align:right;
   padding-right:0px;
}

Si on additionne les 3 éléments 150 + 656 + 180 = 986 (comme dans #barre_horizontale).

Quelqu'un voit-il une autre solution ?

Ca parait tout bête de placer 3 phrases dans un bloc mais en pratique avec le CSS c'est pas si simple.

Marie-Aude · 2 Juillet 2008

- 2 pour les borders, non ? Mets la barre horizontale à 988

malvina14 · 2 Juillet 2008

salut:

code html

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/style.css" />
<title>Exemple</title>
</head>
<body>
<div id="barre_horizontale">
            <div class="element_barre1">Mon site</div>
            <div class="element_barre2">Mon site est le plus beau...</div>
            <div class="element_barre3">02 Juillet 2008 - 10h 46mn </div>
</div>
</body>
</html>

code css

Code:

#barre_horizontale
{
   width:986px;
   height:12px;
   border:solid #FF0000 1px;
   margin:5px;
   padding:2px;
   font-size:9pt;
   color:#000000;
   vertical-align:middle;
}

.element_barre1
{
   float:left;
   width:150px;
   padding:2px 2px 2px 10px;
   text-align:left;
}

.element_barre2
{
   float:left;
   width:666px;
   text-align:center;

}

.element_barre3
{
   float:right;
   width:150px;
   text-align:right;

}

c'est quelque chose comme ça je pense.
float: center; connais pas

Marie-Aude · 2 Juillet 2008

Il n'y a pas de float center, on aligne les float dans l'ordre suivant :
float:left
float:right
et ensuite le texte à mettre au milieu

Donc là avec les deux floats left et ensuite le float right, c'est bon

toto2525 · 2 Juillet 2008

Merci beaucoup Marie-Aude ça marche parfaitement, j'ai pas compris la logique de tes deux floats left et ensuite le float right mais bon ça fonctionne, alors merci beaucoup :lol:

Marie-Aude · 2 Juillet 2008

La logique des floats c'est ce que tu as déjà fait donc tu as compris

Pour ton problème, n'oublie pas de rajouter les bordures aux dimensions de boite (en plus des marges)