ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блочная вёрстка: 2-й столбец "плавает"...
15 сообщений из 15, страница 1 из 1
Блочная вёрстка: 2-й столбец "плавает"...
    #38571261
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Вот html-код:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<style>
#wrapper { width: 750px; margin: 0 auto; min-height: 100%; height: auto !important; height: 100%; }
.cont_block { position:relative; border:1px solid #919192; border-radius:10px; background:#ddd; padding:0px; margin-bottom:15px; }

.left { float: left; }
.right { float: right; }
.new_line { clear: both; }
.column1 { width: 80px; height: 100%; background: yellow; }
.column2 { width: 100%; height: auto; background: gray; }
.column3 { width: 50px; height: 100%; background: cyan; }
</style>
</head>

<body>
<div id="wrapper">
  <div class='cont_block'>
    <div class='left column1'>Первый столбец</div>
    <div class='right column3'>Третий столбец</div>
    <div class='column2'>Второй столбец euwiuiuei uie uii uir iuiui ii u iui ui uiui ui iuirui uiwui uiuriu iuri ghgh hg ghgh yt yt  t ty y t y y ty r rt t r ttr ii u iui ui uiui ui iuirui uiwui uiuriu iuri ghgh hg ghgh yt yt  t ty y t y y ty r rt t r ttr ii u iui ui uiui ui iuirui uiwui uiuriu iuri ghgh hg ghgh yt yt  t ty y t y y ty r rt t r ttr ii u iui ui uiui ui iuirui uiwui uiuriu iuri ghgh hg ghgh yt yt  t ty y t y y ty r rt t r ttr ii u iui ui uiui ui iuirui uiwui uiuriu iuri ghgh hg ghgh yt yt  t ty y t y y ty r rt t r ttr  ii u iui ui uiui ui iuirui uiwui uiuriu iuri ghgh hg ghgh yt yt  t ty y t y y ty r rt t r ttr ii u iui ui uiui ui iuirui uiwui uiuriu iuri ghgh hg ghgh yt yt  t ty y t y y ty r rt t r ttr</div>    
    <div class='new_line'></div>
  </div>
</div>
</body>

</html>


Задача:
1-й столбец должен иметь ширину 80px, третий столбец - 50px, а второй столбец должен занимать всю оставшуюся ширину и при этом 3,4,5-й его строки не должны сдвигаться к левому краю (т.е. все строки 2-го столбца должны начинаться на одном уровне).

Дополнительные условия:
1. В целях реализации адаптивной вёрстки конкретную ширину второму столбцу задавать нельзя.
2. Если содержимое 2-го столбца будет узким, то 2-й столбец всё равно должен занимать всю ширину между 1-м и 3-м столбцами.
3. Работать должно во всех современных браузерах

Как такое сверстать на основе div'ов ?
...
Рейтинг: 0 / 0
25.02.2014, 10:35
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38571316
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Странно, что задание свойства "height: 100%;" 1-му и 3-му столбцам не устанавливает их ширину равной ширине их родительского блока - <div class='cont_block'>. В этом случае высота 1-го и 3-го столбцов была бы равна высоте 2-го столбца.
...
Рейтинг: 0 / 0
25.02.2014, 11:10
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38571318
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02Как такое сверстать на основе div'ов ?
Для затравки...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
#container {
	overflow: hidden;
}
#right {
	width: 50px;
	float: right;
	background: cyan;
}
#left {
	width: 80px;
	float: left;
	background: yellow;
}
#center {
	margin-left: 80px;
	margin-right: 50px;
	background: gray;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="container">
	<div id="right">right</div>
	<div id="left">left</div>
	<div id="center">center</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
25.02.2014, 11:12
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38571356
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Тоже об этом подумал, только вариант не совсем корректный - приходится в двух местах задавать одни и те же значения (в терминологии БД - нарушение целостности данных).
Кроме того, у меня ширина левого и правого блоков задана как auto и определяется исходя из их содержимого. Просто в сабжевом примере я упростил - задал конкретные значения в пикселах.

P.S. Может, у div'ов есть свойство какое для запрета "разлома" левой и правой границ блока ?
...
Рейтинг: 0 / 0
25.02.2014, 11:34
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38571376
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02Тоже об этом подумал, только вариант не совсем корректный - приходится в двух местах задавать одни и те же значения (в терминологии БД - нарушение целостности данных).
Верстка не есть БД...
Т.ч. пример максимально корректен.

Cyrax_02Кроме того, у меня ширина левого и правого блоков задана как auto и определяется исходя из их содержимого. Просто в сабжевом примере я упростил - задал конкретные значения в пикселах.
Ну начинается...
Делай таблицей и будет тебе счастие...

Cyrax_02P.S. Может, у div'ов есть свойство какое для запрета "разлома" левой и правой границ блока ?
Нет такого свойства.
...
Рейтинг: 0 / 0
25.02.2014, 11:49
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38571388
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторВерстка не есть БД...
Т.ч. пример максимально корректен.
Неа, некорректен. При необходимости изменения одной логической величины (ширина правого столбца) требуется менять несколько (в данном случае два) значений в css. Такого быть не должно. Это неправильно.

авторДелай таблицей и будет тебе счастие...
Похоже, придётся таблицей...
...
Рейтинг: 0 / 0
25.02.2014, 11:55
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38571520
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02Неа, некорректен. При необходимости изменения одной логической величины (ширина правого столбца) требуется менять несколько (в данном случае два) значений в css. Такого быть не должно. Это неправильно.
Это только для тебя...
...
Рейтинг: 0 / 0
25.02.2014, 13:19
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572013
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Не знаю, как это принято в веб-дизайне, но в сфере программирования и проектирования баз данных за подобные вещи гнали бы куда подальше...
...
Рейтинг: 0 / 0
25.02.2014, 17:26
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572404
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02Не знаю, как это принято в веб-дизайне ...
Вот на этом и остановись.
Не стоит равнять (как говорится) жопу с пальцем (с)...
...
Рейтинг: 0 / 0
26.02.2014, 08:33
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572428
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
авторНеа, некорректен. При необходимости изменения одной логической величины (ширина правого столбца) требуется менять несколько (в данном случае два) значений в css. Такого быть не должно. Это неправильно.



для этого существуют препроцессоры CSS - Sass и LESS
...
Рейтинг: 0 / 0
26.02.2014, 09:11
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572431
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
вадядля этого существуют препроцессоры CSS - Sass и LESS
Пример-то хоть будет? С тем Сассом или Лессом...
...
Рейтинг: 0 / 0
26.02.2014, 09:14
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572472
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
Нет, всё-таки оставил блочную вёрстку. Проcто-напросто среднему столбцу указал свойство:
Код: css
1.
display: table-cell;


И теперь все строки этого столбца находятся на одном уровне, без всяких сдвигов.
Правда, IE это значение не понимает (в нём сдвиги будут иметь место), но и пусть, не критично.
Главное - во всех прочих браузерах всё отображается нормально и при этом вёрстка остаётся блочной. Как никак, блочная вёрстка более гибкая как в плане форматирования, так и в плане компоновки...
...
Рейтинг: 0 / 0
26.02.2014, 10:04
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572497
Cyrax_02
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Cyrax_02
Участник
авторВот на этом и остановись.
Не стоит равнять (как говорится) жопу с пальцем (с)... Понятия (концепции) "избыточность данных", "дублирование данных", "целостность данных" играют важную роль и учитываются во всех IT-сферах, в том числе и в компьютерной вёрстке.

Вот выдержка из вики:
авторИзбегайте избыточности. Невыполнение этого принципа приводит к аномалиям обновления, которые сильно увеличивают затраты на обслуживание кода. В этом случае одно и то же изменение нужно ввести во все дубликаты. И в лучшем случае, время потраченное на внесение изменений, и тестирование кода увеличивается пропорционально количеству дубликатов. А в худшем — некоторые места в коде могут быть пропущены, и исправление всех ошибок может затянутся на месяцы или даже годы.
Любая профессиональная литература по веб-дизайну и компьютерной вёрстке в обязательном порядке содержит информацию о методах оптимизации CSS/HTML-кода, в числе которых - устранение избыточности.
...
Рейтинг: 0 / 0
26.02.2014, 10:24
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572821
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02Понятия (концепции) "избыточность данных", "дублирование данных", "целостность данных" играют важную роль и учитываются во всех IT-сферах, в том числе и в компьютерной вёрстке.
Пипец! Вот ты неугомонный...
...
Рейтинг: 0 / 0
26.02.2014, 13:32
| Ответить | Цитировать | Написать  
Блочная вёрстка: 2-й столбец "плавает"...
    #38572823
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Cyrax_02Нет, всё-таки оставил блочную вёрстку. Проcто-напросто среднему столбцу указал свойство:
Код: css
1.
display: table-cell;


И теперь все строки этого столбца находятся на одном уровне, без всяких сдвигов.
Правда, IE это значение не понимает (в нём сдвиги будут иметь место), но и пусть, не критично.
Главное - во всех прочих браузерах всё отображается нормально и при этом вёрстка остаётся блочной. Как никак, блочная вёрстка более гибкая как в плане форматирования, так и в плане компоновки...
Т.е. эта фигня полностью совпадает со всеми ИТ концепциями?
...
Рейтинг: 0 / 0
26.02.2014, 13:33
| Ответить | Цитировать | Написать  
15 сообщений из 15, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блочная вёрстка: 2-й столбец "плавает"...
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=107&tid=1447373]:
 0ms
get settings:
 10ms
get forum list:
 16ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 43ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 59ms
get tp. blocked users:
 2ms
others: 208ms
total:  360ms
созд. / загр.: 360ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]