Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Помагите сверстать шапку

Автор: Serik1Yojik 8.3.2009, 22:01

Вот шапка, нужно верстать с помощью 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;
}

Автор: bars80080 8.3.2009, 22:06

ну, товарищ, советую почитать про такое свойство, как 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

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

Код



<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:17

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

Автор: Nikol 9.3.2009, 23:50

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

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