28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Pour ceux qui me connaissent je suis en train d'apprendre plus en détail le CSS. J'ai déjà posé des questions sur des soucis de compatibilité entre Internet Explorer et Fire Fox. Et en voici un nouveau... Smiley confus

Les puces <li> me posent soucis. Pour mieux comprendre :

http://ombre.et.lumiere.free.fr/images/puces.jpg

Il y a un décalage.

Mon code html pour les sous-menus:

<div class="boxsousmenu"><div class="soustitres"><li><a href='lien'>lien</a></li></div></div>


mon code css :

ul.menu
{
list-style-type:disc;
color:#797979;
}

div.boxsousmenu
{
position:relative;
background:none;
width:153px;
height:28px;
border:1px solid;
border-color:#ffffff;
float:left;
}

div.soustitres
{
position:relative;
background:none;
margin-left:15px;
}


Précision : si j'ai un <div> boxsousmenu c'est pour pouvoir appliquer le margin-left sur IE et FF sinon les deux seront interprétés différemment en fonction du navigateur... C'est la seule solution que j'ai trouvé pour le moment... Ca marche c'est l'essentiel Smiley langue Et si y'a float:right c'est que sur la droite je mets un <div> qui contient une barre grise (à droite du menu) ; je code ainsi car c'est un menu dynamique généré par une base de données mysql donc avec nombre de titres et de sous-titres aléatoires... Si y'a besoin de plus de code je vous donnerai mon code source de la page (ce n'est pas mis sur internet pour le moment ce n'est qu'en local).

Merci d'avance à ceux qui répondront pour votre temps passé dessus !
Modifié par sanosuke85 (11 Mar 2006 - 14:10)
Salut,

Ce n'est pas que je n'aime pas le jeu des différences, mais il est où le décalage (j'ai juste regardé l'image)
Est-ce la différence de forme de la puce (mais ça ce n'est pas un décalage) ?

Pour les décalages sur les listes, tu peux voir :
http://forum.alsacreations.com/faq/#item54
Modifié par Alan (11 Mar 2006 - 13:11)
Bonjour,


Il me semble que la solution la plus efficace serait d'attribuer un margin et un padding nul aux balises ul et li et d'ensuite attribué le margin ou le padding que tu souhaites.

Un exemple pour être plus clair :
ul, li {
  margin: 0;
  padding: 0;
}

li {
  margin-left: 10px;
}

Il me semble que dans ton cas tu pourrais gagner du code en ne travaillant que sur la balise li plutôt que sur 36 000 div. Non ?
papillon41 a écrit :
Bonjour,
As tu regardé la FAQ à propos des décalages ?


"Très confus...." Smiley sweatdrop

Je suis désolé effectivement c'est cela qui pose soucis... Pour le décalage on le voit vis-à-vis de la plume en haut... (les puces sont plus à gauche sur FF).

Pour les <div> j'ai tenté une mise en page avec un height=100% car sur mon menu à droite il y a une bande de 5px de large grise qui sépare le menu et le contenu ; or ça ne marche pas les % (j'ai regardé les tuto et FAQ sur ce site pour comprendre un peu pourquoi ça marche pas) ; j'ai opté pour un <div> à droite de chaque titre et sous-titre pour que se complète la bordure de droite (après imaginez que c'est un menu donc sous BDD donc avec un nombre aléatoire... Simple si y'avait pas en haut d'accueil le dégradé ainsi que celui tout en bas enfin bref je passe les détails j'ai enfin réussi Smiley biggrin ) ; bref tout ça pour dire qu'avant cela j'ai fait des <table> comme je faisais avant ; et on m'a fortement recommandé à juste titre de me mettre au css pour la mise en page... C'est pas simple mais ça vient petit à petit Smiley cligne

Je vais faire attention si je poste à nouveau à regarder PLUSIEURS FOIS le FAQ du site avant... Encore désolé et merci de vos réponses...