Sujet Précédent Sujet Suivant

Liste en dehors de sa <div>

Lonesnake -  
necro27 Messages postés 175 Statut Membre -
Bonjour,

Je suis en train de concevoir un site web, et je suis confronté à un premier problème. Lorsque je place une liste à puce dans une <div>, celle-ci déborde, on a même l'impression qu'elle n'en fait pas partie.

Code HTML:

<div class="menu">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Entreprises</a></li>
<li><a href="#">Candidats</a></li>
<li><a href="#">Publications</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Administration</a></li>
</ul>
</div>

CSS:

.menu
{
height: 11%;
width: 100%;
border: solid 1px;
}

.menu ul
{
height: 100%;
}

Si quelqu'un pouvait m'expliquer, ce serait cool, merci.
A voir également:

1 réponse

Réponse 1 / 1
necro27 Messages postés 175 Statut Membre 8
 
Bonjour Lonesnake,

.menu
{
height: 11%;
width: 100%;
border: solid 1px;
}

Essaye plutôt de mettre ton width en px plutôt qu'en %, et tu adapte en fonction.

Vois avec width: 250px;
et test en fonction^^

Si ton <ul> déborde encore essaye plus grand (300px).

Juste un novice passant par là, je précise. Bonne conception.

Necro27

Modification du post, désolé, trop rapide à avoir répondu.

Mais, à titre d'information c'est ton premier site ou pas?
Et si oui, le menu dont tu parle, c'est donc si l'on peut dire la partie gauche du site (en général) et qui change la partie droite?

Si tel est le cas je pense que tu devrais plutôt mettre dans le html
pour le div 
--> id="menu" au lieu de class="menu"


Et dans ton CSS mettre 
#menu{  
width: 250px;  
border:;  
...etc  
}


Et ensuite pour ton <ul> dans le css 

ul.menuprincipal{  
...  
}


et dans le html : 
<ul class="menuprincipal"> 
<li></li> 
</ul>
0
Lonesnake
 
Ce n'est pas mon premier site, mais je pense que mon problème vient de ceci:

.menu li
{
float: left; /* PROBLEME */
padding-right: 20px; /* Pour espacer */
}

Merci d'avoir répondu au fait.
0
necro27 Messages postés 175 Statut Membre 8
 
as-tu essayé d'adapter ce que je t'ai proposé plus haut ? remplacer class par id, et ton <ul> lui mettre une classe que tu appellerais par exemple menuprincipal, et donc ul.menuprincipal dans ton css?

Et pour le float, tu ne l'avais pas mis sur le premier message. Et personnellement je ne l'utilise que pour les div, pour les placer.

Essaye de voir avec ce que j'ai écrit en fin de message précédent.

Dans le html :

<div id="menu">
<ul>
<li></li>
</ul<
</div>

pour le css

#menu{
width: 250px;
}

Test déjà sans mettre de class à <ul>, tu verra ensuite. Mais il n'y a pas de raison à ce que cela ne marche pas :/

Bons tests et courage
0