28173 sujets

CSS et mise en forme, CSS3

Padding et <a> mis en block

BOnjour,

Comment faire pour donner un padding a ma liste horizontale qui est en display: block et en float: left. quand je donne un padding alors le block se tasse....
regarder

Objectif: Mettre un padding de 3 a 4 pixel à gauche du texte. Pour qu'il ne soit pas completement à gauche.

Image upload/4442-exemple.jpg 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<style type="text/css" media="all">
body{
   font-size: 76%;
}
#navcontainer{
width: 450px;

background: lime;
}

#navlist
{
margin-left: 0;
padding-left: 0;

}

#navlist li
{
float: left;
list-style-type: none;
}

#navlist a {
display: block;
width: 89px;
height: 14px;
padding: 0px 0px 0px 0px; /* rajouter un padding ici et le menu va etre décaler */
margin: 0px 0px 0px 1px;
background: red;


 }

.clear:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


</style>
</head>

<body>


<div id="navcontainer">
   <ul id="navlist" class="clear">
      <li><a href="#">Item one</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item three</a></li>
      <li><a href="#">Item four</a></li>
      <li><a href="#">Item five</a></li>
   </ul>
</div>



</body>
</html>


merci
Modifié par bensti2 (15 Feb 2006 - 18:44)
J'ai trouver ma solution mais je ne sais pas si c'Est vraiment la bonne .. c'est un peu de bidouillage. Mais j'ai comme directive un menu de 89px de large.... il n'a pas 89 px de large dans le code mais au visuel il l'a... QU'en pensez vous? Et pourquoi cela se produit-il?

J'enleve 4 pixel a la largeur de mon <a> en block et je le rajoute au padding de celui si:

Avant

#navlist a {
display: block;
width: 89px; 
height: 14px;
padding: 0px 0px 0px 0px; 
margin: 0px 0px 0px 1px;
background: red;
}


Après

#navlist a {
display: block;
width: 85px; /* -4px */
height: 14px;
padding: 0px 0px 0px 4px; /* +4px */
margin: 0px 0px 0px 1px;
background: red;
}
Sujet clos
Aller à