Заметки о CSS #1

16.08.2011

Верхняя часть меню

Верстка меню на сайт

Открываю цикл заметок про CSS, в них буду писать о проблемах CSS с которыми сталкивался в процессе верстки сайтов и пути их решения. Постараюсь не растягивать, так что они будут маленькими по объёму.

Итак, первая заметка. На сайте необходимо было вставить блок, показанный на рисунке:

Menu - которое надо сверстать

Разберем по порядку:

Округлые углы блока – пока не буду учитывать ИЕ 7, позже напишу как сделать такие углы при помощи js. А для оперы, мозилы, хрома и сафари всё просто:

 

#simpleMenu {
  background: #fff;
  border: 1px solid rgb(222,223,215);
  -moz-border-radius: 10px;
  webkit-border-radius: 10px;
  border-radius: 10px;
  min-height: 150px;
  padding: 20px 15px;
  font: 14px Arial;
  color: #808080;
}

 

border-radius – свойство для округления углов блока, полная форма записи: border-radius: 10px 10px 10px 10px;
Т.е. округление углов можно задать для каждого отдельного угла, где первый – левый верхний угол и далее по часовой.
-moz-border-radius: 10px; – Аналогично задаем для FireFox.
-webkit-border-radius: 10px; - Для Chrome и Safari. Более подробно про закругленные углы можно будет прочитать в статье на webmasters.by, ссылка в конце.
Таким образом html для самого первого элемента меню будет следующим:

 

<div id="simpleMenu">
 
  <div><
 
    <img src="vodka_tmp.jpg" title="Водка" alt="Водка"/>
 
    <div>
 
      <div>Водка</div>
 
      <div>от 90 р.</div>
 
    </div>
 
  </div>
 
</div>

 

Точки, ведущие от картинки и названия элемента меню до его цены сделал следующим образом: у блока .item сделал нижнюю границу точками

 

.menuItem .item {
 
  padding: 8px 0 0 10px;
 
  border-bottom: 1px dotted rgb(203,203,203);
 
  line-height: 13px;
 
  height: 11px;
 
}

 

А уже поверх них наложил название и цену:

 

.menuItem {
 
  width: 288px;
 
  height: 39px;
 
  margin-bottom: 15px;
 
}
#simpleMenu img {
 
  float: left;
 
}
 
.menuItem .title {
 
  float: left;
 
  height: 31px;
 
  padding: 0 5px;
 
  background-color: #fff;
 
}
 
.menuItem .cost {
 
  float: right;
 
  font-family: Georgia, Arial;
 
  background-color: #fff;
 
  padding-left: 5px;
 
  font-weight:bold;
 
}

 

В итоге получилось:

Меню - в итогеНижний блок тоже свёрстан интересно, напишу в следующей заметке! Спасибо за внимание!

blog comments powered by Disqus
Наверх