Centrer menu CSS
5 messages • Page 1 sur 1
Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics
-

pascal1973 - WRInaute passionné

- Messages: 982
- Inscription: Sam Sep 24, 2005 20:58
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 passionné

- Messages: 982
- Inscription: Sam Sep 24, 2005 20:58
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 .
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 passionné

- Messages: 982
- Inscription: Sam Sep 24, 2005 20:58
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
Formation recommandée sur ce thème :
Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.
Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.
Lectures recommandées sur ce thème :
- Afficher le PageRank en entier dans Firefox (barre d'outils Google)
- Google crawle les fichiers CSS
- Comment voir facilement les liens nofollow dans Firefox
- Référencement d'un site en frames
- La toolbar pour Firefox de Google
- Comment optimiser la proéminence des mots-clés
- Liens sponsorisés : XiTi mesure Google Content
- Changement de design de WRI
- Google ouvre un weblog pour mieux communiquer
- Les blogs (Search Engine Strategies 2004 - San José)
Qui est en ligne
Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités


le forum