Centrage des boîtes à l'aide de CSS

Question

J'essaie de transformer une mise en page que j'ai créée en une page Web en HTML + CSS.

La mise en page ressemble à ceci: image

Je veux que le div noir central (avec une largeur fixe) être centrée alors que le menu doit rester à sa gauche et remplir tout le côté gauche de l'écran, comme le montre au dessus.

Le problème est que je ne peux pas comprendre comment styliser le menu pour remplir tout le côté gauche pour obtenir l'effet de survol affiché dans l'image.

Merci beaucoup.

Answer 1

Vous le faites en laissant le menu remplir toute la largeur, et en plaçant l'élément logo noir sur le dessus.

<div id="menu"> 
    <div id="centered_wrapper"> 
    <div id="logo"></div> 
    </div> 
    <ul> 
    <li><a href="#">&gt; home</a> 
    <li><a href="#">&gt; azienda</a> 
    <li><a href="#">&gt; lavorazioni</a> 
    <li><a href="#">&gt; contattaci</a> 
    </ul> 
</div> 

Avec quelque chose CSS comme ceci:

body, html { 
    margin: 0; 
    background: #494848; 
} 
#menu { 
    margin-top: 150px; 
    height: 250px; 
    background: #3a3a3a; 
} 
#menu ul { 
    margin: 0; 
    padding: 140px 0 0; 
} 
#menu li { 
    margin: 0; 
    list-style: none; 
    padding: 5px; 
} 
#menu li:hover { 
    background: #4c4c4c; 
} 
#menu li a { 
    display: block; 
    width: 550px; 
    margin: 0 auto; 
    color: #fff; 
    text-decoration: none; 
} 
#centered_wrapper { 
    width: 0; 
    margin: 0 auto; 
    position: relative; 
} 
#logo { 
    position: absolute; 
    height: 250px; 
    width: 350px; 
    margin-left: -175px; // half of width 
    background: #000; 
    z-index: 1; 
} 

Vous remarquerez que: hover effet des éléments de menu sera également affiché sur le côté droit. Ceci vous permet de corriger en appliquant une image de fond non répétitive, positionnée à 50% sur l'axe horizontal. La moitié de l'image est transparente, la moitié de l'image est l'effet de survol. Avec une longueur suffisante.

#menu li:hover { 
    background: url(hover_effect.png) repeat-y 50% 0; 
}