Центрирующие коробки с использованием CSS

Question

Я пытаюсь превратить макет, который я создал на веб-странице в HTML + CSS.

Схема выглядит следующим образом: image

Я хочу, чтобы центральный черный DIV (с фиксированной шириной), чтобы быть в центре, а меню должно остаться его левым и заполнить всю левую сторону экрана, как показано на рисунке выше.

Проблема в том, что я не могу понять, как стилизовать меню, чтобы заполнить всю левую сторону, чтобы получить эффект мыши, показанный на изображении.

спасибо.

Answer 1

Вы делаете это, позволяя меню заполнять всю ширину и позиционировать черный элемент логотипа поверх него.

<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> 

С CSS что-то вроде этого:

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; 
} 

Вы заметите, что: парить эффект пунктов меню также будет отображаться на правой стороне. Это вы исправляете, применяя не повторяющееся фоновое изображение, расположенное на горизонтальной оси на 50%. Половина изображения прозрачная, половина изображения - эффект наведения. С достаточной длиной.

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