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

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

Форум программистов > Вёрстка веб-сайтов > два дива по краям и один посередине

Автор: Reptor 18.8.2009, 11:06

вопрос состоит в том что есть див class="header_div" он растянут на 100 процентов.. мне нужно по краям его разместить ещё два дива и один по центру.. но если центральному даю 100% он переносится на следующую строку... как в диве сделать 2 дива по самим краям и что б в центральном можно было разместить контент?

Код


<div class="header_div">    
    
        <div class="float">
            <img src="{IMG}wnd_corner_l.gif" alt="corner" />
        </div>    
        
        <div class="float" style="width: 100%;">
            <div class="head_sprite" id="head1"></div>
        </div>
        
        <div class="float">
            <img src="{IMG}wnd_corner_r.gif" alt="corner" />
        </div>    
            
        <div class="clear"></div>    
        
        
    
</div>

Автор: pizzz 18.8.2009, 11:50

пишу на память, проверте написание.

Код


#header {
    position:relative;
    height:200px;
}
#left {
    float:left;
    width:25%;
    height:200px;
    background-color:#666699;
}
#right {
    float:left;
    width:25%;
    height:200px;
    background-color:#FFCC99;
}
#center {
    float:left;
    width:40%;
    height:200px;
    background-color:#99CC99;
}

Код


<div id="header">
   <div id="left"></div>
   <div id="center"></div>
   <div id="right"></div>
</div>

З,Ы, Использовать class для header глуппо smile

Автор: Reptor 19.8.2009, 18:09

pizzz, ну дело в том что у тебя в примере по 25% дивы по краям... а у меня два дива по краям по 8 пикселей и какой это процент я не знаю.... (разве что скриптом считать).. и вот между этими двумя дивами должен див как то растягиваться на весь экран..

Автор: skyboy 19.8.2009, 20:11

Код


<div style="width: 8px; float: left; height: 20px;">
<!-- левый блок -->
</div>
<div style="width: 8px; float: right; height: 20px;">
<!-- правый блок -->
</div>
<div style="margin-left: 8px; margi-right: 8px;">
<!-- div'y не надо задавать ширину; он по умолчанию - 100%; 
margin'ы задавать необязательно, но так нагляднее; -->
</div>

а твоя ошибка в том, что центральному блоку не надо было задвать float. вот подумай сам: 100% + ширины двух блоков будет не меньше 100%. если картинки в углах не нулевого размера, то в сумме получается более 100% и получается перенос. кроме того, ошибка версти: когда у тебя блок с float, надо задавать ширину явно. в противном случае, обещаются разные сюрпризы.

Автор: Reptor 20.8.2009, 10:39

skyboy, в ИЕ нормально получилось а вот в ФФ и опере все что ниже как то поехало.. и сам этот див как то опустился вниз.. сверху отступ появился в пару пикселей

Автор: Reptor 25.8.2009, 11:11

может можно как то css указать размер там 100% - 16px..?? , что то не выходит нормально сделать..

Автор: pizzz 25.8.2009, 11:17

Покажи код страницы. Я тебе сделаю

Добавлено через 2 минуты и 43 секунды
А лучше сразу давай эскиз в psd, можешь на почту chatПятьПять@narod.ru пятерки цифрами.

Автор: Reptor 25.8.2009, 12:18

вот шапка сама

Код



<div class="header_div">    
    <div class="float" >
        <img src="{IMG}wnd_corner_l.gif" alt="corner" />
    </div>            
    <div class="float" id="inner_head" align="right">            
        
        //  вот тут тоже будет контент и вот этот центральный который должен быть на весь экран в ширину... - эти картинки по краям див и как видно два по краям (которые в диве) по 8пикселей 
    </div>        
    <div class="float">
        <img src="{IMG}wnd_corner_r.gif" alt="corner" />
    </div>                
    <div class="clear"></div>        
</div>

а вот css под него

Код



* { margin: 0; padding: 0; }
html, body { height: 500px; margin: 0; padding: 0; }
img{border: 0px;}
.clear{clear: both;}
.float {float: left;}
.cursor{cursor: pointer;}

.header_div{height: 94px; background-image:  url('{IMG}heder_base.gif'); background-repeat: repeat-x;}

ну и дальше идет страничка

Код


<div >

//content

</div>

Автор: pizzz 25.8.2009, 14:04

Попробуйте так. Если не работает скажите

Код


<div class="header_div">    
    <div class="left" >
        <img src="{IMG}wnd_corner_l.gif" alt="corner" />
    </div>            
   
        //  вот тут тоже будет контент и вот этот центральный который должен быть на весь экран в ширину... - эти картинки по краям див и как видно два по краям (которые в диве) по 8пикселей       
    <div class="right">
        <img src="{IMG}wnd_corner_r.gif" alt="corner" />
    </div>                
    <div class="clear"></div>        
</div>

Код


* { margin: 0; padding: 0; }
html, body { height: 500px; margin: 0; padding: 0; }
img{border: 0px;}
.clear{clear: both;}
.left {float: left; width:8px; height: 94px;}
.right {float: right; width:8px; height: 94px;}
.cursor{cursor: pointer;}

.header_div{height: 94px; background-image:  url('{IMG}heder_base.gif'); background-repeat: repeat-x;}

Автор: Reptor 25.8.2009, 14:36

pizzz,

сделал

Код


<div style="float: left; width:8px; height: 94px;" >
        <img src="{IMG}wnd_corner_l.gif" alt="corner" />
    </div>        
    <div style="float: right; width:8px; height: 94px;">
        <img src="{IMG}wnd_corner_r.gif" alt="corner" />
    </div>    
    <div style="float: left" id="inner_head" align="right">      
                    <div class="head_sprite" id="head1"></div>    //вот тут картинка на бекграунде
                    вот тут моу контент

        </div>

<div class="clear"></div>

так вроде картинки разместились по углам только вот то что внутри (там де контент как то не растянулось на 100%) там у меня картинка и она не в правом углу..