Forum Développeur - Administration serveur, programmation et base de données

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

Mar 10 2005, 02:47 PM

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

:wink:

Fred

Mar 11 2005, 10:06 AM

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

Mar 11 2005, 01:55 PM

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.