Centrer menu CSS
5 messages
• Page 1 sur 1
-

pascal1973 - WRInaute impliqué

- Messages: 982
- Inscription: 24 Sep 2005
Centrer menu CSS
Bonjour , je voudrais centrer ce menu CSS mais j'y arrives
Afin que celui ne soit non aligné à gauche mais réellement centré .
/*Code du menu horizontal souligné*/
#underlinemenu{
margin: 0;
padding: 0;
}
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-center: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}
/*règle pour IE. Supprime la marge extra basse*/
* html #underlinemenu ul{
margin-bottom: 0;
}
#underlinemenu ul li{
display: inline;
}
/*Les liens tels que vous voulez qu'ils apparaissent*/
#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
/*image de séparation des rubriques avec son adresse*/
background: white url(menudivide.gif) top right repeat-y;
}
/*Ici, c'est pour le configurer le survol des liens*/
#underlinemenu ul li a:hover{
color: red;
background-color: #F3F3F3;
border-bottom: 4px solid red;
padding-bottom: 0;
}
Code html :
<div id="underlinemenu">
<ul>
<li><a href="#" title="Accueil">Accueil</a></li>
<li><a href="#" title="Bibliothèque">Livres</a></li>
<li><a href="#" title="Nouveautés">Nouveau</a></li>
<li><a href="#" title="Actualités">Actualités</a></li>
<li><a href="#" title="Pour vous">Outils</a></li>
<li><a href="#" title="Voir les forums">Forums</a></li>
</ul>
</div>
Un coup de pouce serait le bienvenue
Merçi .
+++
Afin que celui ne soit non aligné à gauche mais réellement centré .
/*Code du menu horizontal souligné*/
#underlinemenu{
margin: 0;
padding: 0;
}
#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-center: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}
/*règle pour IE. Supprime la marge extra basse*/
* html #underlinemenu ul{
margin-bottom: 0;
}
#underlinemenu ul li{
display: inline;
}
/*Les liens tels que vous voulez qu'ils apparaissent*/
#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
/*image de séparation des rubriques avec son adresse*/
background: white url(menudivide.gif) top right repeat-y;
}
/*Ici, c'est pour le configurer le survol des liens*/
#underlinemenu ul li a:hover{
color: red;
background-color: #F3F3F3;
border-bottom: 4px solid red;
padding-bottom: 0;
}
Code html :
<div id="underlinemenu">
<ul>
<li><a href="#" title="Accueil">Accueil</a></li>
<li><a href="#" title="Bibliothèque">Livres</a></li>
<li><a href="#" title="Nouveautés">Nouveau</a></li>
<li><a href="#" title="Actualités">Actualités</a></li>
<li><a href="#" title="Pour vous">Outils</a></li>
<li><a href="#" title="Voir les forums">Forums</a></li>
</ul>
</div>
Un coup de pouce serait le bienvenue
Merçi .
+++
-

pascal1973 - WRInaute impliqué

- Messages: 982
- Inscription: 24 Sep 2005
fra_arf a écrit:Tu peux pas rajouter un DIV ??
Tu lui mets un padding-left de je sais pas 200px par exemple enfin tu tests de manière à le voir aligner.
Desfosi faut pas trop se prendre la tête ou sinn t as le lien qu'on voit ?
Salut , je maitrise pas le CSS ...
Cordialement .
-

fra_arf - WRInaute impliqué

- Messages: 508
- Inscription: 22 Nov 2005
Ton menu est comme ça :
Avant ton menu tu rajoutes un <div class="centremenu"> comme ceci et à la fin </div>
et ton nomme une class centremenu dans ton fichier css comme ça :
Après tu joues avec le width: 900px; ou tu l'enlève si il gène et surtout le plus important tu joues avec le padding-left:130px; tu agrandit ou diminue pour obtneir le résultat voulu.
- Code: Tout sélectionner
<div id="underlinemenu">
<ul>
<li><a href="http://www.buddapass.com" title="Annuaire référencement internet">Liens en dur</a></li>
<li><a href="http://www.buddapass.com/allcategs.php" title="Catégories de l'annuaire">Catégories</a></li>
<li><a href="http://www.buddapass.com/echanges-de-liens-en-dur.php" title="Echanges de liens en dur , idp ">Echange de lien</a></li>
<li><a href="http://www.buddapass.com/faireunlien.php" title="Netlinking , faire un lien retour">Faire un lien</a></li>
<li><a href="http://www.buddapass.com/liens.php" title="Annuaires de référencement web">Liens</a></li>
<li><a href="http://www.buddapass.com/submit_site.php" title="Référencer un site">Référencement</a></li>
<li><a href="http://www.buddapass.com/top_mots.php" title="Tag cloud , trend , mots clés">Tags cloud</a></li>
<li><a href="http://www.buddapass.com/top_clics.php" title="Top clics , sites populaires">Top clics</a></li>
<li><a href="http://www.buddapass.com/top_votes.php" title="Top des votes , top rating">Top votes</a></li>
</ul>
</div>
Avant ton menu tu rajoutes un <div class="centremenu"> comme ceci et à la fin </div>
et ton nomme une class centremenu dans ton fichier css comme ça :
- Code: Tout sélectionner
.centremenu { float:left;
width: 900px;
margin:0;
padding:0;
padding-left:130px;
}
Après tu joues avec le width: 900px; ou tu l'enlève si il gène et surtout le plus important tu joues avec le padding-left:130px; tu agrandit ou diminue pour obtneir le résultat voulu.
-

pascal1973 - WRInaute impliqué

- Messages: 982
- Inscription: 24 Sep 2005
Super merçi cela fonctionnes
Mais par contre comment virer les 2 lignes du menu à droite ? ( qui deborde de celui çi )
+++
J'ai réussi j'ai virer cela :
border-width: 1px 0;
Merçi à toi
+++
Mais par contre comment virer les 2 lignes du menu à droite ? ( qui deborde de celui çi )
+++
J'ai réussi j'ai virer cela :
border-width: 1px 0;
Merçi à toi
+++
5 messages
• Page 1 sur 1
Lectures recommandées sur ce thème :
- [css] Comment centrer un bloc css?
- centrer menu horizontal deroulant
- Centrer un site en css?????
- CSS : centrer un div
- Centrer une image en CSS
- probléme pour centrer en CSS
- Etirer + Centrer un site en css.
- Menu horizontal avec sous menu et image en CSS
- [CSS] Centrer un contenu de balise verticalement ?...
- CSS : Centrer un bloc en position:absolue
Qui est en ligne
Utilisateurs parcourant ce forum: Exabot [Bot] et 1 invité
