Центрирование прямоугольников с помощью CSS - PullRequest
Новая
       5

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

2 голосов
/ 28 июля 2010

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

Макет выглядит так: изображение

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

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

Большое спасибо.

1 Ответ

1 голос
/ 28 июля 2010

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

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

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

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