VPF::Помагите сверстать шапку - Форум программистов

Serik1Yojik

Дата 8.3.2009, 22:01 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 8.3.2009

Репутация: нет
Всего: нет

Вот шапка, нужно верстать с помощью div
Вижу такое решение:
сделать общий div id=1 с фоном голубоватого цвета(как справа)
сделать вложенный div id=2 с фоном как слева
вырезать среднюю часть и центрировать ее вложенным дивом div id=3 !!!
вот только как это реализовать
не получается div id=2 отобразить на div id =1;
Очень надеюсь на вашу помощь!!!

Код



<div id="header">
      <div id="red">

css

Код


#red {
    margin-left:0;
    background:#990033:
    width:50%;
    height:252px;
        
}

#header {
    background:#999999;
    width:100%;
    height:252px;
}

Это сообщение отредактировал(а) Serik1Yojik - 8.3.2009, 22:06

Присоединённый файл ( Кол-во скачиваний: 9 )

__.jpg 114,21 Kb

bars80080

Дата 8.3.2009, 22:06 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

ну, товарищ, советую почитать про такое свойство, как position http://htmlbook.ru/css/position.html
red вкладываем в header, затем

Код


#header { position: relative; }
#red { position: absolute; width: ...; height: ...; top: 0px; left: 0px; }

Serik1Yojik

Дата 9.3.2009, 11:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 8.3.2009

Репутация: нет
Всего: нет

Не получается центрировать центральную часть

Код



<div id="header">
    <div id="red">
     
        <div id="top"> 
        
       
     
            <div id="tabarea">
                <table cellpadding="0" cellspacing="0" class="pill">
                    <tr>
                        <td class="pill_m">
                        <div id="pillmenu">
                            <jdoc:include type="modules" name="user3" />
                        </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="logo"><a href="index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></div>
            
    
        </div>
    </div>
 </div>

Код


#top { 
    margin-left:auto;margin-right:auto;
    background: transparent url(../images/top_bg.jpg) top center no-repeat;
    width:818px; }


#header { position: relative;
    background:#999999;
    width:100%;
    height:252px; }

    
#red {
 position: absolute;
 background:#990033; 
width: 50%; 
height: 252px; 
top: 0px;
left: 0px; }

Это сообщение отредактировал(а) Serik1Yojik - 9.3.2009, 15:15

Serik1Yojik

Дата 9.3.2009, 15:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 5
Регистрация: 8.3.2009

Репутация: нет
Всего: нет

наверно проблема в том что #top центрируется относительно #red, но как ее решить понятия не имею ПОМОГИТЕ ПОЖАЛУЙСТА!!!

Это сообщение отредактировал(а) Serik1Yojik - 9.3.2009, 15:17

Nikol

Дата 9.3.2009, 23:50 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 123
Регистрация: 5.4.2006
Где: Берег Черного мор я

Репутация: 2
Всего: 4

Зачем вообще мудрить с этим красным дивом? Фоновую картинку отпозиционировать к левому краю, цвет фона голубой - один див, и в нем второй вложенный для меню.

Добавлено через 2 минуты и 41 секунду
Под фоновой картинкой я имела ввиду цельную картинку, вместе с красным участком и облачками, до начала голубого фона.

--------------------

Я не волшебник, я только учусь.

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »