Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Блок див уходит вниз

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки

Открыть новую тему     Написать ответ в эту тему

lightgirlz



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
У меня есть блок див в котором содержится еще несколько блоков, расположенных по горизонтали. Но при уменьшении окна браузера последний див сдвигается вниз, под первые дивы. Читала, что проблема решается установлением фиксированной ширины и высоты, так и сделала, но проблема не решилась. Подскажите, пожалуйста, в чем может быть проблема?
 
вот HTML
<div class="ban_er">
 
 
<div class="ban_er_1">
<a href="http://www.bgunb.ru/Corporation/Info.aspx?r_i=13"><br><b>КНИЖНЫЕ ПАМЯТНИКИ БЕЛГОРОДЧИНЫ <br> (гос. услуга)</b></a> </div>
 
 
<div class="ban_er_1">
<a href="http://www.bgunb.ru/Corporation/Default.aspx"><br><b>ЭЛЕКТРОННЫЕ КАТАЛОГИ И БАЗЫ ДАННЫХ БИБЛИОТЕК ОБЛАСТИ<br> (гос. услуга)</b> </a> </div>
 
 
<div class="ban_er_1" >
<a href=""><br><b>МЕЖБИБЛИОТЕЧНЫЙ<br> АБОНЕМЕНТ</b></a> </div>
 
<div class="ban_er_1" >
<a href="http://gub-raion.ucoz.ru/link/index.html"><br><b>ЦЕНТР ОБЩЕСТВЕННОГО <br>ДОСТУПА К СОЦИАЛЬНО-ЗНАЧИМОЙ ИНФОРМАЦИИ</b></a> </div>
 
 
<div class="ban_er_1" >
<a href="http://gub-raion.ucoz.ru/index/sformiruem_fond_biblioteki_vmeste/0-258"><br><b>СФОРМИРУЕМ ФОНД <br>БИБЛИОТЕКИ ВМЕСТЕ</b></a> </div>
 
</div>
 
 
и CSS
.ban_er{ width:995px; height:79px; padding-top:2px; padding-bottom:2px;}
.ban_er_1{width:197px; height:75px; float:left; border:1px solid #77bacb; text-align:center; }
.ban_er_1 a { font-size:11px; font-family:Arial;color:#66841d; text-decoration:none; }

Всего записей: 9 | Зарегистр. 13-03-2013 | Отправлено: 20:43 16-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz
все нормально отображается.  
какой браузер?

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 22:42 16-04-2014
lightgirlz



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Гугл хром, Мазила
 Вот посмотрите у меня вот так уходит http://gubkinz.3dn.ru/2img.jpg

Всего записей: 9 | Зарегистр. 13-03-2013 | Отправлено: 23:38 16-04-2014 | Исправлено: lightgirlz, 23:42 16-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz
а у меня в том же хроме и firefox - нет
уходит тут? http://jsfiddle.net/XzE9g/

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:44 16-04-2014
Almaz



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz
погуглите чтонить типа CSS Do not wrap contents of div
например http://stackoverflow.com/questions/1703183/css-do-not-wrap-contents-of-div

Цитата:
A combination of both float: left; white-space: nowrap; worked for me.
Each of them independently didn't accomplish the desired result.

это про ban_er
уберите float: left из ban_er_1

Всего записей: 2219 | Зарегистр. 20-06-2002 | Отправлено: 23:52 16-04-2014
lightgirlz



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Cheery
 
Конечно уходит!!! Когда пытаешься уменьшить при помощи комбинации ctrl+"-" При первом нажатии последний блок уходит вниз

Всего записей: 9 | Зарегистр. 13-03-2013 | Отправлено: 23:58 16-04-2014 | Исправлено: lightgirlz, 23:59 16-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Almaz

Цитата:
это про ban_er  
уберите float: left из ban_er_1

тогда они выстроятся друг над другом.
 
lightgirlz

Цитата:
 Когда пытаешься уменьшить при помощи комбинации ctrl+"-"

ну так вы говорите все детали! при ресайзе окна (о чем вы и писали изначально) ничто и никуда не уходит


----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 23:58 16-04-2014 | Исправлено: Cheery, 00:00 17-04-2014
Almaz



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
упс, спасибо Cheeryза jsfiddle.net
просто добавьте white-space: nowrap в ban_er  
float: left нужен в ban_er_1

Всего записей: 2219 | Зарегистр. 20-06-2002 | Отправлено: 23:59 16-04-2014
lightgirlz



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Almaz
 
Согласна, мне нужно горизонтально, а не вертикально чтобы осталось
 
 
Добавлено:

Цитата:
просто добавьте white-space: nowrap в ban_er  
float: left нужен в ban_er_1  

 
Ничего не изменилось, также уходит..
Хотя вру, просто текст в одну строку теперь пишется заходит на другие блоки

Всего записей: 9 | Зарегистр. 13-03-2013 | Отправлено: 00:01 17-04-2014
Almaz



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz

Цитата:
Когда пытаешься уменьшить при помощи комбинации ctrl+"-"

забубеньте width:9995px для ban_er    
 
 
Добавлено:
white-space вроде бы не нужен

Всего записей: 2219 | Зарегистр. 20-06-2002 | Отправлено: 00:04 17-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz
вместо float: left вы можете использовать display:inline-block;
правда у него плохая поддержка в старых версиях IE

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:08 17-04-2014
lightgirlz



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору

Цитата:
забубеньте width:9995px для ban_er  

 
Это не есть выход, у меня четка фиксированная ширина и ее я думаю трогать явно не стоит

Всего записей: 9 | Зарегистр. 13-03-2013 | Отправлено: 00:08 17-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz

Цитата:
Это не есть выход, у меня четка фиксированная ширина и ее я думаю трогать явно не стоит

поэтому и плывет, что меняется ширина блоков внутри, в сумме выходит за пределы ширины родителя.
можете так попробовать  
http://jsfiddle.net/XzE9g/11/
в сумме, правда, будет не столько, сколько нужно - из за рамки блоков.
 
inline-block лучший вариант
http://jsfiddle.net/yzTFC/45/
либо, как и сказали, родитель должен быть шире изначально
http://jsfiddle.net/yzTFC/52/

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:12 17-04-2014 | Исправлено: Cheery, 00:16 17-04-2014
Almaz



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz

Цитата:
ее я думаю трогать явно не стоит

попробуйте
 
Добавлено:
впрочем http://jsfiddle.net/XzE9g/11/  у мну работает без проблем
оказывается надо просто width подкрутить, но не таким зверским образом как 9995

Всего записей: 2219 | Зарегистр. 20-06-2002 | Отправлено: 00:13 17-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Almaz

Цитата:
у мну работает без проблем  

но в сумме блоки не заполняют полностью родителя

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:19 17-04-2014
Almaz



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Cheery

Цитата:
в сумме блоки не заполняют полностью родителя

ага, теперь вижу
так что в финале http://jsfiddle.net/yzTFC/52/ имеем просто
контейнер: white-space:nowrap;
элементы: display:inline-block;
спасибо, будем знать

Всего записей: 2219 | Зарегистр. 20-06-2002 | Отправлено: 00:29 17-04-2014
lightgirlz



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
У меня все точно рассчитано и на рамочки тоже... Родительский див -ширина 995, блоки внутри -197, итого у нас 5 блоков с двух сторон обводка поэтому это занимает 10px итого 197*2+10=995. или еще отступы нужно предусмотреть?

Всего записей: 9 | Зарегистр. 13-03-2013 | Отправлено: 00:31 17-04-2014
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
lightgirlz

Цитата:
или еще отступы нужно предусмотреть?

когда вы делаете изменение шрифтов плюсом или роликом (и это не изменение размеров окна) - там все получается иначе.
вам тогда либо придется размер шрифтов зафиксировать, либо сделать как в одном из примеров, что я привел выше.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 00:33 17-04-2014 | Исправлено: Cheery, 00:33 17-04-2014
Открыть новую тему     Написать ответ в эту тему

Компьютерный форум Ru.Board » Интернет » Web-программирование » Блок див уходит вниз


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru