Menu horizontal en CSS sans liste

Question

LordBatoon

21 Mar 2012 à 13:36

Bonjour à tous,

Je tente en ce moment de faire mon propre template de menu horizontal full CSS. Je suis en bon chemin mais je n'arrive pas à centrer les "boutons" de ma barre de navigation.

J'avais trouvé des templates tout fait sur internet mais après en avoir longuement étudié certains je n'arrivais jamais à faire exactement ce que je voulais. Il me semble que l'utilisation des listes (balises <ul> et <li>) complique la mise en page dès qu'on veut imbriquer plusieurs sous-catégories.

J'ai donc décidé de faire mon propre template sans utiliser de liste. Je me demande d'ailleurs si ça pose un problème d'accessibilité ou de référencement ?

Bref, en tout cas je voudrais que mes boutons soient centrés dans ma barre, mais je n'y arrive pas. Ma div 'boxCat' qui est le conteneur de mes "boutons" prend toute la longueur de la barre de navigation et je ne comprend pas pourquoi ni comment faire pour que cette div ne prenne que la taille utilisée par mes "boutons".

A mon avis mon problème vient de là si mon conteneur ne prenait que la taille de mes boutons je pourrais le centrer dans ma barre de navigation.

Qu'en pensez vous ?

Bref, j'ai essayé plusieurs solutions en vain... :aie:

Voici mon code html:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="ISO-8859-1" />
<title>Barre de menu</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection">
</head>
<body>
<div class="main">
    <div class="barre">
        <div class="boxCat">
        
            <div class="cat">
            	<a class="aCat" href="#">Cat&eacute;gorie 1</a>
                <div class="colSubCat">
                    <div class="subCatFirst"><a class="aSubCatFirst" href="#">Sous-cat&eacute;gorie 1.1</a></div>
                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 1.2</a></div>
                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 1.3</a></div>
                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 1.4</a></div>
                    <div class="subCatLast"><a class="aSubCatLast" href="#">Sous-cat&eacute;gorie 1.5</a></div>
                </div><!-- .colSubCat -->        
            </div><!-- .cat -->
            
            <div class="cat">
            	<a class="aCat" href="#">Cat&eacute;gorie 2</a>
                <div class="colSubCat">
                    <div class="subCatFirst"><a class="aSubCatFirst" href="#">Sous-cat&eacute;gorie 2.1</a></div>
                    <div class="subCat"><a class="aSubCat" href="#">Sous-cat&eacute;gorie 2.2</a></div>
                    <div class="subCatLast"><a class="aSubCatLast" href="#">Sous-cat&eacute;gorie 2.3</a></div>
                </div><!-- .colSubCat -->        
            </div><!-- .cat -->
            
            <div class="cat">
            	<a class="aCat" href="#">Cat&eacute;gorie 3</a>
                <div class="colSubCat">
                    <div class="subCatSingle"><a class="aSubCatSingle" href="#">Sous-cat&eacute;gorie 3.1</a></div>
                </div><!-- .colSubCat -->        
            </div><!-- .cat -->
            
            <div class="catSingle">
            	<a class="aCatSingle" href="#">Cat&eacute;gorie 4</a>
            </div><!-- .cat -->
            
        </div><!-- .boxCat -->
    </div><!-- .barre -->
</div><!-- .main -->
</body>
</html>

et le css qui va avec:

@charset "utf-8";
body { color:#000; background:#CCC; width:100%; }

.main { 
	background-color:#999;
	width:980px;
	height:400px;
	margin:0 auto;
}
.barre { 
	width:980px; 
	height:50px;
	margin-top:40px; 
	margin-left:0 auto; 
	margin-right:0 auto; 
	vertical-align:middle;
	position:relative;
	color:#FFF;
	font-family:Verdana, Geneva, sans-serif;
	background:#0097DB;
	border-top:1px solid #4BB0DE;
	border-bottom:1px solid #012D4B;
	background:-moz-linear-gradient(#0097DB, #044F82);
	background:-ms-linear-gradient(#0097DB, #044F82);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0097DB), color-stop(100%, #044F82));
	background:-webkit-linear-gradient(#0097DB, #044F82);
	background:-o-linear-gradient(#0097DB, #044F82);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#044F82');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#044F82')";
	background:linear-gradient(#0097DB, #044F82);
}
 .boxCat {
	margin:0 auto; 
	line-height:50px;
	height:50px;
	text-align:center;
	display:inline;
	color:#FFF;
}
.cat {
	width:174px;
	line-height:50px;
	height:50px; 
	display:inline-block;
	float:left;
	margin:0 9px 0 0;
	position:relative;
	text-align:center;
	font-size:16px;
	color:#FFF;
}
.cat:hover a.aCat {
	background:#0097DB; 
	background:-moz-linear-gradient(#0097DB, #044F82);
	background:-ms-linear-gradient(#0097DB, #044F82);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0097DB), color-stop(100%, #044F82));
	background:-webkit-linear-gradient(#0097DB, #044F82);
	background:-o-linear-gradient(#0097DB, #044F82);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#044F82');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#044F82')";
	background:linear-gradient(#0097DB, #044F82);
}
.cat:hover div.colSubCat {
	display:block;
}
a.aCat {
	width:160px;
	line-height:50px;
	height:50px; 
	display:block;
	text-decoration:none;
	color:#FFF;	
	font-size:16px;
	text-align:center;
	text-shadow:1px 1px 1px #000;
	margin:0 auto;
	position:relative;
	left:1px;
}
a.aCat:hover {
	width:160px;
	line-height:50px;
	height:50px; 
	display:block;
	text-decoration:none;
	background-color:#0271AC;
	color:#FFF;	
	font-size:16px;
	text-align:center;
	text-shadow:1px 1px 1px #000;
	margin:0 auto;
	position:relative;
	left:1px;
}
.catSingle {
	width:174px;
	line-height:50px; 
	height:50px;
	display:block;
	float:left;
	margin:0 9px 0 0;
	position:relative;
	text-align:center;
	color:#FFF;
	font-size:16px;
	text-shadow:1px 1px 1px #000;
}
a.aCatSingle {
	width:160px;
	line-height:50px;
	height:50px; 
	display:block;
	text-decoration:none;
	color:#FFF;	
	font-size:16px;
	text-align:center;
	text-shadow:1px 1px 1px #000;
}
a.aCatSingle:hover {
	width:160px;
	line-height:50px;
	height:50px; 
	display:block;
	text-decoration:none;
	background:#0097DB;
	background:-moz-linear-gradient(#0097DB, #0A609A);
	background:-ms-linear-gradient(#0097DB, #0A609A);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #0097DB), color-stop(100%, #0A609A));
	background:-webkit-linear-gradient(#0097DB, #0A609A);
	background:-o-linear-gradient(#0097DB, #0A609A);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#0A609A');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#0097DB', endColorstr='#0A609A')";
	background:linear-gradient(#0097DB, #0A609A);
	font-size:16px;
	text-align:center;
	text-shadow:1px 1px 1px #000;
}
.colSubCat {
	width:174px;
	padding-bottom:8px;
	padding-top:1px;
	display:none;
	background:#044F82;
	background:-moz-linear-gradient(#044F82, #024370);
	background:-ms-linear-gradient(#044F82, #024370);
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #044F82), color-stop(100%, #024370));
	background:-webkit-linear-gradient(#044F82, #024370);
	background:-o-linear-gradient(#044F82, #024370);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#044F82', endColorstr='#024370');
	-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#044F82', endColorstr='#024370')";
	background:linear-gradient(#044F82, #024370);
	border-top:1px solid #034F83;
	border-left:1px solid #012D4B;
	border-right:1px solid #012D4B;
	border-bottom:1px solid #012D4B;
	-webkit-border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	border-radius:0 0 5px 5px;
	color:#FFF;
	position:relative;
	top:-1px;	
}
.subCatFirst, .subCat {
	width:160px;
	height:40px;
	line-height:40px;
	display:block;
	background-color:#0271AC;
	border-bottom:2px solid #034F83;
	margin:0 auto;
	padding:0;
	cursor:pointer;
}
.aSubCatFirst, .aSubCat, .aSubCatLast, .aSubCatSingle {
	width:160px;
	height:40px;
	line-height:40px;
	display:block;
	text-decoration:none;
	color:#FFF;	
	font-size:12px;
	text-align:center;
}
.subCatLast, .subCatSingle{
	width:160px;
	height:40px;
	line-height:40px;
	display:block;
	background-color:#0271AC;
	margin:0 auto;
	padding:0;
	cursor:pointer;
	-webkit-border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	border-radius:0 0 5px 5px;
}
.aSubCatFirst:hover, .aSubCat:hover {
	width:160px;
	height:40px;
	line-height:40px;
	display:block;
	text-decoration:none;
	color:#FFF;	
	font-size:12px;
	text-align:center;
	background-color:#008FD1;
	text-shadow:1px 1px 1px #000;
}
.aSubCatLast:hover, .aSubCatSingle:hover {
	width:160px;
	height:40px;
	line-height:40px;
	display:block;
	text-decoration:none;
	color:#FFF;	
	font-size:12px;
	text-align:center;
	background-color:#008FD1;
	text-shadow:1px 1px 1px #000;
	-webkit-border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	border-radius:0 0 5px 5px;
}

Avez vous une idée de ce qui ne va pas dans mon code ?

Cordialement

Gothor

21 Mar 2012 à 13:51

Bonjour,
En rajoutant dans .barre

    text-align:center;

et en modifiant ton display dans .boxCat par

    display:inline-block;

Ca semble fonctionner...
http://jsfiddle.net/Gothor/XPaP9/2/
Modifié par Gothor (21 Mar 2012 - 13:55)

audrasjb

21 Mar 2012 à 13:59

Salut,

LordBatoon a écrit :
Il me semble que l'utilisation des listes (balises <ul> et <li>) complique la mise en page dès qu'on veut imbriquer plusieurs sous-catégories.

La structure de listes imbriquées pour un menu n'est pourtant pas si compliquée que ça, par rapport à ton amoncellement de divisions…


<ul id="menu">
     <li><a href="#">Item 1</a></li>
     <li>
          <a href="#">Item 2</a>
          <ul>
               <li><a href="#">Sous item 2.1</a></li>
               <li><a href="#">Sous item 2.2</a></li>
               <li><a href="#">Sous item 2.3</a></li>
          </ul>
     </li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
</ul>

Tu peux regarder du côté de superfish pour obtenir les effets déroulants, etc. Pour ce qui est des comportement, mieux vaut utiliser Javascript que CSS.
Modifié par audrasjb (21 Mar 2012 - 14:01)

LordBatoon

21 Mar 2012 à 14:09

Merci Gothor !!

J'avais pourtant essayé ça mais il devait y avoir un autre paramètre qui bloquait. Ca me soulage grandement !!

@audrasjb : je ne veux surtout pas utiliser du JavaScript pour cela.

audrasjb

21 Mar 2012 à 14:27

LordBatoon a écrit :
@audrasjb : je ne veux surtout pas utiliser du JavaScript pour cela.

Pourtant, c'est fait pour. Si c'est pour un défi personnel, d'accord. Sinon, je ne vois pas de raison pour justifier ce choix.

Sinon, pour revenir l'utilisation des listes ordonnées, il n'y a vraiment pas photo : tu perds toute la sémantique de ton code HTML.

gc-nomade

21 Mar 2012 à 15:39

audrasjb a écrit :

Sinon, pour revenir l'utilisation des listes ordonnées, il n'y a vraiment pas photo : tu perds toute la sémantique de ton code HTML.

il y a aussi la balise <nav> qui pourrait remplacer le div conteneur, en partant sur une structure de base genre:

<nav>
<div><hx>....
<p><a><span>...
</div>
<div>....
...
</nav>

cordialement,
GC

Sujet clos

CSS et mise en forme, CSS3

Menu horizontal en CSS sans liste