Probleme positionnement/comportement balise
Résolu
A voir également:
- Probleme positionnement/comportement balise
- Logiciel positionnement gratuit - Guide
- Exemple test de positionnement greta - Forum Windows
- Positionnement sms xiaomi - Forum Xiaomi
- Balise br ✓ - Forum HTML
- Test greta - Forum Études / Formation High-Tech
9 réponses
Non, ce n'est pas un problème de hauteur, c'est un problème de float.
tu dois mettre un elémént en clear:both; apres tes ul
<div id="centre">
<p>du blabla</p>
<ul id="azerty">
<li>test1</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul id="ytreza">
<li>test1</li>
<li>test3</li>
<li>test4</li>
</ul>
<div class="clear"></div>
</div>
#clear {clear:both; }
tu dois mettre un elémént en clear:both; apres tes ul
<div id="centre">
<p>du blabla</p>
<ul id="azerty">
<li>test1</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul id="ytreza">
<li>test1</li>
<li>test3</li>
<li>test4</li>
</ul>
<div class="clear"></div>
</div>
#clear {clear:both; }
Pour les centrer tu dois leur donner un width fixe.
puis tu fais un truc genre margin:0 auto; dessus.
puis tu fais un truc genre margin:0 auto; dessus.
J'avais pensé à mettre un margin: 0 auto; mais il faut croire qu'avec la propriété float: left; cela n'a aucun effet :(
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
#navigation{width:200px;margin:0 auto;border:1px solid red; }
ça passe pas ??
et si tu met le border tu vois ce qu'il se passe ?
ça passe pas ??
et si tu met le border tu vois ce qu'il se passe ?
Ça ne passe uniquement sur des ul non flottants sinon le résultat reste le même avec un width non fixe.
je ne suis pas sur de bien comprendre,..
dans n'importe quel site basique tu fais une div #center et si dans son contenu il y a des ul le center restera centré,..
si je veux que mes ul soient centrés il leur faut un width et les mettre en margin 0 auto.
mais centrer des trucs dynamiques ça ne peut se faire qu'avec jquery (js).
dans n'importe quel site basique tu fais une div #center et si dans son contenu il y a des ul le center restera centré,..
si je veux que mes ul soient centrés il leur faut un width et les mettre en margin 0 auto.
mais centrer des trucs dynamiques ça ne peut se faire qu'avec jquery (js).
Justement, ce que j'ai mis n'est pas vraiment "basique" puisque la disposition des ul se fait avec la propriété float.
Or je crois bien qu'il est incohérent, voir impossible de vouloir centrer un cadre avec comme propriété un float à droite ou a gauche.
J'ai néanmoins résolu mon problème en mettant des marges fixes sur les ul pour les positionner comme il se doit
Or je crois bien qu'il est incohérent, voir impossible de vouloir centrer un cadre avec comme propriété un float à droite ou a gauche.
J'ai néanmoins résolu mon problème en mettant des marges fixes sur les ul pour les positionner comme il se doit
Effectivement en mettant par exemple une hauteur fixe cela fonctionne mais je souhaitais justement éviter d'imposer une hauteur.
J'ai cependant trouvé une autre solution, ajouter une nouvelle balise, par exemple #pied_de_page, qui viendra se caler avant la fermeture de la balise </div> de l'id="centre". Comme cela plus de problème de hauteur notamment avec une liste (balise ul et li) qui peut s'allonger.
J'ai encore un autre problème. J'ai ajouté cette fois 3 listes simples et j'aimerais cette fois ci qu'elles soient centrées dans la balise #centre.
Pour être plus claire voici le code htm:
==================================
<div id="centre">
<div id="navigation">
<p>blabla blabla</p>
<ul id="ab">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
<ul id="cd">
<li>test4</li>
<li>test5</li>
<li>test6</li>
</ul>
<ul id="ef">
<li>test7</li>
<li>test8</li>
<li>test9</li>
</ul>
</div>
<div id="pied">
blablabla
</div>
</div>
==================================
Le code CSS (j'ai ajouté la balise #navigation pour avoir la possibilité de continuer à écrire en passant automatiquement sous la liste déjà existante):
____________________________________________
#centre {
text-align: justify;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: 0px;
width: 80%;
border: thin solid #000;
}
#navigation {
clear: both;
float: left;
width: 100%;
padding-bottom: 50px;
}
ul#ab, ul#cd, ul#ef {
width:250px;
border:1px solid #DDD;
color:#333;
float: left;
margin-left: 20px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
}
ul#ab li, ul#cd li, ul#ef li {
list-style-type: none;
}
#pied {
clear: both;
height: 140px;
padding-top: 50px;
position: relative;
}
____________________________________________