Alignement texte barre nav

Question

ramecnr

26 Nov 2013 à 13:46

Bonjour a tous,

je suis novice en création de site.

Voila j'ai crée un site pour une association sportive. Je n'arrive pas a centrer le texte de ma barre de navigation nav.

Quelqu'un peut m'aider ?

Voici l'adresse du site : cn.remois.free.fr

Mon html:

<!DOCTYPE html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="acceuili.css" />
<title>Cercle Nautique Rémois (CNR), Club d'aviron, Reims</title>
<meta name="description" Content="association aviron horaires prix sorties competitions randonnees">
<meta name="keywords" Content= "reims, aviron, remois, cnr">
<script type="text/javascript"> var clignotement = function(){ if (document.getElementById('DivClignotante').style.visibility=='visible'){ document.getElementById('DivClignotante').style.visibility='hidden'; } else{ document.getElementById('DivClignotante').style.visibility='visible'; } }; periode = setInterval(clignotement, 800); </script>
</head>

<body>
<div id="bloc_page">
<header>
<img src="image/header.jpg" alt="Cercle Nautique R√©mois" />
</header>

<nav>
<ul id="menu_horizontal">
<li><a href="index.html"class="type2"><mark> Accueil </mark></a></li>
<li><a href="resultats.html"class="type2"><mark> Résultats </mark</a></li>
<li><a href="album.html"class="type2"><mark> Albums </mark</a></li>
<li><a href="partenaires.html"class="type2"><mark> Partenaires </mark</a></li>
<li><a href="presse.html"class="type2"><mark> Presse </mark</a></li>
<li><a href="contact.html"class="type2"><mark> Contact </mark</a></li>
<li><a href="boutique.html"class="type2"><mark> Boutique </mark</a></li>

</ul>
</nav>

<article >
<a href="https://www.facebook.com/pages/Cercle-Nautique-R%C3%A9mois/630018013681881" target="_blank"> <img src="image/fanfb.jpg" alt="Clique ICI"/> </a>
<ul><span class="Menu_vertical"></span>
<li><a href="aviron.html"class="type1">L'Aviron</a><ul class="menuclub3">
<li><a href="histoire.html"class="type1">Historique</a></li>
<li><a href="bateau.html"class="type1">Les Embarcations</a></li>
<li><a href="technique.html"class="type1">La technique</a></li>
</ul></li>
<li><a href="position.html"class="type1">Où sommes-nous?</a></li>
<li><a href="competition.html"class="type1">Compétition</a>
<li><a href="universitaire.html"class="type1">Universitaires</a></li>
<li><a href="loisir.html"class="type1">Loisirs</a></li>
<li><a href="horaires.html"class="type1">Horaires d'Ouverture</a></li>
<li><a href="planing.html"class="type1">Ouvertures du mois</a></li>
<li><a href="calendrier.html"class="type1">Calendrier 2013/2014</a></li>
<li><a href="tarifs.html"class="type1">Nos Tarifs</a></li>
<li><a href="benevolat.html"class="type1">Bénévolat</a></li>
</ul>
<ul class="menuclub1">
<li>
Le club
<ul class="menuclub2">
<li><a href="couleurs.html"class="type1">Nos Couleurs</a></li>
<li><a href="installations.html"class="type1">Les installations</a></li>
<li><a href="comite.html"class="type1">Le comité directeur</a></li>
<li><a href="reglement.html"class="type1">Le réglement</a></li>
<li><a href="statuts.html"class="type1">Statuts</a></li>
<li><a href="palmares.html"class="type1">Palmarès / Records</a></li>
</ul>
</li>

</ul>
<iframe src="http://www.facebook.com/plugins/like.php?href= https://www.facebook.com/pages/Cercle-Nautique-R%C3%A9mois/630018013681881"&layout=box_count&show_faces=true&width=65&action=like&font=arial&colorscheme=light&height=65"scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:110px; margin-top:3px;allowTransparency="true"></iframe>

</article >
<aside>
<div id="DivClignotante" style="visibility:visible;"> <p class="texte1" style="color: red;"><font size=5><b>Informations </b></font></div>
<p class="texte1" style="color: black;"> Pas de Séance le vendredi 29 Novembre à 15h30, le club ouvrira à 17h50. <br/><br/>Le club sera fermé les Samedis 7 et 14 décembre au MATIN</p>----------------------------------------
<p class="texte1" style="color: red;"><b><U><font size=5>Découverte de l'Aviron :</font></U></b></p>
<p class="texte1"><a href="pdf/flyer.pdf"><img src="image/flyer.jpg" alt="Le CNR" title="Cliquez pour plus d'informations" /></a>
</aside>

<section>
<br/><noscript><a href="http://www.astwinds.com/">Texte défilant<br> d'Astwinds</A></noscript><marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()"><font size="4" color="red"face="Arial, Helvetica, sans-serif"><strong><em>Prochain événement : </em></strong><font size="4"color="blue"><strong>L'Assemblée Générale le 1er Décembre </strong></font></font></marquee>
</br></br>

<p class="texte1"><a href="image/presentation-CNR.jpg"><img src="image/presentation-CNR.jpg" alt="Le CNR" title="Cliquez pour agrandir" /></a>
</p>
<p class="texte1">
Clara JALLAT et Léa FERNANDEZ 4ème des Championnats de France Minime 2013<br/>
Accompagnées de la remplacante : Charlotte MALLET (à droite)
</p>
<p class="texte1" style="color: red;">
Club d'aviron à Reims fondé en 1876 !<br /><br />
Label école Française d'Aviron.
</p>

</section>
<footer>
Site officiel du Cercle Nautique Rémois<br />Copyright © 2013
</footer>
</body>
</html>

Mon CSS :

#bloc_page
{
width: 100%;
margin: auto;
height: 100%;
}

html, body
{
background-color: #C9D6FE ; /* Le fond de la page sera bleu */
font-family: 'Trebuchet MS', Arial, sans-serif;
width:100%;
max-width:1000px;
margin:0 auto;
height: 90%;
}

header
{
color: red ;
background-color: white ;
font-size: 25px;
text-decoration : underline;
font-style : italic;
width: 100%;
height: 170px;
border: 2px solid #140D56;
text-align: center;
}

nav
{
width: 100%;
background-color: #140D56 ;
margin-top: 5px;
height: 25px;
}

article
{ float : left;
width:21%;
z-index: 1;
border: 2px solid #140D56;
background-color: white ;
margin-top: 5px;
position: relative;

}
aside
{ float : Right;
width:24%;
background-color: white;
z-index: 1;
border: 2px solid #140D56;
margin-top: 5px;
position: relative;
height: 645px;

}

section
{
float : center;
width: 52.5%;
background-color: white ;
border: 2px solid #140D56;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 22%;

min-height: 100%;
position: relative
;

}

footer
{
width : 52.5%;
float : center;
margin-left: 22%;
height: 40px;
background-color: #140D56 ;
color : white;
position: relative;
clear:both;
border: 2px solid #140D56;
text-align: center;

}
.texte1
{
text-align: center ;
}
.texte2
{
text-align: right ;
}
.texte3
{
text-align: left;
}
mark
{
color:white;
background-color:#140D56;
}

.plop {
text-decoration: blink;
}

ul#menu_horizontal li {
display : inline;
padding : 0 0.5em; /* Pour espacer les boutons entre eux */
}
ul#menu_horizontal {
list-style-type : none; /* Car sinon les puces se placent n'importe ou */
position: relative; left:300px; top: 3px; margin: 0px; padding: 0px;}
}
a:link {

color:#140D56;
}
a:visited {
text-decoration: none;
color:#140D56;
}
a:hover {
color: red;

}
h1
{
color: red;
font-size: 29px;
text-align: center;
}
h2
{
color: red;
font-size: 24px;
text-align: center;
text-decoration : underline;
}
h3
{
color: black ;
font-size: 22px ;
text-align: center ;
text-decoration : underline;
}
h6
{
color: black ;
font-size: 8px ;
text-align: center;
}
td /* Toutes les cellules des tableaux... */
{
border: 1px solid black; /* auront une bordure de 1px */
text-align: center ;
}
th
{
border: 1px solid black; /* auront une bordure de 1px */
text-align: center ;
background-color: #E1EDFF;
}

Merci d'avance

kustolovic

Modérateur

26 Nov 2013 à 14:24

bonjour,

remplace


ul#menu_horizontal {
    left: 300px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
    top: 3px;
}

par


ul#menu_horizontal {
    list-style-type: none;
    margin: 0;
    padding: 3px 0 0;
    text-align: center;
}

Modifié par kustolovic (26 Nov 2013 - 14:24)

ramecnr

26 Nov 2013 à 14:30

merci beaucoup

Sujet clos

CSS et mise en forme, CSS3

Alignement texte barre nav