28172 sujets

CSS et mise en forme, CSS3

[RESOLU] Pb. CSS menu déroulant

Bonjour,
Voilà les problèmes que je rencontre :
- Je n'arrive pas à modifier le "bloc vert du menu"
- L'interlignage pose aussi problème : Trop d'espace entre les sous menus
- Les 2 onglets "Charte du voyageur" et "Photos" restent désespérément collés (je comprends pas pourquoi).

Pour le bout de code Javascript, je savais pas trop ou le mettre : CSS HTML, même impact ou pas ???

Si quelqu'un voit la solution, je lui en serai reconnaissante Smiley smile

Voila les codes :
<style type="text/css">
#conteneur #contenu h3 {
	color: #811e2b;
	padding-left: 85px;
}
#conteneur #contenu p {
	padding-right: 55px;
	padding-left: 85px;
	margin: 0;
}
#entete {
	height: 210px;
	width: 750px;
	background-color: #FFF;
	text-align: center;
	padding-top: 5px;
}


#contenu {
	width: 750px;
	height: 400px;
	background-color: #FFF;
	text-align: center;
}
#pied_page {
	height: 35px;
	width: 750px;
	background-color: #FFF;
}
#conteneur {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	background-color: FFF;
}
body {
	background-color: #abc568;
}
.image_entete {
}
#conteneur #entete a img {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#menu {
	background-color: #FFF;
	text-align: center;
	padding-left: 25px;
	height: 50px;
}
#nav, #nav ul {
	margin: 0;
	list-style: none;
	background-color: #abc568;
	padding: 0;
	line-height: 2em;
}
#nav a {
	display: block;
	width: 9em;
	text-decoration: none;
	background-color: #859938;
	color: #403A2A;
	text-align: left;
	height: 50px;
}
#nav li {
	float: left;
	width: 6em;
}
#conteneur #menu #nav li {
	width: 6em;
}
#nav li ul {
	position: absolute;
	left: -999em;
	overflow: visible;
	width: 5em;
	line-height: 1em;
}

#nav li:hover ul {
	left: auto;
	background-color: #FFF;
}
-->
</style>



sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);


<body>
<div id="conteneur">
<div id="entete"><a href="index.html"><img src="images/logo3.jpg" width="701" height="203" alt="banniere" /></a></div>
<div id="menu">
<ul id="nav">
  <li><a href="index.html">Accueil</a></li>
  <li><a href="fichepays.html">Fiche pays</a>
    <ul>
      <li><a href="canada.html">Canada</a></li>
      <li><a href="newyork.html">New-York</a></li>
      <li><a href="carte.html">Carte</a></li>
      </ul>
  </li>
  
  <li><a href="villes.html">Circuit</a>
    <ul>
      <li><a href="niagara.txt">Niagara</a></li>
      <li><a href="stlaurent.html">Fleuve St. Laurent</a></li>
      <li><a href="ottawa.html">Ottawa</a></li>
      <li><a href="quebec.html">Québec</a></li>
      <li><a href="montmorency.html">Chutes de Montmorency</a></li>
      <li><a href="lesfamilles.html">Les Familles</a></li>
      <li><a href="montreal.html">Montréal</a></li>
      <li><a href="sejournewyork.html">New-York</a></li>
      </ul>
  </li>
  
  <li><a href="cuisine.html">Cuisine</a>
  <ul>
    <li><a href="smokedmeat.html">Smoked meat</a></li>
    <li><a href="poutine.html">La poutine</a></li>
    </ul>
  </li>
  
  <li><a href="scandales.html">Scandales</a>
  <ul>
    <li><a href="expulsioninuit.html">Expulsion Inuits vers le Grand nord</a></li>
    <li><a href="acadie.html">Génocide Acadien</a></li>
    <li><a href="hopitaux.html">Hôpitaux psychiatrique et Clergé</a></li>
    </ul>
  </li>
  
  <li class="espace"><a href="chartevoyageur.html">Charte du voyageur</a></li>
  
  <li><a href="scandales.html">Photos</a>
  <ul>
    <li><a href="images/photos/toronto/photostoronto.html">Toronto</a></li>
    <li><a href="images/photos/niagara/photoniagara.html">Chutes du Niagara</a></li>
    <li><a href="images/photos/stlaurent/photostlaurent.html">Fleuve St. Laurent</a></li>
    <li><a href="images/photos/ottawa/photoottawa.html">Ottawa</a></li>
    <li><a href="images/photos/quebec/photoquebec.html">Québec</a></li>
    <li><a href="images/photos/montmorency/photomontmorency.html">Chutes de Montmorency</a></li>
    <li><a href="images/photos/deschambault/photosdeschambault.html">Les Familles</a></li>
    <li><a href="images/photos/montreal/photomontreal.html">Montréal</a></li>
    <li><a href="images/photos/newyork1/photonewyork1.html">New-York <sup>1ère partie</sup></a></li>
    <li><a href="images/photos/newyork2/photonewyork2.html">New-York <sup>2ème partie</sup></a></li>
    <li><a href="#">En vrac</a></li>
    </ul>
  </li>
  <!-- etc. -->
  
</ul>
</div>

<div id="contenu">Placez ici le contenu</div>
       
<div id="pied_page"><a href=">Contact</a></div>
</div>
</body>
[/i][/i]
Modifié par SUMIE (02 Jan 2011 - 19:51)
Bonjour,

Pas mal de petits problèmes se sont glissés dans ton CSS... Vu que ça serait très long d'expliquer tout, voici le code CSS légèrement modifié (au niveau du menu). Je te laisse étudier le code et les commentaires que j'ai rajouté. Globalement, si tu souhaites agir sur des hauteurs d'éléments de menu tu à le choix :
- jouer sur line-height (centrer ton texte) et height (égal au line-height)
- utiliser des marges internes pour espacer tes éléments (comme ci-dessous)



<style type="text/css">
#conteneur #contenu h3 { 
    color: #811e2b; 
    padding-left: 85px; 
} 
#conteneur #contenu p { 
    padding-right: 55px; 
    padding-left: 85px; 
    margin: 0; 
} 
#entete { 
    height: 210px; 
    width: 750px; 
    background-color: #FFF; 
    text-align: center; 
    padding-top: 5px; 
} 
 
 
#contenu { 
    width: 750px; 
    height: 400px; 
    background-color: #FFF; 
    text-align: center; 
} 
#pied_page { 
    height: 35px; 
    width: 750px; 
    background-color: #FFF; 
} 
#conteneur { 
    width: 750px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: FFF; 
} 
body { 
    background-color: #abc568; 
} 
.image_entete { 
} 
#conteneur #entete a img { 
    border-top-width: 0px; 
    border-right-width: 0px; 
    border-bottom-width: 0px; 
    border-left-width: 0px; 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none; 
} 
#menu { 
    background-color: #859938; 
    text-align: center; 
    padding-left: 25px; 
    /*height: 50px;*/ 
} 
#nav, #nav ul { 
    margin: 0; 
    list-style: none; 
    padding: 0; 
    /*line-height: 2em;*/
} 
#nav a { 
    display: block; 
    /*width: 9em;*/
    text-decoration: none; 
    background-color: #859938; 
    color: #403A2A; 
    text-align: left; 
	/* Ajouts marges internes pour espacement et donc hauteur du menu (on peu biensûr raccourcir cette écriture pour optimiser le code) */
	padding-left:15px;
	padding-right:15px;
	padding-bottom:10px;
	padding-top:10px;
} 
#nav li { 
    float: left; 
    /*width: 6em; */
} 
#conteneur #menu #nav li { 
    /*width: 6em;*/
} 
#nav li ul { 
    position: absolute; 
    left: -999em; 
    overflow: visible; 
    /*width: 5em;*/ 
    /*line-height: 1em; */
} 
 
#nav li:hover ul { 
    left: auto; 
    /*background-color: #FFF;*/
	/* Ajouts */
	padding-bottom:5px;
	background-color: #859938;
} 

/* Ajouts de CSS pour le sous menu */
#nav li li { display:block; float:none;}
#nav li li a { padding:3px 15px; font-size:13px; height:auto; line-height:normal;}
--> 
</style>

Modifié par Spacedementia (29 Dec 2010 - 15:57)
Pas eu le temps de jeter un oeil. Je teste dès que possible et te tiens au courant ;o)
Sujet clos
Aller à