|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
toto2525
WRInaute occasionnel
Inscrit le: 20 Sep 2007
Messages: 125
|
 Posté le : Mer Juil 02, 2008 12:42 Sujet du message: Positionnement CSS |
|
|
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
Nouveau WRInaute
Inscrit le: 13 Juin 2008
Messages: 7
|
| Posté le : Mer Juil 02, 2008 13:04 Sujet du message: Positionnement CSS |
|
|
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
WRInaute passionné
Inscrit le: 02 Avr 2004
Messages: 547
Localisation: Toulouse
|
| Posté le : Mer Juil 02, 2008 13:16 Sujet du message: Positionnement CSS |
|
|
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
WRInaute occasionnel
Inscrit le: 20 Sep 2007
Messages: 125
|
| Posté le : Mer Juil 02, 2008 14:18 Sujet du message: Positionnement CSS |
|
|
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
WRInaute accro
Inscrit le: 05 Juin 2006
Messages: 3737
Localisation: More than a plastic girl
|
| Posté le : Mer Juil 02, 2008 14:40 Sujet du message: Positionnement CSS |
|
|
| - 2 pour les borders, non ? Mets la barre horizontale à 988 |
|
| |
|
|
malvina14
WRInaute occasionnel
Inscrit le: 05 Jan 2007
Messages: 223
|
| Posté le : Mer Juil 02, 2008 14:45 Sujet du message: Positionnement CSS |
|
|
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
WRInaute accro
Inscrit le: 05 Juin 2006
Messages: 3737
Localisation: More than a plastic girl
|
| Posté le : Mer Juil 02, 2008 15:13 Sujet du message: Positionnement CSS |
|
|
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
WRInaute occasionnel
Inscrit le: 20 Sep 2007
Messages: 125
|
| Posté le : Mer Juil 02, 2008 16:04 Sujet du message: Positionnement CSS |
|
|
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  |
|
| |
|
|
Marie-Aude
WRInaute accro
Inscrit le: 05 Juin 2006
Messages: 3737
Localisation: More than a plastic girl
|
| Posté le : Mer Juil 02, 2008 16:12 Sujet du message: Positionnement CSS |
|
|
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) |
|
| |
|
|
| |
|
|
