Probleme positionnement/comportement balise [Résolu/Fermé]

Signaler
-
 orphen -
Bonjour,

J'ai un problème récurent entre 2 balises mais surtout entre leur relation parent/enfant.
Pour que ce soit explicite voici mon code htm entre la balise <body>:

=================================
<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>
=================================

le CSS:
_______________________________________
#centre {
text-align: justify;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: 0px;
width: 80%;
border: thin solid #000;
}

ul#azerty, ul#ytreza {
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#azerty li, ul#ytreza li {
list-style-type: none;
}
_____________________________________

Le problème est que les données qui sont affichés en liste se trouve en "dehors" de la balise #centre censé l'englober.
Comment faire pour résoudre ce problème?

Merci.

9 réponses

bonjour
si tu mets une hauteur à la balise centre , cà doit marcher
Bonjour,

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;
}
____________________________________________
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
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; }
Bonjour,

Merci jona303, j'avais vu le problème.
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
Pour les centrer tu dois leur donner un width fixe.
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 :(
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
fais une div autour de tes ul et dans center avec un width fixe
Justement, j'ai créée la div #navigation pour englober les ul. Mais je ne comprends pas le "center avec un width fixe"

J'ai essayé de mettre une width fixe dans la balise #center et/ou dans #navigation, même résultat.
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
#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 ne passe uniquement sur des ul non flottants sinon le résultat reste le même avec un width non fixe.
Messages postés
369
Date d'inscription
dimanche 25 janvier 2009
Statut
Membre
Dernière intervention
28 janvier 2013
28
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).
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