Positionnement CSS
9 messages
• Page 1 sur 1
- toto2525
- WRInaute occasionnel
- Messages: 349
- Inscription: 20 Sep 2007
Positionnement CSS
le Mer Juil 02, 2008 12:42
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 HTML
Quelqu'un voit-il mon erreur ?
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: Tout sélectionner
#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: Tout sélectionner
<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
- Messages: 7
- Inscription: 13 Juin 2008
le Mer Juil 02, 2008 13:04
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.
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.
- toto2525
- WRInaute occasionnel
- Messages: 349
- Inscription: 20 Sep 2007
le Mer Juil 02, 2008 14:18
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).
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.
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: Tout sélectionner
#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 - Modérateur
- Messages: 11898
- Inscription: 5 Juin 2006
le Mer Juil 02, 2008 14:40
- 2 pour les borders, non ? Mets la barre horizontale à 988
-
malvina14 - WRInaute discret
- Messages: 241
- Inscription: 5 Jan 2007
le Mer Juil 02, 2008 14:45
salut:
code html
code css
c'est quelque chose comme ça je pense.
float: center; connais pas
code html
- Code: Tout sélectionner
<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: Tout sélectionner
#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 - Modérateur
- Messages: 11898
- Inscription: 5 Juin 2006
le Mer Juil 02, 2008 15:13
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
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
-
Marie-Aude - Modérateur
- Messages: 11898
- Inscription: 5 Juin 2006
le Mer Juil 02, 2008 16:12
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)
Pour ton problème, n'oublie pas de rajouter les bordures aux dimensions de boite (en plus des marges)
9 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
Consultez la description détaillée des produits ou services de Google suivants : Google Sandbox
- Analyser le positionnement d'un site
AgentWebRanking est un logiciel professionnel qui permet d'analyser le positionnement d'un ou plusieurs sites dans plus de 300 moteurs de recherche dans le monde. Vous pouvez ainsi analyser les performances du référencement pour de nombreux mots-clés. - Analyser le positionnement dans Google
Cet outil vous permet de vérifier si une ou plusieurs page(s) de votre site arrive(nt) dans les premiers résultats de Google, pour certains mots-clés recherchés. - Analyser le positionnement dans Yahoo
Cet outil vous permet de vérifier si une ou plusieurs page(s) de votre site arrive(nt) dans les premiers résultats de Yahoo, pour certains mots-clés recherchés. - Test de positionnement sur data centers
Cet outil vous permet d'afficher sur une seule page les résultats Google effectués sur de nombreux data centers (centres de données).
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités
Contact
Confidentialité