Aide - Recherche - Membres - Calendrier
Version complète : Problème d'image float left dans un menu
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
Guizbizet
Je pense que le titre est explicite surtout avec la capture suivante cf fichier joint

voici mon code html
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<head>

<title>Menu GuizMo</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<link href="GuizMoTest.css" rel="stylesheet" type="text/css">

</head>



<body>

<h1>Accueil</h1>

<ul class="menu">

<li><img class="gauche" alt="" src="boussole.bmp" /><a href="">Accueil</a></li>

<li><a href="">Contact</a></li>

</ul>

<h1>Sixtine</h1>

<ul class="menu">

<li><a href="">Nouvelles</a></li>

<li><a href="">Graphiques</a></li>

<li><a href="">Albums Photos</a></li>

</ul>

<h1>Albums Photos</h1>

<ul class="menu">

<li><a href="">Sixtine</a></li>

<li><a href="">Notre mariage</a></li>

<li><a href="">Autres albums</a></li>

</ul>

<h1>Liens Divers</h1>

<ul class="menu">

<li><a href="">Informatique</a></li>

<li><a href="">Chants</a></li>

<li><a href="">Voile</a></li>

<li><a href="">Chasse à courre</a></li>

</ul>

<h1>Lieux préférés</h1>

<ul class="menu">

<li><a href="">Val-André</a></li>

<li><a href="">St Quay Portrieux</a></li>

<li><a href="">La Croslaie</a></li>

</ul>

<h1>Nos voyages</h1>

<ul class="menu">

<li><a href="">La Crête - Juil 02</a></li>

<li><a href="">La Tunisie - Mars 03</a></li>

</ul>

<h1><a href="">Téléchargements</a></h1>

<h1><a href="">CV</a></h1>

</body>

</html>


et le css
CODE
/* Mise en forme des pages */



* { padding: 0; margin: 0; }



/* Le menu */



.menu {

width: 150px;

font-size: 8pt;

font-family: Verdana, Arial, Helvetica, sans-serif;

}



.menu ul, .menu li {

list-style-type: none;

}



.menu li a {

text-decoration: none;

display: block;

background-color: #3399FF;

color: white;

font-weight: normal;

height: 17px;

line-height: 17px;

}



.menu li a:hover {

text-decoration: none;

display: block;

background: #003399;

color: white;

font-weight: normal;

}



h1 {

width: 150px;

height: 20px;

line-height: 20px;

margin-top: 5px;

border: 1px dashed #0099FF;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 8pt;

color: #0099FF;

text-align: center;

}



h1 a {

text-decoration: none;

color: #0099FF;

}



h1 a:hover {

text-decoration: none;

color: #0099FF;

}



h1 a:visited {

text-decoration: none;

color: #0099FF;

}



.gauche {

float: left;

}


Si quelqu'un peut m'aider et surtout m'expliquer ce qui ne va pas ce serai super biggrin.gif :wink:
Fred
Salut,

Je n'obtiens pas du tout la même capture sous firefox et IE que la tienne.

Toujours est-il que tu n'as pas besoin de définir un float:left pour ton image.

Ceci doit suffire :

CODE
<li><a href=""><img  alt="" src="boussoule.bmp" /> Accueil</a></li>
Guizbizet
Merci snoop,

la soluce que tu me donne ne marche pas mais depuis j'ai résolu mon problème

la solution est sur cette page

merci quand même
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2009 Invision Power Services, Inc.