Как лучше порезать картинку

[rolph]

Нарисовал шапку сайта, теперь не могу найти рациональное решение верстки.

Подскажите пожалуйста, как лучше порезать:

Сам пока вижу нарезку в таком виде:

сделать общий div, задний фон - прижатый к верху коричневый фон...

внутри этого div'a - картинка с проводами

поверх него - div меню

[ret]

Можно просто поставить единую картинку, как шапку, и с помощью тега <map> указать конкретные области для карт-изображений на ссылки у тебя на меню.

Edited May 18, 2010 by ret

[rolph]

Можно просто поставить единую картинку, как шапку, и с помощью тега <map> указать конкретные области для карт-изображений на ссылки у тебя на меню.

Хм... тоже вариант, только я хотел добавить в меню изменение цвета блока меню при наведении.. а если использовать map, придется делать с помощью js.

[dyadya]

Зачем что-то резать? Картинку в бэкграунд, а дальше верстайте себе на здоровье...

[rolph]

Зачем что-то резать? Картинку в бэкграунд, а дальше верстайте себе на здоровье...

вся хрень в нижней части с серыми блоками, как-то надо попасть...

[dyadya]

как-то надо попасть...

Позиционирование Вам в помощь!

[Searcher]

Картинку с проводами в фон блока, блоку высоту по картинке, меню дочкой будет, и для меню просто верхний марджин укажите нужный и все...

А вот если резина нужна, тогда надо помудрить...

[rolph]

Картинку с проводами в фон блока, блоку высоту по картинке, меню дочкой будет, и для меню просто верхний марджин укажите нужный и все...

А вот если резина нужна, тогда надо помудрить...

Сделал, как вы написали - спасибо. Верстка фикс с min-width.

[Searcher]

Рад был оказаться полезным! )) Однако, с min-width верстка становится уже резиновой, только с минимальным ограничением...

[rolph]

Вопрос снова актуален, т.к. зашел я в тупик.

Сейчас сверстал так:

html:

<div id="header">
        <div id="main-pic">
            <div id="contact_block"><span class="code">(495)</span><span class="phone">123-4567</span> <a href="mailto:info@test.com" class="email_link">info@test.com</a></div>
            <div id="navigation">{{mainmenu}}</div>
        </div>
    </div>

css:

#header {
    color: #333;
    background: url(/images/header_bg.jpg) repeat-x 0px 0px;
    width: 100%;
    float: left;
    height: 160px;
    margin: 0;
}

#header #contact_block {
    left: 950px;
    display:block;
    top:35px;
    position:absolute;
    color: #fff;
    width:150px;
    float:left;
}

#header #contact_block span.code {
    font-size: 0.8em;
    margin-right:5px;
}

#header #contact_block span.phone {
    font-size: 2em;
    margin-right:5px;
}

#header #contact_block a.email_link {
    font-size: 0.9em;
    color:#fff;

}

#header #main-pic {
    background: url(/images/main_pic.jpg);
    width: 950px;
    height: 152px;
    margin: 0 auto;
}

#navigation {
position: relative;
top: 99px;
left: 10px;
color: white;
float: left;
}

Всё бы хорошо, но тут я понял, что лого надо бы сделать кликабельным, да и в IE6,7 телефон куда-то вылетает.

Подскажите, куда копать, поломал голову.

PS: Есть идея зафигачить шапку в таблицу, а таблицу в див по центру, но имхо это не хорошо.

Edited May 31, 2010 by rolph

[psywalker]

Делаешь див, это и будет шапка, далее в нём уже отдельно див, это и будет лого, а по бокам хрени с нижними проводами. На всё это безобразие накладываешь меню.

[rolph]

Делаешь див, это и будет шапка, далее в нём уже отдельно див, это и будет лого, а по бокам хрени с нижними проводами. На всё это безобразие накладываешь меню.

Лого тут - МС

С проводами немного не понял

[psywalker]

Лого тут - МС

С проводами немного не понял

Все провода и прочее, относятся к средней картинке, которая лежит абсолютом под меню.