28220 sujets

CSS et mise en forme, CSS3

Probleme de retour a la ligne sur liste...

Bonjour,

pour mon menu j ai une liste précedée d'un titre ....
J utilise un span (titredroit) pour ce titre...
copie écran :




mon probleme est en fait le suivant ::
j aimerais que pour le titre le passage a la ligne fasse se caler le texte sur le début de celui ci verticalement :
c est a dire le mot revoir ce mette au niveau d actualités.
la même chose pour klhklmmmm au niveau de la puce devant ou d'"études".
j ai du faire une boulete quelques part ..
je n y arrive pas...
merci pour votre aide
sam/

extrait du code html :

<div id="droite"><div id="debdroite"><span 

class="titredroit">Actualités a voir et a revoir</span><br /><br>

<ul class="droite">
        <li><a href="">études jghhkh hhlk hlh klhklmmmm</a></li>
        <li><a href="">professionnelle</a></li>
        
      </ul>


coté css :
ul,li {
list-style-type: none; 
margin: 0;
padding: 0;
border:0;
display: inline; 

}


#debdroite {
right:0;
padding-top: 18px;
width: 181px;
height: 262px;
background-image:  url(11.png); background-repeat: no-repeat;
}
html>body #debdroite {
height: auto;
min-height: 262px;
} 

#basdroite {
right:0;
width: 181px;
height: 12px;
background-image:  url(13.png); background-repeat: no-repeat; 

background-position: bottom;
}

#droite a{
font-size: 10px;
display: block;
height: 15px;
width: 100%;
text-decoration: none;
color: #000000;
text-indent: 43px;
background-image:url(liste.gif);
background-position: 28px 3px;
background-repeat: no-repeat;
}
#droite a:hover{
font-size: 10px;
display: block;
height: 15px;
width: 100%;
 text-decoration: underline overline;
color: #FD9C29;
text-indent: 43px;
left: 43px;
background-image:url(listeg.gif);
background-position: 28px 3px;
background-repeat: no-repeat;
}


#droite li a{
margin: 0;
padding: 0;
border: 0;
width:100%;
display: block;
}




upload/1007-liste.jpg
Plop,

C'est ta propriété text-indent qui provoque ce phénomène. En effet elle ne décale que la première ligne.

Pour décaler toutes les lignes, il faut jouer avec le padding.
merci Tyx..
le souci c est que qd je virais le text-indent pour mettre un padding hier cela décalait le fond et toute la mise en page de la liste ...RRRR
sam/
Bonjour,

Tu devrais utiliser un niveau de titre hn à la place de cette div et ce span.
Et pourquoi pas utiliser un margin droite et gauche sur ce titre.
Histoire d'étayer ma première remarque, l'utilisation de padding demande quelques précautions tout de même car elle influe directement sur les dimensions de ton élément.

Pour plus d'infos
Merci encore a vous 2.
j ai utilisé un niveau de titre hn avec un margin left ..
le margin right ne fonctionnant pas trop ds mon cas et j avoue que ca m a pris la tête j ai utilisé un width ...qu est ce que vous en pensez ??
bonne journée
sam/
Sujet clos
Aller à