X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Вопрос по CSS, Съезжают DIV при масштабировании страницы
tohenson
tohenson
Topic Starter сообщение 19.7.2013, 23:21; Ответить: tohenson
Сообщение #1


Новичок
*

Группа: User
Сообщений: 30
Регистрация: 30.1.2011
Поблагодарили: 1 раз
Репутация:   0  


Здравствуйте. Извиняюсь если создал тему не в том разделе, но вроде более подходящей по моей проблеме нету smile.gif
Суть: При масштабировании страницы (уменьшая её) Блоки DIV съезжают. Ширину проверял, даже меньше сделал но что-то тут не то. Подскажите пожалуйста как это возможно пофиксить.
Скриншоты: До масштабирования (100%) | После масштабирования (90%)

Код CSS двух блоков:
#left{
color: #b2b2b2;
min-width: 250px;
display: inline-block;
background-image: url('#');
background-repeat: repeat;
vertical-align:top;
}
#right{
color: #b2b2b2;
min-width: 846px;
display: inline-block;
background: url('#');
background-repeat: repeat;
vertical-align:top;
}


Сообщение отредактировал tohenson - 19.7.2013, 23:23
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skatadov
skatadov
сообщение 19.7.2013, 23:30; Ответить: skatadov
Сообщение #2


Новичок
*

Группа: User
Сообщений: 35
Регистрация: 27.12.2008
Поблагодарили: 18 раз
Репутация:   8  


Попробуйте обернуть #left и #right в div с overflow:hidden; и min-width равным сумме минимальных ширин левого и правого блоков.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tohenson
tohenson
Topic Starter сообщение 19.7.2013, 23:41; Ответить: tohenson
Сообщение #3


Новичок
*

Группа: User
Сообщений: 30
Регистрация: 30.1.2011
Поблагодарили: 1 раз
Репутация:   0  


Все равно зараза съезжает sad.gif
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skatadov
skatadov
сообщение 19.7.2013, 23:44; Ответить: skatadov
Сообщение #4


Новичок
*

Группа: User
Сообщений: 35
Регистрация: 27.12.2008
Поблагодарили: 18 раз
Репутация:   8  


А, у вас inline... Там есть нюанс. В HTML нужно расположить обязательно на одной строке без пробелов между ними закрывающий </div> #left и открывающий <div> #right


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shyrik_don
shyrik_don
сообщение 20.7.2013, 0:00; Ответить: shyrik_don
Сообщение #5


Новичок
*

Группа: User
Сообщений: 24
Регистрация: 17.7.2013
Поблагодарили: 18 раз
Репутация:   7  


Оберни их в один <div></div>, сразу после этого дива надо <div class="clear"></div>, a в css обоим селекторам дать float: left;


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WhiteIce
WhiteIce
сообщение 20.7.2013, 1:57; Ответить: WhiteIce
Сообщение #6


Участник
***

Группа: User
Сообщений: 130
Регистрация: 28.6.2013
Поблагодарили: 26 раз
Репутация:   5  


У вас отображение inline-block, а само позиционирование не задано, используйте float


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lisichanin
lisichanin
сообщение 20.7.2013, 10:02; Ответить: lisichanin
Сообщение #7


Новичок
*

Группа: User
Сообщений: 44
Регистрация: 2.7.2013
Поблагодарили: 6 раз
Репутация:   2  


тут однозначно float, и еще если вы задаете width left: 250px; то зачем ставите ширину right если она займет все оставшееся место...


--------------------
Качественная и недорогая верстка!!!

Портфолио Отзывы в теме!!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
shyrik_don
shyrik_don
сообщение 20.7.2013, 11:02; Ответить: shyrik_don
Сообщение #8


Новичок
*

Группа: User
Сообщений: 24
Регистрация: 17.7.2013
Поблагодарили: 18 раз
Репутация:   7  


в css должна быть такая запись:

#left{
color: #b2b2b2;
width: 250px;
display: block;
float: left;
background-image: url('#');
background-repeat: repeat;
}

#right{
color: #b2b2b2;
display: block;
background: url('#');
background-repeat: repeat;
}

#left + #right {
margin-left: 250px;
}


в html надо обязательно постасить <div class="clear"></div>, или обернуть все в див и дать ему overflow:hidden;


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skatadov
skatadov
сообщение 20.7.2013, 11:40; Ответить: skatadov
Сообщение #9


Новичок
*

Группа: User
Сообщений: 35
Регистрация: 27.12.2008
Поблагодарили: 18 раз
Репутация:   8  


(shyrik_don @ 20.7.2013, 10:02) *
в html надо обязательно постасить <div class="clear"></div>


Тогда уж надо не забыть дописать и стиль для .clear
clear: both;

Но лучше действительно overflow: hidden; для родителя при переделке display: inline-block на float: left


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Вопрос по seo для интернет магазина
куда девать продвинутые товары, которые уже не выпускают
18 viktormerke 2794 Вчера, 15:18
автор: Smspva
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1063 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Вопрос к знатокам Instagram
20 SEOMR 4182 30.11.2017, 14:25
автор: DiscordPro
Открытая тема (нет новых ответов) Вопрос про Телеграмм
18 syd2010 1168 28.11.2017, 14:25
автор: PostBrigada
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыАrticle manager вопрос
0 Smile3D 441 24.11.2017, 18:27
автор: Smile3D


 



RSS Текстовая версия Сейчас: 16.12.2017, 23:02
Дизайн