Bonjour
Comme il est dit dans le titre j'ai un souci avec un espace créé entre les boutons d'un menu vertical.
Bien sûr avec Firefox et Opéra c'est OK mais sous IE rien à faire.
Dans la FAQ j'ai bien vu http://forum.alsacreations.com/faq/faq-58-Espaces-indesirables-sous-les-images.html , lu et surtout essayé toutes (?) les solutions proposées mais je n'y suis pas arrivé.
Il n'y a qu'avec le font-size:1px que j'arrive à supprimer cet espace mais alors là c'est le texte de mes boutons qui devient illisible.
Forcément j'oublie quelque chose quelque part mais quoi ??, je ne vois pas.
Si vous pouviez me dire où ça cloche.
Merci.
Voici le CSS
et pour le html
Modifié par pastazere (29 Apr 2007 - 15:11)
Comme il est dit dans le titre j'ai un souci avec un espace créé entre les boutons d'un menu vertical.
Bien sûr avec Firefox et Opéra c'est OK mais sous IE rien à faire.
Dans la FAQ j'ai bien vu http://forum.alsacreations.com/faq/faq-58-Espaces-indesirables-sous-les-images.html , lu et surtout essayé toutes (?) les solutions proposées mais je n'y suis pas arrivé.
Il n'y a qu'avec le font-size:1px que j'arrive à supprimer cet espace mais alors là c'est le texte de mes boutons qui devient illisible.
Forcément j'oublie quelque chose quelque part mais quoi ??, je ne vois pas.
Si vous pouviez me dire où ça cloche.
Merci.
Voici le CSS
html {
font-size: 100%;
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
font-size: .8em;
margin: 0;
padding: 0;
height: 100%;
background-color: #f5f5f5;
}
#gauche {
width: 300px;
float: left;
background: #feabab;
color: #000;
padding: 0 10px;
height: 100%;
}
#centre {
width: 160px;
float: left;
background: #000 url(ombre_rouge.png) repeat-y;
color: #fff;
text-align: center;
height: 100%;
}
#droit {
margin-left: 500px;
background: #f5f5f5;
color: #000;
font-family: "Monotype Corsiva", verdana, arial , helvetica, sans-serif;
font-size: 180%;
height: 100%;
padding-right: 5px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/* - Menu vertical- */
#menu {
width: 100px;
margin: 30px;
/*font-size: 1px;OK pour la suppression de l'espace mais les
caractères sont bien sûr illisibles */
}
#menu li a {
height: 32px;
voice-family: "\"} \"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu li a:link, #menu li a:visited {
color: #a8a8a8;
display: block;
background: url(menu.png);
padding: 8px 0 0 0;
font-family: arial;
font-weight: bold;
}
#menu li a:hover {
color: #FFF;
background: url(menu.png) 0 -32px;
color: #fff;
}
.top { margin: 0}
et pour le html
<!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">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="PSPad editor, www.pspad.com">
<title> Essai 07 </title>
<link rel="stylesheet" href="style1.css" type="text/css">
</head>
<body>
<div id="gauche"><p class="top">Largeur de 300px en float left</p>
<p> Lorem ipsum dolor sit amet consectetuer dictum habitasse sociis eget Suspendisse. Tincidunt metus auctor laoreet pede Vestibulum wisi ipsum aliquam feugiat Vestibulum. Fringilla a nec ut In nonummy neque molestie pellentesque ligula turpis. Et lorem sed et consectetuer pede congue faucibus euismod elit tempor. Turpis Cum consectetuer Quisque semper mauris felis justo cursus Nullam nulla. Ipsum neque at morbi.</p>
</div> <!-- gauche -->
<div id="centre">
<div id="menu">
<ul>
<li>
<a href="en_chantier.html">bouton1</a></li>
<li>
<a href="en_chantier.html">bouton2</a></li>
<li>
<a href="en_chantier.html">bouton3</a></li>
<li>
<a href="en_chantier.html">bouton4</a></li>
<li>
<a href="en_chantier.html">bouton5</a></li>
<li>
<a href="en_chantier.html">bouton6</a></li>
<li>
<a href="en_chantier.html">bouton7</a></li>
</ul>
</div> <!-- menu -->
<p> 160px en float left</p>
</div>
<div id="droit">
<p class="top"> marge gauche de 500px pas de largeur fixée (colonne fluide)</p>
<p>Lorem ipsum dolor sit amet consectetuer Phasellus vel Nulla consequat dui. Elit Morbi auctor Integer sagittis porttitor vel In senectus a id. Vitae at Nulla sit Ut nascetur Nullam auctor sed elit nulla. Donec enim pulvinar vitae ut Curabitur fermentum dolor In et neque. Laoreet tincidunt In sed lorem orci.</p>
</div> <!-- droit -->
</body>
</html>
Modifié par pastazere (29 Apr 2007 - 15:11)
par Florent j'ai repris ce code.
En plus, tu conserves un hack CSS affreux dont je suppose que tu ne maitrises pas les conséquences. Les hacks CSS, c'est pas bon, faut éviter. Voir la FAQ du forum à ce sujet.
, je dirai que là où j'ai dit que j'avais remplacé le code en fait je l'avais désactivé en le mettant en commentaire mais je reconnais que ce n'est pas évident à voir).
