Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 30.06.2011, 19:05   #1
vitaljaa
 
Регистрация: 24.06.2010
Сообщений: 4
Вопрос Проблема с версткой

В верстке я еще новичок такшо если вопрос прозвучит странно то не пинайте)
На изображении показано макет моего сайта.

Вопрос в том как "Блок 2" переместить на "Место блока 2". Но при этом "Блок 1" должен остаться на своем месте а "Блок 2" должен прижиматись до футера.
Буду очень признателен за любую подсказку или решение проблемы !
vitaljaa вне форума Ответить с цитированием
Старый 30.06.2011, 20:36   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Можно уронить скриптом его. Можно разместить после футера и задать отрицательный верхний маргин.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 30.06.2011, 21:03   #3
marccella
Пользователь
 
Регистрация: 22.05.2011
Сообщений: 42
По умолчанию

вариантов много, если скините коды разметки и стилей мозхно будет подобрать самый удоный и 'безопасный' вариант.
marccella вне форума Ответить с цитированием
Старый 30.06.2011, 21:27   #4
vitaljaa
 
Регистрация: 24.06.2010
Сообщений: 4
По умолчанию

Што посоветуете ?
Цитата:
Код HTML:
<!-- CONTENT -->
<div id="main"><div class="menu_fut"></div>
<div class="cont_r">
<div class="spedbar">{speedbar}</div>

{info}{content}</div>

<div class="cont_l"><div class="cont_l1"></div>
<!-- Menu [1] -->
<div class="cont">
<div class="nav1"><p class="name">Навігація на сайті</p></div>
<div class="cont_c">
Блок 1
</div>
<div class="dont_fut"></div>	  
</div>
<!-- END Menu [1] -->

<!-- Menu [2] -->
<div class="cont">
<div class="nav2"><p class="name">Чат</p></div>
<div class="cont_c">
Блок 2
</div>
<div class="dont_fut"></div>	  
</div>
<!-- END Menu [2] -->

<!-- Menu [3] -->
<div class="cont">
<div class="nav3"><p class="name">Навігація блока 3</p></div>
<div class="cont_c">
Блок 3
</div>
<div class="dont_fut"></div>	  
</div>
<!-- END Menu [3] -->
<div class="l_fut"></div> -------------------------------------Ето и есть тот div которий нужно прижать к футеру !


</div>

  <div class="clr"></div>
<!-- CONTENT -->

<!-- FUTER -->
<div class="futer">
<div class="copiright">Copyright 2011 ©<br>Все права защищены !</div>
<div class="fut_baner"></div>
<div class="mini_baners"> 
<a href="reklama.html"><img src="{THEME}/images/88x31.png" width="88" height="31" /></a>
<a href="reklama.html"><img src="{THEME}/images/88x31.png" width="88" height="31" /></a>
<a href="reklama.html"><img src="{THEME}/images/88x31.png" width="88" height="31" /></a>
</div>
</div>
<!-- END FUTER -->
Ну и css
Цитата:
/*Menu*/
.theadmenu {float: left;background: url("../images/top_menu.png") no-repeat;height: 31px;width: 100%;overflow: hidden;}
.theadmenu ul#thmenu {float: left;margin-left: 16px;background: url("../images/thmenu.png") no-repeat 0 -65px;height: 32px;padding-left: 2px;overflow: hidden;}
.theadmenu ul#thmenu li {float: left;height: 32px;}
.theadmenu ul#thmenu li a, .theadmenu ul#thmenu li a strong {float: left;height: 32px;line-height: 32px;cursor: pointer;text-decoration: none !important;}
.theadmenu ul#thmenu li a {color: #fff;}
.theadmenu ul#thmenu li a strong {padding: 0 14px 0 14px;background: url("../images/thmenu.png") no-repeat 100% -32px;}
.theadmenu ul#thmenu li a:hover {color: #2990DF;background: #2B2B2B url("../images/thmenu.png") no-repeat 100% 0;}
.theadmenu ul#thmenu li a:hover strong {background: url("../images/thmenu.png") no-repeat 100% -135px;}
.rightserch {float:right;overflow: hidden;position: relative;width: 263px;margin-right:6px;}
.rightserch .ifield {width: 219px;height: 22px;padding: 3px 0 0 7px;}
.rightserch .ifield input {padding: 0 0 0 7px;background: transparent;width: 219px;height: 22px;color: #2876CA;font: 12px Arial, Tahoma, Helvetica, sans-serif;background: url("../images/rightserch.png") no-repeat 0 -0px;}
.rightserch .submit {position: absolute;right: 0;top: 3px;}
.rightserch .submit, .rightserch .submit input {width: 36px;height: 22px;}
.rightserch .submit input {cursor: pointer;background: url("../images/rightserch.png") no-repeat 0 -22px;}
.rightserch .submit input:hover {background: url("../images/rightserch.png") no-repeat -36px -22px;}
.menu_fut {background: url("../images/menu_fut.png") no-repeat; height:8px; width:100%; float:right; margin:0px auto 5px auto;}

/*Content*/
.cont_l, .cont_r {float: right;overflow: hidden;}

.cont_l { float:left; background:#DFDFDF url("../images/cont_left.png") repeat-y; width:255px; margin-bottom: -1000em;padding-bottom: 1000em; }
.cont_l1 {background:url("../images/cont_left_h.png") no-repeat 0 0; height:52px; width:238px; font-size:18px; position:absolute;}

.cont { margin:10px 0 0 7px; width:240px;}



.cont_c {background:url("../images/menu1.png") repeat-y -240px 0; padding:0 20px 0 20px;}
.dont_fut {background:url("../images/menu1.png") no-repeat -480px 0; height:21px;}

.name { color:#CCCCCC; font-size:16px; padding-left:20px; padding-top:10px;font-weight: bold;}
.nav1 {background:url("../images/menu1.png") no-repeat 0 0; height:48px;overflow: hidden;}
.nav2 {background:url("../images/menu2.png") no-repeat 0 0; height:48px;overflow: hidden;}
.nav3 {background:url("../images/menu3.png") no-repeat 0 0; height:48px;overflow: hidden;}

.l_fut {background:url("../images/l_fut.png") no-repeat; height:153px; margin-bottom:-1px; }

.cont_r { float:right; background-color:#f6f5f5; width:747px; margin-bottom: -1000em; padding-bottom: 1000em;}

.spedbar { background: url("../images/spedbar.png") no-repeat; height:74px; padding:22px 0 0 28px; margin: 0 0 0 4px;}
.spedbar a{font-size:17px; color:#FFFFFF;}
vitaljaa вне форума Ответить с цитированием
Старый 01.07.2011, 00:27   #5
marccella
Пользователь
 
Регистрация: 22.05.2011
Сообщений: 42
По умолчанию

хммм я надеялся что сайт будет в лаицовом виде как и картинка. Сложно чтото конкретизировать когда Вы даете разметку где куча картинок, тогда хорошо бы уже выложыть куданибуть, и код очень захламленный (WYSIWYG?), много лишнего. Зачем у одного и тогоже селектора в декларационном блоке 'padding-bottom: 1000em' и 'margin-bottom: -1000em'.

Я зделал так:

Код:
.cont_l { float:left; background:#DFDFDF url("../images/cont_left.png") repeat-y; width:255px; height: 1000px; position: relative; } //Убрал для себя непонятный 'margin' и 'padding', задал высоте 1000 пикселей для пробы и 'position: relative;' чтобы задать рамки для элемента с классом 'l_fut' при его абсолютном позиционировании
.l_fut {background: url("../images/l_fut.png") no-repeat; height:153px; margin-bottom:-1px; position: absolute; bottom: 0;}  //задал абсолютное позиционирование и прикрепил к ко дну контейнера с классом 'cont_l'.
Да и div id="main" у вас не закрыт (отсутствует </div> у этого элемента)

Последний раз редактировалось marccella; 01.07.2011 в 00:36.
marccella вне форума Ответить с цитированием
Старый 01.07.2011, 01:01   #6
vitaljaa
 
Регистрация: 24.06.2010
Сообщений: 4
По умолчанию

Зделал как ти посоветовал...но блок с меню не дотягнулса к футеру а <div class="l_fut"></div> вопше не отображаетса( как бить :?
Можете дать аську ?
vitaljaa вне форума Ответить с цитированием
Старый 02.07.2011, 20:23   #7
vitaljaa
 
Регистрация: 24.06.2010
Сообщений: 4
По умолчанию

что никто не знает?
vitaljaa вне форума Ответить с цитированием
Старый 03.07.2011, 11:06   #8
Алексей Алексеев
Новичок
Джуниор
 
Регистрация: 03.07.2011
Сообщений: 1
По умолчанию

Цитата:
Сообщение от vitaljaa Посмотреть сообщение
что никто не знает?
Можно сделать очень просто
слева сделать таблицу - указать 3 горизонтальных строки- высоту таблице задать 100%
а высоту нижней и верхней части (блоков) сделать точными- тогда середина растянется и все будет ок!
Алексей Алексеев вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
CSS. Проблема с блочной версткой. m0rt HTML и CSS 10 10.03.2011 11:27
Все ли нормально с версткой сайта? FACE OFF Помощь студентам 0 27.11.2010 23:11
проблемы с версткой AlexanderSolo HTML и CSS 1 20.11.2010 20:21
Проблемы с 2-колоночной резиновой версткой в IE jown HTML и CSS 0 21.07.2010 18:37
Есть проблема с версткой на div. Накладывается фон поверх соседнего контейнера. Volfgang HTML и CSS 1 15.12.2008 09:43