Probleme menu horizontal xhtml/css [Résolu/Fermé]

Signaler
-
 leomat -
bonjour,
bonjour à tous.
bon j'suis nouveau sur ce site, et débutant en xhtml et css.
j'ai beau suivre les tutos, je ne trouve pas mon erreur.

mon code css


.enveloppe
{

width:100%;

color:black;
font-family:"calibri","comic sans ms";
background-color:rgb(255,255,255);
font-size:100%;

margin:auto;
background-image:url(back2.png);
background-repeat:repeat;
}
.banniere
{

background-image:url(design2.jpg);
width:auto;
height:110px;
background-attachment:scroll;
background-repeat:no-repeat;
margin:0;
}

.titrePrincipal
{

color:white;
/*text-shadow: #000000 2px -2px 2px;*/
font-family:"Book antiqua";
text-align:center;

}
.sousTitre
{
padding-top:7.5%;
color:rgb(20,100,200);
text-indent:2%;
font-style:italic;
font-weight:normal;
font-size:135%;
padding-bottom:100px;
}
.liens
{
background-image:url(liensBleus2.png);
font-weight:bold;
height:27px;
border-style:solid;
border-width:thin;
border-color:rgb(80,80,80);

}
.liens ul
{
font-size:90%;
padding-left: 0;
margin-left: 0;
height: 100%;
}

.liens ul li
{
text-align:center;
list-style: none;
display: inline;
}

.liens ul li a
{
text-align:center;
color:white;
text-decoration: none;
float:left;
padding-right:2%;
padding-left:2%;
width:10%;
padding-top:0px;
}

.liens ul li a:hover
{
background-image:url(liensBleusHover2.png);
display:block;
text-align:center;
color:white;
text-decoration: none;
float: left;
padding-right:2%;
padding-left:2%;
width:10%;
}




.blocAccueil
{
color:black;
font-family:"calibri", "arial narrow";
font-size:85%;
width:75%;
background-color:white;
margin-left:auto;
margin-right:auto;
text-indent:2%;
-moz-border-radius : 2% 2% 2% 2%;

}

.blocAccueil p
{
margin-left:2%;
padding-bottom:2%;

}
.blocAccueil a
{
text-decoration:underline;
font-style:normal;
font-weight:normal;
color:black;
}
#welcome
{
padding-top:3%;
font-size:300%;
font-weight:bold;
font-family:"BrockScript";
text-align:center;
}
h3
{
text-indent:4%;
font-size:150%;
text-decoration:underline;
font-family:"Comic Sans MS";
color:rgb(80,90,180);

}
.blocBas h6
{
text-align:center;
vertical-align:text-bottom;
color:white;

color:white;
}
.pucesAccueil span
{
font-style:italic;
}
.pucesAccueil li
{
list-style:square;
}



et mon code html

<body>
<div class="enveloppe">

<div class="banniere">
<!-- <h1 class="titrePrincipal"> Project Website </h1> -->
<h2 class="sousTitre">Don't try to copy, it's impossible...</h2>
</div>
<div class="liens">
<ul>
<li><a href="main.htm" title="Home Page">Home Page</a></li>
<li><a href="techniquesXhtml.htm" title="XHTML Process">XHTML Process</a></li>
<li><a href="curriculumVitae.htm" title="Curriculum Vitae">Curriculum Vitae</a></li>
<li><a href="hobbies.htm" title="Hobbies">Hobbies</a></li>
<li><a href="liens.htm" title="Useful links">Useful links</a></li>
<li><a href="contact.htm" title="Contact">Contact</a></li>

</ul>
</div>

<div class="blocAccueil">
<h2 id="welcome"> Welcome !</h2>
<h3>What's that site?</h3>
<p class="texteAccueil">

Ce site va simplement me permettre d'approfondir
mes connaissances en XHTML. <br/>
Il est pour le moment sous la forme de prototype
donc n'hésitez pas à me faire part de vos impressions. </p>
<h3>Que trouverez-vous sur ce site ? </h3>
<div class="pucesAccueil">
<ul>
<br/>
<li> <span id="TechniqueHtml"> Une technique du XHTML expliquée en détails <br/></span></li>
<li> <span id="CV">Mon CV<br/></span> </li>

<li> <span id="Hobbies">Mes hobbies<br/></span></li>
<li> <span id="Liens">Quelques liens utiles<br/></span></li> <!-- liens: deviantart, w3c, dhnet, netlog, wikipedia, site du zero, ... -->
<li> <span id="Email">Mon adresse E-Mail<br/></span></li>
</ul>
</div>
<p>
Toutes les critiques ne seront pas acceptées, mais vous pouvez quand meme tenter votre chance
en m'envoyant un mail via la rubrique <span class="lienAccueil"><a href="contact.html" title="Contact"> "Contact" <br/> <br/> </a></span>
Les propos racistes et injurieux ne seront pas pris en compte. <br/>
Boulets et flamands s'abstenir. <br/> <br/>
D'avance merci.
</p>
</div>

<div class="blocBas">
<h6 class="texteBas">Copyright © 2007-2008 LeOmAt -- Don't try to copy, it's impossible</h6>
</div>

</div>
</body>

voila en fait j'ai ca comme resultat
https://imageshack.com/


j'aimerais que le cadre prenne bien toute la hauteur de la barre prévue pour ca. vous me suivez? lol

qqn pourrait m'aider? en plus c'est un projet pour l'ecole :s
merci beaucoup

2 réponses

Messages postés
5124
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
5 mai 2021
2 743
Bonjour et bienvenue,

Essaye comme ça
.liens { 
  background-image:url(liensBleus2.png); 
  font-weight:bold; 
  height:27px; 
  line-height:27px; 
  border-style:solid; 
  border-width:thin; 
  border-color:rgb(80,80,80); 
  } 
.liens ul { 
  font-size:90%; 
  padding: 0; 
  margin: 0; 
  } 

.liens ul li { 
  text-align:center; 
  list-style: none; 
/*  display: inline; */
  } 

.liens ul li a { 
  display:block; 
  text-align:center; 
  color:white; 
  text-decoration: none; 
  float:left;
  padding-right:2%; 
  padding-left:2%; 
  width:10%; 
  padding-top:0px; 
  } 

.liens ul li a:hover { 
  background-image:url(liensBleusHover2.png); 
  }
et n'abuse pas des %.


++
Merci d'utiliser le bouton Code pour présenter le vôtre.

--
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

la je suis heureux lol ca marche :d merci bcp de ton aide.
a bientot