28172 sujets

CSS et mise en forme, CSS3

[Résolu] Disparition inexpliquée d'un bandeau

Bonjour,

Ca fait 2 jours que je me frappe la tête sur mon bureau pour essayer de démagnétiser ce code mais là je cale, j'ai vraiment besoin d'un coup de main de connaisseurs.

Le soucis c'est simple : j'ai créé un "site" avec un menu horizontal déroulant et un fond d'écran "extensible".
Pour faire un effet de menu en "bandeau", je répète le bouton de menu sur toute la largeur de l'écran.

http://img15.hostingpics.net/pics/85355431OK.jpg

J'ai d'abord mis cette répétition dans le body et tout était beau mais quand j'ai du intégrer le fond d'écran, je ne pouvais plus le garder dans le body et l'ai donc balancé dans un table.
Le problème c'est que maintenant j'essaye de le détacher du table mais lorsque je supprime le table, ça repart en cacahuètes ; mon bandeau disparaît !!

http://img15.hostingpics.net/pics/363899PasOK.jpg

Je ne comprends d'autant pas que le bandeau n'est plus affecté à table mais à un div.

Voici les codes :

HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Site test</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<img id="fond" src="images/fond.jpg" />

<div class="bandeau">
	<table width="100%" cellpadding="0" cellspacing="0" border="0">


<ul>

<li class="jet"> &nbsp;</li>

 <li class="prems"><div class="pageActive">ITEM 1</div></li>
  <li class="gauche"><a href="#">ITEM 2</a>
 <ul>
      <li><a href="#">SOUS-ITEM 1</a></li>
      <li><a href="#">SOUS-ITEM 2</a></li>
    </ul>
    </li>
 <li class="gauche"><a href="#">ITEM 3</a>
 <ul>
      <li><a href="#">SOUS-ITEM 1</a></li>
      <li><a href="#">SOUS-ITEM 2</a></li>
    </ul>
    </li>
     <li class="gauche"><a href="#">ITEM 4</a></li>
 <li class="droite"><a href="#">ITEM 5</a></li>
</ul>

	</table>
    
</div>

</body>
</html>


CSS :
@charset "utf-8";

body {margin: 0;
padding:0;
width:100%;
height:100%;

 }

	

 
#fond {
	z-index:-1;
    width : 100%;
    height: 100%;
	position:fixed;
} 
.bandeau {
	background:#e3f3f2 url(../images/bouton.jpg) center top repeat-x;
	min-width:1040px;
	}

 

/*#espace_jet{ padding-right:10px; vertical-align:middle;}*/
ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
.pageActive {line-height: 46px; width: 120px; text-align:center; text-decoration: none; color:#FFFFFF; background: url(../images/bouton_selected.jpg) repeat-x; font-weight:bold;}
ul li a {
 display:block;
  
 width:120px;
 line-height:46px; /*hauteur de l'image de fond*/
 
 color:#FFFFFF; /*couleur du texte du menu*/
 text-decoration:none;
 font-weight:bold;
 text-align:center;
 }
ul li.droite a:hover {
 background:url(../images/evaa_survol.jpg) repeat-x;
 }
ul li.gauche a:hover {
 background:url(../images/bouton_survol.jpg) repeat-x;
 } 
ul li.prems a:hover {
 background:url(../images/bouton_survol.jpg) repeat-x;
 }
ul li.droite {float:right; border-left:1px solid black; border-right:1px solid black; background:url(../images/bouton.jpg) repeat-x; margin-right:10px;}
ul li.gauche {float:left; border-right:1px solid black; background:url(../images/bouton.jpg) repeat-x;}
ul li.prems {float:left; border-left:1px solid black; border-right:1px solid black; background:url(../images/bouton.jpg) repeat-x;}

ul li.jet {float:left; margin-left:36%; padding-left:10px; line-height:46px; width:35px;}

ul li ul {
 display:none;
 }
 li:hover ul {
 display:block;
 }
 li:hover ul li {
 float:none;
 border-left:1px solid black; border-right:1px solid black;
 }
 li ul {
 
 position:absolute;
 }
 li{
	 background:url(../images/bouton.jpg) repeat-x; 
	 }


Merci de prendre le temps de bien vouloir m'aider. Smiley rolleyes
Modifié par black_layer (06 Feb 2013 - 16:41)
que ne comprenez-vous pas ? j'essaye de supprimer ce table qui est inutile mais c'est justement le problème ; lorsque je l'enlève mon "bandeau menu" devient tout moche...

Ce que je veux c'est comprendre pourquoi et résoudre ce problème !
Sujet clos
Aller à