28220 sujets

CSS et mise en forme, CSS3

[Résolu] Liste dans un cadre avec padding

Bonjour,

Me revoici avec un nouveau problème ! J'ai un cadre qui possède un certain padding à gauche, dans lequel se trouve une liste à puces. Et malheureusement, les puces "sortent" du cadre...

Voici le code html employé :

<body>

<div id="page">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
  </ul>
</div>

</body>


Et le CSS attaché :

* {
  padding: 0;
  margin: 0;
}

#page {
  border: 3px solid red;
  margin-left: 20px;
}


Voici un aperçu de ce que cela donne :

upload/2186-listpadding.PNG

Comment avoir mes puces dans le cadre ?

Merci beaucoup !
Modifié par Piloutje (13 Jun 2005 - 16:17)
Je crois qu'il faut plutôt mettre ça

ul#page {
list-style-position: inside;}


Regadez ici
Modifié par GuizBizet (13 Jun 2005 - 13:56)
Quoique !

Imagine maintenant que je veuille une liste de type "outside" mais avec mes puces collée à la bordure du mon conteneur ? Car l'attribut "outside" ou "inside" est surtout là pour définir le comportement du texte lorsqu'il est plus long que la largeur de conteneur...
Essaye dans ce cas de mixer les 2 propriétés : text indent et position Smiley cligne

Par contre attention aux différences entre Firefox et IE
Modifié par GuizBizet (13 Jun 2005 - 14:34)
eventuellement une solution possible est de mettre un list-style-position : inside avec un padding de 1 ou 2 em pour les li.
Salut,

J'ai une question : Pourquoi mettre le code suivant ?


* {
padding: 0;
margin: 0;
}


Ici, c'est justement le all (je parle de l'étoile) qui pose des problèmes vu que tu dis à toutes tes balises de ne pas avoir de marges et d'espacements...

Si tu te contentes de dire aux balises div qu'elles n'ont pas de marges ni d'espacement, cela marche mieux.

Voici le code :


div {
padding: 0;
margin: 0;
}


J'espère qu'il s'agit bien du le résultat que tu cherchais.

Djé
Piloutje a écrit :
bof c'est du bricolage tout ça... non ?

Ben nan : ta liste est indentée ou non, selon ton choix, puis positionnée comme tu l'entends !
djé > * padding / margin permet de mettre à peu près d'accord iE et FF lors del'utilisation des div... et ne jouera pas sur l'indentation des listes.
Modifié par Macpom (13 Jun 2005 - 15:19)
Je suis d'accord avec toi Macpom sur le fait qu'il faut définir les propriétés padding / margin afin que l'affichage ne varie pas d'un explorateur à l'autre. Mais pourquoi mettre toutes les margin / padding à 0 ? Après, tu seras obligés de remettre des margin/padding aux balises qui devraient en avoir... Je comprends pas la logique.

Sinon, il est possible de bidouiller... avec des styles pris en compte uniquement par ie par exemple mais bon... à faire uniquement en cas de force majeure.

Après, tout cela n'est qu'une question choix. Si tu peux me montrer que ta technique est plus logique, je suis preneur.

Djé
oké merci, je commence à comprendre l'erreur.

Mais j'aurais quand-même besoin de précisions... En mode "outside", comment est positionné une liste en fonction de son padding et de son margin ?

En bref, je ne vois toujours pas trop comment controler la position de la puce pour que dans mon exemple elle "colle" à ma box conteneur...

Et comment ça se fait que quand je retire l'* qui mettait à zéro tous les paddng et margin, ma liste se retrouve automatiquement décallée fortement vers la droite ?

Merci beaucoup !
Modifié par Piloutje (13 Jun 2005 - 15:59)
Macpom a écrit :

Ben nan : ta liste est indentée ou non, selon ton choix, puis positionnée comme tu l'entends !
djé > * padding / margin permet de mettre à peu près d'accord iE et FF lors del'utilisation des div... et ne jouera pas sur l'indentation des listes.


Je ne vois pas quelle valeur exacte entrer pour que la puce "colle" à ma box.
Merci bookins,

J'ai lu le débat que tu m'as recommandé. En bref, c'est bien une question de choix. Perso, je n'aime pas redéfinir le style des balises plusieures fois donc je vais continuer à faire de ma manière jusqu'à ce que l'on me prouve qu'il y a mieux (Les arguments ne m'ont pas convaincu... encore moins celui de la flemme qui entraine un gain de temps Smiley cligne ).

A bientôt,

Djé
Piloutje > text-indent n'est pas approprié, par contre :
ul {
list-style-position: inside;
}
te permet de "rentrer" ta liste, puis tu ajustes "à tatons" avec un padding sur les "li" ; tu peux faire de même en mettant outside, puis re-ajuster en reculant les "li", toujours avec un padding.
Un lien pour les différents contrôles :
http://dicolive.media-box.net/docCSS/css.php?orderByType=1
Modifié par Macpom (13 Jun 2005 - 16:13)
Sujet clos
Aller à