28173 sujets

CSS et mise en forme, CSS3

4 menu côte à côte + fond

bonjour, voilà le gros problème, j'ai 4 menus qui se suivent et je voudrai qu'il aient la même hauteur et que le fond soit de la même hauteur
voici le code (si ça bug pour le code c'est visible sur www.chez.com/artlab/ )
merci pour votre aide et soignez indulgent

xclear

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>
<link href="test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
  <div id="navigationtop">
  <div id="menu1"><h1><strong>menu1</strong></h1>
  <ul id="menu1">
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li> 
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li>
</ul>  </div> 
  <div id="menu2"><h1><strong>menu2</strong></h1>
    <ul id="menu2">
      <li><a href="xxxx"title="xxxx">xxxx</a></li>
        <li><a href="xxxx"title="xxxx">xxxx</a></li> 
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li>
</ul> 
  </div>
    <div id="menu3"><h1><strong>menu3</strong></h1>
    <ul id="menu3">
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li> 
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li>
<li><a href="xxxx"title="xxxx">xxxx</a></li>
</ul> 
</div>
    <div id="menu4"> 
      <h1><strong>menu4</strong></h1>
      <ul id="menu4">
        <li><a href="xxxx"title="xxxx">xxxx</a></li>
        <li><a href="xxxx"title="xxxx">xxxx</a></li>
        <li><a href="xxxx"title="xxxx">xxxx</a></li>
        <li><a href="xxxx"title="xxxx">xxxx</a></li>
        <li><a href="xxxx"title="xxxx">xxxx</a></li>
      </ul>
    </div>
  </div>
 </div>
</body>
</html>



css:

/* GENERAL*/

html, body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color:rgb(242,240,240);
}
}

/* container */
#container {
background:  transparent url(imgsite/fond00.jpg) left top  repeat-y ;
margin: 0 auto;
top:0;
padding:0;
height:770px;
width:800px;
}

/* NAVIGATION GENERALE */
#navigationtop {
background: rgb(161,8,2);
margin: 0 auto;
padding:0;
width:788px;
}
/* MENU 1*/
#menu1 {
float:left;
text-align: left;
background: red;
margin: 0px 0px 0px 0px;
padding:0;
width:170px;
}
#menu1 h1 {
margin: 0px 0px 0px 0px;
padding:0;
font:11px georgia ;
color: #333 ;
background:  transparent;
}
#menu1 ul {
text-align: left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
}
#menu1 li {
padding: 0;
}
#menu1 a {
color: #fff;
text-decoration: none;
font-size: 11px ;
}
#menu1 a:hover {
color: #ccc;
}
/* MENU 2 */
#menu2 {
float:left;
text-align: center;
background: rgb(160,220,231);
margin:0px 0px 0px 0px;
padding:0px 0px 2px 0px;
width:170px;
}
#menu2 h1 {
margin: 0px 0px 0px 0px;
padding:2px 0px 7px 0px;
font:16px georgia ;
color: #333 ;
background:  rgb(122,197,216) url(imgsite/ombre01.jpg) left bottom  repeat-x ;
}
#menu2  ul{
background: rgb(160,220,231);
text-align: left;
float:left;
list-style: none;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#menu2 li {
margin: 0px 0px 0px 10px;
padding: 0;
}
#menu2 a {
color: #333;
text-decoration: none;
font: 12px arial;
}
#menu2 a:hover {
color: #fff;
}
/* MENU 3 */
#menu3 {
float:left;
text-align: center;
background:rgb(241,199,219);
margin:0px 0px 0px 0px;
padding:0px 0px 2px 0px;
width:170px;
}
#menu3 h1 {
margin: 0px 0px 0px 0px;
padding:2px 0px 7px 0px;
font:16px georgia ;
color: #333 ;
background:   rgb(217,157,185)  url(imgsite/ombre02.jpg) left bottom  repeat-x ;
}
#menu3  ul{
background: rgb(241,199,219);
text-align: left;
float:left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
}
#menu3 li {
margin: 0px 0px 0px 10px;
padding: 0;
}
#menu3 a {
color: #333;
text-decoration: none;
font: 12px arial;
}
#menu3 a:hover {
color: #fff;
}
/* MENU 4 */
#menu4 {
float:left;
text-align: center;
background: rgb(251,213,114);
margin: 0px 0px 0px 0px;
padding:0px 0px 2px 0px;
width:170px;
}
#menu4 h1 {
margin: 0px 0px 0px 0px;
padding:2px 0px 7px 0px;
font:16px georgia ;
color: #333 ;
background:  rgb(255,186,5) url(imgsite/ombre03.jpg) left bottom  repeat-x ;
}
#menu4  ul{
background: rgb(251,213,114) ;
text-align: left;
float:left;
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0;
}
#menu4 li {
margin: 0px 0px 0px 10px;
padding: 0;
}
#menu4 a {
color: #333;
text-decoration: none;
font: 12px arial;
}
#menu4 a:hover {
color: #fff;
}

Modifié par mpop (20 Sep 2006 - 10:35)
Bonjour xclear xclear,

Comme tu n'es pas tout nouveau sur ce forum, tu n'es pas sans savoir que le code inséré sur le forum doit être entouré des balises [ code] et [ /code] (sans les espaces). Ça serait sympa d'éditer ton message (bouton d'édition en haut à droite) pour corriger ça. Merci bien. Smiley smile

De plus, le lien que tu donnes n'es pas bien formé. Je te laisse faire cette autre correction. Smiley cligne
ben je le fais mais avec safari et mac ça bug super souvent et pas seulement sur ce forum...désolé, toutes mes excuses
xclear
Bonjour,

Déjà le lien que tu donnes est mort !
Bon pour régler ce problème (il y en à d'autres)
regarde ce bout de code:

#navigationtop {
background-color: #a10802;
overflow: hidden;/* pour que ton div suive son contenu sous FF*/
margin: 0 auto;
padding:0;
width:788px;
}

#navigationtop #menu1, #navigationtop #menu2, #navigationtop #menu3, #navigationtop #menu4 {
background: green;
height: 150px;
margin-left: 5px;
}

#navigationtop #menu1 h1, #navigationtop #menu2 h1, #navigationtop #menu3 h1, #navigationtop #menu4 h1{
margin: 0px 0px 0px 0px;
padding:2px 0px 7px 0px;
font:16px georgia ;
color: #000 ;
background: #4ee300;
text-align:center;
}


Il faut que tu travailles sur ton #navigationtop qui contenant tes menus va leur transmettre "d'autorité" ses propriétés (même si tu essayes de les changer dans chaque menu : c'est l'héritage).

dans ton html:


  <div id="menu1"><h1><strong>menu1</strong></h1>

  <ul>/* élimine  id="menu1"*/


Est a modifier pour chaque menu, tu déclares 2 fois ton id menu1 ...

Pour le reste si tu as compris le système, il te reste plus qu'à le moduler selon tes besoins.

Bon courage
ghost a écrit :
Il faut que tu travailles sur ton #navigationtop qui contenant tes menus va leur transmettre "d'autorité" ses propriétés (même si tu essayes de les changer dans chaque menu : c'est l'héritage).

Pour être plus précis : certaines propriétés s'héritent (elles sont transmises aux descendants de l'élément auquel on a attribué la propriété), d'autres pas. La plupart des propriétés de mise en forme du texte peuvent s'hériter, contrairement à la plupart des propriétés de mise en forme des blocs.
Sujet clos
Aller à