28173 sujets

CSS et mise en forme, CSS3

[resolu] Image decoupee pour menu et espace non desiré

Bonjour a tous,
Et oui encore moi Smiley smile

Je suis en train de faire un site pour un ami, j'ai donc creer un fichier css externe.
Le probleme est que mes images ont un ecart entre elle et je ne vois absolument pas d'ou viens le problème (sans doute une petite chose que je ne vois pas, je presice que je debute dans le css donc cela viens peut etre de la Smiley decu

Vous pouvez voir le site a cette adresse pour voir les lignes qui ce trouve entre les images du menus.
http://users.11vm-serv.net/cybercodes/accueil.htm

On m'a parler de faire un display : block, mais je ne comprend vraiment pas comment le placer, et quand je le place dans le css 'menugauche" soit il y a encore des ecarts mais non egal ou alors il superpose les images ,celon la hauteur que je mes .

Voici le fichier.css


body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 0.9em;
margin: 0;
padding: 0;
background-color: #000000;
}
#header {
height: 123px;
background-color: #75064a;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
top : 30px;
border-style:solid;
border-width:3px;
border-color:#de068d;
margin-left: -375px;
background-color:#550536;
}
#centre {
background-color:#550536;
margin-left: 150px;
height: 420px;
width: 600px;
overflow: auto;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}

.menugauche {
list-style-type: none;
margin: 10;
padding:0;
border-style:solid;
border-width:1px;
border-color:#de068d
}
.menugauche li {
margin-bottom: 0px;
}
.menugauche a {
margin: 0 0px;
color: #ffffff;
text-decoration: none;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}

a:link { color: #f655b2; text-decoration: none; font-size:0.9em; }

a:visited { color: #f655b2; text-decoration: none; font-size:0.9em; }

a:active { color: #f655b2; text-decoration: none; font-size:0.9em; font-family: }

a:hover { color: #FEADC9; text-decoration: none; font-size: 0.9em; font-family: }


Et voici une page du site


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Liens Buztattoo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="fichier.css">
</head>

<body>

<div id="conteneur">

     <div id="header"><img src="images/banniere.jpg">

</div>

     <div id="gauche">
         
        <ul class="menugauche">
        <li><a href="accueil.htm"><img src="images/accueil.jpg" border="0" alt="Accueil"></a></li>
        <li><a href="tattoo.htm"><img src="images/tattoo.jpg" border="0" alt="tattoo"></a></li>
        <li><a href="piercing.htm"><img src="images/piercing.jpg" border="0" alt="piercing"></a></li>
        <li><a href="galleries.htm"><img src="images/galleries.jpg" border="0" alt="galleries"></a></li>
        <li><a href="soins.htm"><img src="images/soins.jpg" border="0" alt="soins"></a></li>
        <li><a href="news.htm"><img src="images/news.jpg" border="0" alt="news"></a></li>
        <li><a href="liens.htm"><img src="images/liens.jpg" border="0" alt="liens"></a></li>
        <li><a href="contact.htm"><img src="images/contact.jpg" border="0" alt="contact"></a></li>
        </ul>
        
     </div>
    
     <div id="centre">
    <div style="margin-left: 30px;" align="justify">
<font color="#5CCBFF">
    <p>Bienvenue sur le site de Buz, de chez Belgium Urban Zone.<br>
    Vous y trouverez une section tattoo et piercing ainsi qu'une gallerie avec ses differents projets.</p>
    </div>
</div>
    

</body>
</html>

Modifié par cybercodes (18 Mar 2006 - 21:29)
Salut,

Peut-être en commencant ta CSS par :

* {margin:0px; padding:0px;}

ainsi toutes les marges par défaut seront mises à zéro il ne restera que les marges que tu a expilicitement définies.
Salut epheuer, merci de t'interesser a mon probleme Smiley smile

J'avais deja essayer cette solution en fait et cela ne change rien, je comprend vraiment pas
Bonjour cybercodes,

Rajoutes ce code dans ta CSS :

ul.menugauche img {
display: block;
}


Le problème que tu rencontres est très bien expliqué dans le livre de Jeffrey Zeldman "Design web : Utiliser les standards".

a écrit :
Tous les éléments apparaissant au fil du texte, tel que le texte lui même, repose sur une ligne de base (ou ligne d'écriture) qui permet de prévoir de la place pour les boucles descendantes des lettres telles que "y", "g", "q", "p"...


a écrit :
Dans le mode Standards de Gecko, les images affichées au fil du texte sont toujours dotées d'un espacement pour les boucles descendantes du bloc parent, que celui-ci contienne ou non du texte.


<img> est une balise "en ligne" (inline), à ce titre elle se comporte comme du texte et repose donc comme ce dernier sur cette fameuse ligne de base qui prévoit un espacement.

Voilà qui explique les espaces entres les images de ton menu.

A+ Smiley cligne
Un grand merci a toi coingpomme, car on m'avais bien mi sur la vois du display : block ,mais je ne trouvais rien sur cela , du moins a propos des images.

Et merci pour les petites explications Smiley biggrin
Sujet clos
Aller à