Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> два дива по краям и один посередине 
:(
    Опции темы
Reptor
Дата 18.8.2009, 11:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

Репутация: нет
Всего: 0
вопрос состоит в том что есть див  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>
PM MAIL ICQ   Вверх
pizzz
Дата 18.8.2009, 11:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: 8
пишу на память, проверте написание.
Код

#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
--------------------
Спасибо много, жмем кнопку репутация.  Извините меня за орфографические ошибки, я стараюсь не ошибаться, а они все равно просачиваются гады.     
PM MAIL ICQ   Вверх
Reptor
Дата 19.8.2009, 18:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

Репутация: нет
Всего: 0
pizzz, ну дело в том что у тебя в примере по 25% дивы по краям... а у меня два дива по краям по 8 пикселей и какой это процент я не знаю.... (разве что скриптом считать).. и вот между этими двумя дивами должен див как то растягиваться на весь экран.. 
PM MAIL ICQ   Вверх
skyboy
Дата 19.8.2009, 20:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


неОпытный
****


Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260
Код

<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, надо задавать ширину явно. в противном случае, обещаются разные сюрпризы.
PM MAIL   Вверх
Reptor
Дата 20.8.2009, 10:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

Репутация: нет
Всего: 0
skyboy, в ИЕ нормально получилось а вот в ФФ и  опере все что ниже как то поехало.. и сам этот див как то опустился вниз.. сверху отступ появился в пару пикселей
PM MAIL ICQ   Вверх
Reptor
Дата 25.8.2009, 11:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

Репутация: нет
Всего: 0
может можно как то css указать размер там 100% - 16px..?? , что то не выходит нормально сделать..
PM MAIL ICQ   Вверх
pizzz
Дата 25.8.2009, 11:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: 8
Покажи код страницы. Я тебе сделаю

Добавлено через 2 минуты и 43 секунды
А лучше сразу давай эскиз в psd, можешь на почту chatПятьПять@narod.ru пятерки цифрами. 
--------------------
Спасибо много, жмем кнопку репутация.  Извините меня за орфографические ошибки, я стараюсь не ошибаться, а они все равно просачиваются гады.     
PM MAIL ICQ   Вверх
Reptor
Дата 25.8.2009, 12:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

Репутация: нет
Всего: 0
вот шапка сама
Код


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





Это сообщение отредактировал(а) Reptor - 25.8.2009, 12:19
PM MAIL ICQ   Вверх
pizzz
Дата 25.8.2009, 14:04 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: нет
Всего: 8
Попробуйте так. Если не работает скажите
Код

<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;}

--------------------
Спасибо много, жмем кнопку репутация.  Извините меня за орфографические ошибки, я стараюсь не ошибаться, а они все равно просачиваются гады.     
PM MAIL ICQ   Вверх
Reptor
Дата 25.8.2009, 14:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1213
Регистрация: 29.12.2004

Репутация: нет
Всего: 0
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%) там у меня картинка и она не в правом углу.. 
PM MAIL ICQ   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0485 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.