Перейти к содержанию
Форум поддержки пользователей VamShop

Посоветуйте как лучше сделать разметку шапки !


Рекомендуемые сообщения

Прошу совета по разметки шапки:

Надо шапку сайта условно разделить на 3 части(в каждой будет выводится 3 фоновых изображения - порезанные картинки будут лепится в одну целую).

1. Левая часть будет выступать в роли логотипа (и будет поставлена ссылка на главную).

2. В центральной части хочу вывести  поиск (как его лучше вывести ? бокс "поиск не очень удобен", хочу сделать в одну строчку с кнопкой найти)

3. В правой части будет выведена корзина и контактная информация.

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

Может кто-то занимался подобной работой подскажите, - буду очень признателен.

Ссылка на сообщение
Поделиться на другие сайты

Так по умолчанию в шаблоне vamshop именно так и сделано.

Вроде как там 2 блока всего сделано.

1) Через минус маргины

2) Заключить первые два блока в 1 блок и через флоаты.

Ссылка на сообщение
Поделиться на другие сайты

1 способ.

html

<div id="header">

<div id="wrapper">
<div class="center-block">
</div>
</div>

<div class="left-block">
</div>

<div class="right-block">
</div>

</div>[/code] [b]css[/b]
[code]

#header{
width:100%;
}

#wrapper{
float:left; width:100%;
}

.center-block{
margin: 0 270px 0 220px; background: #999; border: 1px #F7F7F7 solid;
}

.right-block{
float:left;
width:270px;
margin-left:-270px;
}
.left-block{
float:left;
width:220px;
margin-left:-100%;
}

По поводу второго писать не буду =) Он вроде не валид =)

Ссылка на сообщение
Поделиться на другие сайты
×
×
  • Создать...