bonjour ,
:) @calak , et j'ajouterais d'appliqué une piste ou un exemple jusqu'au bout .
Dans ton exemple , il y a quelque incoherence , rapport a l'exemple que tu cite , puis des style proposés inline-block a ul ? pour quel raison t quel navigateur ?
Puis ce qui met finalement a bas ta tentative , c'est :
float:left /*ou right d'ailleurs */;
Quelque soit la valeur display attribué , le float l'emporte toujours , donc adieu l'alignement vertical ... essai donc de flaire flotter 2 images cote de hauteur differentes et de les alignées verticalement 'naturellement' ... impossible si elle flottent .
Je me suis permis de reprendre ton exemple :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu horizontal - Centrage Vertical</title>
<style type="text/css">
* {
margin: 0;
padding:0;
}
body {
background-color:#abc;
}
ul#menubar {
[b]width: 100%;
display: inline-block;
margin:auto; */ pourquoi pas block ou 1 table de base */[/b]
list-style-type: none;
border-bottom:2px solid #def;
}
ul#menubar, ul#menubar li a {
background-color: #369;
}
ul#menubar li {
[b]display:table;
float: left; :* un cell convient , pourquoi float ? */
/* ne pas non plus oublier l'alignement vertical */[/b]
}
ul#menubar li a {
display: table-cell;[b]/*double emploi peut-etre .? */[/b]
width:70px;
height:50px;
font-weight:bold;
vertical-align:middle;
font-family: Georgia, Tahoma, sans;
text-align:center;
text-decoration: none;
color:#fff;
border-bottom:5px solid #369;
}
ul#menubar li a:hover {
color: #fd8;
border-bottom-color: #def;
background-color: #456;
}
/* ////////////////// menubar2 //////////////////////////*/
h1 , h2 {clear:both}
ul.menubar2 {
display:block;
list-style-type: none;
border-bottom:2px solid #def;
/*text-align:center; ne fonctionnera pas sur FF2 */
}
ul.menubar2, ul.menubar2 li a {
background-color: #369;
}
ul.menubar2 li {
display:table-cell;
/* display:inline-block; ff3 etc ... */
vertical-align:middle;
}
ul.menubar2 li a {
display: table-cell;
/* display:inline-block; ff3 etc ... */
width:70px;
font-weight:bold;
vertical-align:middle;
font-family: Georgia, Tahoma, sans;
text-align:center;
text-decoration: none;
color:#fff;
border-bottom:5px solid #369;
}
ul.menubar2 li a:hover {
color: #fd8;
border-bottom-color: #def;
background-color: #456;
}
div.menubar2 {
border-bottom:2px solid #def;
background-color: #369;
text-align:center;
}
.menubar2 .menubar2 {
display:table;
margin:auto;
background:none;
border:none;
}
</style>
<!--[ if IE]>
<style type="text/css">
ul#menubar li, ul#menubar li a , ul.menubar , ul.menubar2 li, ul.menubar2 li a {
display:inline;
zoom:1;
[b]vertical-align:middle;/* ne pas oublier l'alignement */[/b]
}
</style>
<![ endif] -->
</head>
<body>
<h1>TEST BON/PAS BON </h1>
<h2>Info mal appliqué + float qui annule toute tentative de centrage horizontal</h2>
<ul id="menubar">
<li><a href="#">Un test</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Un long menu</a></li>
</ul>
<h2>ejection du float qui annhile le display; , reprise de la technique proposé</h2>
<ul class="menubar2">
<li><a href="#">Un test</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Un long menu</a></li>
</ul>
<h2>ajout d'un conteneur parent pour un centrage horizontal</h2>
<div class="menubar2">
<ul class="menubar2">
<li><a href="#">Un test</a></li>
<li><a href="#">Foo</a></li>
<li><a href="#">Bar</a></li>
<li><a href="#">Un long menu</a></li>
</ul>
</div>
</body>
</html>
Cela ne regleras pas tout a fait le probleme , car la difficulté qui va apparaitre sera de dessiné les bordures verticales dans IE .
En utilisant une technique de fausses colonnes (images de fond reproduisant les colonnes visuellement) , il y aura alors , une possibilité eventuel de s'en sortir .
Ce genre de possibilité ou d'exercice peut-etre mis en oeuvre dans le cas ou l'on a pas d'autre choix (modification du source impossible pour de multiples raisons possibles) , sitot que l'on a accsés au code source et la possibilité de le modifier , pourquoi se lancer dans une mise en forme approximative quand le serveur pourra produire un tableau bien solide ?
.
Certes ce forum est dédié a l'html/css et pas les scripts serveurs ....
Cordialement , Gcyrillus
Manque parfois la previsualisation dans l'edition , sitot que ça cafouille un peu avec le bb code , et son 'auto-correction ' ça devient penible Modifié par gcyrillus (21 Oct 2008 - 14:31)
