Élément de positionnement sous un autre

Je ne suis pas un expert en développement web, alors veuillez m'accompagner ici. Je souhaite afficher un en-tête de style bannière pour une page dont la partie supérieure est occupée par une image de 275x116, puis une barre de menus horizontale (style utilisant des éléments ul) apparaissant à 70% du haut de la bannière .Élément de positionnement sous un autre

Comment est-ce que je configurerais ceci pour que la bannière apparaisse sous ma navigation? À l'heure actuelle, une partie du côté gauche de ma barre de menu se trouve sous l'image, mais je voudrais que ce soit le contraire si la barre de menu est au-dessus de l'image, quelque chose comme ceci:

============= <start of header> =========== 
    -------- 
    | img | 
    |  | 
    |  Horizontal menu 
    |  | 
    -------- 
    ============= <end of header> ===========

Mon css:

#header 
{ 
    background-color: green;   
    border: 0; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    width: 100%;  
    height: 120px; 
} 

#logo 
{ 
    background: green url(images/logo.png) no-repeat scroll 0 0; 
    margin: 0px 0px; 
    border: 1px solid white;  
    left: 20px; 
    top: 20px; 
    width: 275px; 
    height: 116px; 
    position: absolute; 
    z-index: -1000; 
} 

.container { 
    border:1px solid grey; 
    margin-left:auto; 
    margin-right:auto; 
    width:960px; 
}

Mon Html:

<body> 

<div id="header"> 
    <div id="logo"> 
    </div> 

    <div class="container" id="primaryNavbar"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Books</a></li> 
     <li><a href="#">Shows</a></li> 
     <li><a href="#">Movies</a></li> 
    </ul>     

    <div class="clear">&nbsp;</div>     

    </div> <!-- end of container --> 

</div> <!-- end of header --> 
</body>

Je pensais que le réglage de la position « absolue » pour l'élément de logo et d'ajouter dans un très faible z-index réaliserions cela, mais ce n'est pas le cas ici.

Des suggestions?

Source

2010-03-16 Cedar Jensen

Ajouter ces articles à vos styles existants:

#header 
{ 
    position: relative; //this will keep your absolute items inside of this container 
} 

#logo 
{ 
    z-index: 1; 
} 

.container { 
    z-index: 2; 
    position: absolute; 
} 

.container ul li { 
    float: left; 
}

Source

2010-03-16 22:03:52

Faites flotter le .container vers la gauche, positionnez-le de manière relative et déplacez-le jusqu'à ce que vous en ayez besoin.

Source

2010-03-16 22:00:04

Élément de positionnement sous un autre

Répondre

Questions connexes