Помощник
 |
|
|
|
|
Сообщение сайта
|
 Разноколоночная верстка, то 2 то 3 то 4 колонки |
radioru
|
Сообщение
#1
|
||
|
0  Группа: User Сообщений: 2 Регистрация: 13.9.2011 Поблагодарили: 0 раз Репутация:  0 
 |
|
||
 |
|
||
|
pavelsc
|
 13.9.2011, 13:40;
Ответить: pavelsc
Сообщение
#2
|
 0 Группа: User Сообщений: 745 Регистрация: 1.8.2010 Поблагодарили: 0 раз Репутация: 0
|
А зачем там скрипты? Все и так работает:
<!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> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Решение</title> </head> <body style="margin:0;padding:0;"> <div style="width:100%;height:80px;background:#ffeec2;">#Header</div> <div style="position:relative;width:100%;min-height:600px;"> <div style="position:relative;width:50%;min-height:600px;float:left;"> <div style="position:absolute;width:100%;height:250px;float:none;background:#ffef41;">#Top story</div> <div style="position:absolute;width:50%;bottom:0px;top:250px;background:#ffffff;">#Col 1</div> <div style="position:absolute;width:50%;bottom:0px;top:250px;left:50%;background:#e6e6e6;">#Col 2</div> </div> <div style="position:relative;width:50%;min-height:600px;float:left;"> <div style="position:absolute;width:50%;bottom:0px;top:0px;background:#cccccc;">#Col 3</div> <div style="position:absolute;width:50%;bottom:0px;top:0px;left:50%;background:#b3b3b3;">#Col 4</div> </div> <div style="position:absolute;bottom:0px;height:100px;width:50%;left:25%;background:#808080;">#Col 2+3</div> </div> </body> </html> |
|
|
|
|
pavelsc
|
13.9.2011, 18:37;
Ответить: pavelsc
Сообщение
#3
|
|
0 Группа: User Сообщений: 745 Регистрация: 1.8.2010 Поблагодарили: 0 раз Репутация: 0
|
А скрипт совсем простой, на случай если контент будет вылазить, в любом случае можно и вручную менять:
<!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> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Решение</title> <script type="text/javascript"> window.onload=function(){ var maxh = 0; for(i=1;i<5;i++){ document.getElementById("col"+i).scrollTop=30000; if(document.getElementById("col"+i).scrollTop>maxh)maxh = document.getElementById("col"+i).scrollTop } document.getElementById("xmain").style.height=parseInt(document.getElementById("xmain").style.height)+maxh+"px"; } </script> </head> <body style="margin:0;padding:0;"> <div style="width:100%;height:80px;background:#ffeec2;">#Header</div> <div id="xmain" style="position:absolute;top:80px;width:100%;height:500px;"> <div style="position:absolute;width:50%;bottom:0px;top:0px;"> <div style="position:absolute;width:100%;height:250px;float:none;background:#ffef41;">#Top story</div> <div id="col1" style="position:absolute;width:50%;bottom:0px;top:250px;background:#ffffff;overflow-x:auto;">#Col 1 </div> <div id="col2" style="position:absolute;width:50%;bottom:100px;top:250px;left:50%;background:#e6e6e6;overflow-x:auto;">#Col 2 </div> </div> <div style="position:absolute;width:50%;left:50%;bottom:0px;top:0px;"> <div id="col3" style="position:absolute;width:50%;bottom:100px;top:0px;background:#cccccc;overflow-x:auto;">#Col 3 </div> <div id="col4" style="position:absolute;width:50%;top:0px;bottom:0px;left:50%;background:#b3b3b3;overflow-x:auto;">#Col 4 </div> </div> <div style="position:absolute;bottom:0px;height:100px;width:50%;left:25%;background:#808080;">#Col 2+3</div> </div> </body> </html> |
|
|
|
|
radioru
|
Сообщение
#4
|
|
|
0 Группа: User Сообщений: 2 Регистрация: 13.9.2011 Поблагодарили: 0 раз Репутация: 0
|
Спасибо за ответ. Извините, я забыл уточнить, что высота #topstory переменная, зависит от контента. И остальных блоков, кроме header тоже. Вот в чем задачка то:nea:
|
|
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
 Качественный современный дизайн сайтов, логотипов, печатной продукции. Верстка. |
27 | zaiko | 17552 | 2.4.2024, 14:00 автор: zaiko |
 |
Верстка/Натяжка/Оптимизация/Увеличение функционала шаблонов на WP Разработка на профессиональном уровне |
144 | Gerga | 92103 | 11.3.2024, 19:59 автор: anchous |
|
Верстка шаблона Битрикс | 0 | bat | 1419 | 26.9.2023, 6:22 автор: bat |
|
Верстка электронных писем бесплатно | 0 | Gidemopassan | 1528 | 23.6.2023, 10:12 автор: Gidemopassan |
|
Сайт "под ключ" (дизайн, верстка, CMS) | 32 | Brans | 16531 | 19.5.2023, 22:01 автор: Brans |
|
Текстовая версия | Сейчас: 20.4.2024, 3:17 |
