Sign in to follow this  
Trust

Нипанятна...(с)

Recommended Posts

Подскажите пожалуйста, как растянуть блок на всю высоту родительского блока от пола до низа?

Share this post


Link to post
Share on other sites

И ещ?, как сделать так, чтобы в отсутствии контена тело сайта растягивалось на высоту экрана? Пожалуйста, подскажите!!!

Share this post


Link to post
Share on other sites

Ограменная пасиба, ARA!

А ещ? вопрос, как сделать так, чтобы при вышенаписанных изменениях, которые я уже вн?с в шаблон, сделать так, чтобы один из блоков div выровнять align="bottom"?;)

Share this post


Link to post
Share on other sites

Вс?, сам доп?р;)

Теперь ещ? одна проблема. Не могу сделать так, чтобы блоки ВНУТРИ блока растягивались на 100%. При помощи height="100%"; min-height:"100%" сделал нормально только в ie, а в двух других - хрен...

Вот код:

html

<!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=windows-1251" />
<title>:)</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<div id="a">
<div id="k"></div>
<div id="m"></div>
</div>
<div id="r"></div>
<div id="l"></div>
</div>
<div id="fg"></div>

</body>
</html>

css

* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
min-height:100%
}
#container {
width: 1000px;
background-color: #F2F2F2;
text-align: center;
min-height: 96%;
margin-left:auto;
margin-right:auto
}
* html #container {
height: 95%;
}

#a {
height:160px;
background-color:#FF0000;
width:1000px
}

#r {
width: 400px;
background-color: #cccccc;
float:left;
height:inherit
}

#l {
width: 400px;
background-color: #cccccc;
float:right;

}

#fg {
height:4px;
width:1000px;
margin-left:auto;
margin-right:auto
}

#k {
width:800px;
height:130px;
background-color:#999999;
float:left
}

#m {
width:200px;
height:130px;
background-color:#ffffff;
float:right
}

Share this post


Link to post
Share on other sites

Вот ссылка на сайт - www.webinteractions.ru. Там правый блок (с синей шапкой) должен до пола растягиваться.

Share this post


Link to post
Share on other sites

Может меня вообще кто-нибудь лично проконсльтировать? А то я щас нафиг ап стенку убьюсь;)

Share this post


Link to post
Share on other sites

Во первых, забыли слэш, это обязательное правило для XHTML

<link href="css/css.css" rel="stylesheet" type="text/css" />

А вот если по ссылке смотреть, то как раз тэг

закрывать не нужно...

я так понимаю, то что тут вы пытаетесь получить, будет "внедренно" в тот код что по ссылке, тогда почему у них абсолютно разные DOCTYPE, вы понимаете что браузеры будут выводить один и тот же код, по разному? То что работает при одном DOCTYPE далеко не факт что сработает в другом, вы себя самми за нос и водите! Сведите к одному

в стилях достаточно написать background, и указать цвет, background-color используется для более спицифических целей, с опытом поймете

в общем сделайте общий код, вставте его сюда, и покажите что хотите получить, начеркайте блоки в каком-нить редакторе (показывать сайт мне не надо, не хочу заморачиватся), и я попытаюсь помочь

p.s. я не советую вам растягивать блок на всю высоту экрана, это не лучший способ это раз, можно создать иллюзию что блок растянут по высоте это два! И тут есть такие примеры, у вас не правильный подход к верстке

Share this post


Link to post
Share on other sites

Может пока не правильный, но я стараюсь;) Я никогда не делал сайты так, чтобы они растягивались на полную высоту экрана, вот поэтому и начал мутить.

Share this post


Link to post
Share on other sites

У меня сейчас две проблемы: нужно сделать так, чтобы правый серый блок тянулся до пола и чтобы модуль поиска отображался коррекно в IE.

Я совершенно не могу понять почему отображается таким образом модуль поиска в ie. Мало того, что он намного правее, но ещ? и правый серый блок отодвигается вниз.

Вот html

<?php defined( '_VALID_MOS' ) or die( 'Ainooi cai?au?i' ); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<link href="<?php echo $GLOBALS['mosConfig_live_site'];?>/templates/<?php
echo $GLOBALS['cur_template']; ?>/css/css.css" rel="stylesheet" type="text/css" />
</head>
</head>
<body>
<div id="container">
<div id="a">
<div id="logo"></div>
<div id="k"></div>
<div id="m">
<?php mosLoadModules ( 'm1' ); ?>
</div>
<div id="m2"><?php mosLoadModules ( 'm2' ); ?></div>
</div>
<div id="r">
<div id="sh"></div>
</div>
<div id="po">
<?php mosLoadModules ( 'poisk' ); ?>
</div>
<div id="l"><?php echo mosMainBody();?></div>
<div id="fg">
<div id="f1"></div>
<div id="f2"><?php mosLoadModules ( 'f' ); ?></div>
</div>
</div>
</body>
</html>

Вот css

* {
padding: 0;
margin: 0;
}

html, body {
height: 100%;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

#container {
width: 1000px;
text-align: center;
min-height: 100%;
margin-left:auto;
margin-right:auto;
height:100%
}

* html #container {
height: 100%;
}

#a {
height:130px;
width:1000px;
}

#rig {
height:133px;
width:100px;
background:#FFFFFF
}

#po {
width:290px;
text-align:left;
margin-top:10px;
float:left;
margin-left:290px
}

.inputbox-poisk {
border:1px solid #7f9db9;
height:15px;
font-size:9px;
float:left;
width:150px
}

.moduletable-poisk {
float:left;
color:#9c0000;
font-size:10px;
text-align:left;
margin-bottom:4px;
}

.button-poisk {
border:1px solid #7f9db9;
font-size:10px;
color:#9c0000;
background-color:#FFFFFF;
height:17px;
margin-left:10px;
margin-top:1px;
padding-bottom:2px;
width:80px
}

#logo {
background-image:url(../images/lev.jpg);
background-repeat:no-repeat;
width:137px;
height:208px;
float:left
}

#r {
width: 265px;
background-color:#f4f8ff;
margin-top:2px;
float:right;
min-height:100%;
height:100%;
margin-right:5px;
margin-bottom:40px;
padding-bottom:40px;
}



#sh {
background-image:url(../images/pal.jpg);
background-repeat:repeat-x;
height:29px;
}

#l {
width: 710px;
float:left;
margin-top:2px
}

#l img {
border:1px solid #999999;
margin-right:4px;
margin-top:2px
}

#fg {
height:4%;
width:100%;
float:left

}

#f1 {
height:18px;
background-color:#9c0000;
width:1000px;
margin-left:auto;
margin-right:auto
}

#f2 {
height:25px;
background-color:#ffffff;
width:1000px;
margin-left:auto;
margin-right:auto;
text-align:right
}

.moduletable-fo {
float:right;
margin-top:5px;
font-size:10px;
color:#666666;
margin-right:30px
}

.moduletable-fo a {
font-size:10px;
color:#666666
}


#k {
width:670px;
height:133px;
float:left;
background-image:url(../images/kart.jpg);
background-repeat:no-repeat;
}

#m {
width:163px;
height:133px;
background-color:#ffffff;
float:right;
background-image:url(../images/b.jpg);
background-position:left top;
background-repeat:no-repeat;
text-align:left;
}

#m2 {
width:863px;
height:23px;
float:right;
background:#9c0000;
}

.moduletable-mainlevel {
width:69px;
margin-top:30px;
margin-left:40px;
}

a.mainlevel-mainlevel:link, a.mainlevel-mainlevel:visited, a#active_menu-mainlevel.mainlevel-mainlevel {
background-image:url(../images/but.jpg);
background-repeat:no-repeat;
font-size:10px;
color:#9c0000;
text-decoration:none;
padding-left:15px;
width:69px;
line-height:6px;

}

table.moduletable-mainlevel {
margin-top:30px;
margin-left:40px;
padding: 0px;
}

.mainlevel-mainlevel {
height:17px;
display:block;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:left;
white-space:nowrap;
}

.contentpaneopen td {
font-size:11px;
text-align:justify;
background-color:#f4f8ff;
border: 1px solid #e3e3e3;
border-top:none;
color:#494949;
padding:10px 7px 7px 7px;
}

table.contentpaneopen {
margin-top:-5px;
border-bottom:none;
width:100%;
}

td.contentheading {
border-bottom:none;
width:100%;
padding-top:5px;
border-top: 4px solid #e3e3e3;
background-image:url(../images/li.jpg);
background-repeat:no-repeat;
color:#990000
}

td.contentheading a {
font-size:11px;
color:#9c0000;
text-decoration:none

}

Спасите помогите!!!;)

p.s. я не советую вам растягивать блок на всю высоту экрана, это не лучший способ это раз, можно создать иллюзию что блок растянут по высоте это два! И тут есть такие примеры, у вас не правильный подход к верстке

Согласен, не подскажите как это сделать на примере вышепривед?нного кода?

Share this post


Link to post
Share on other sites

Вот последняя версия кода:mad: уже не могу...))

Вс? что нужно, это чтобы правый серый блок тянулся до пола и тянул за собой нижнюю часть (футер). И ТОЛЬКО И ВСЕГО! но я не знаю, как это сделать...

html

<?php defined( '_VALID_MOS' ) or die( 'Доступ ограничен' ); ?>
<!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" lang="<?php echo _LANGUAGE; ?>"
xml:lang="<?php echo _LANGUAGE; ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<link href="templates/<?php echo $cur_template; ?>/css/css.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="a">
<div id="k">
<div id="ba"></div>
</div>
<div id="m"><?php mosLoadModules ( 'm1' ); ?></div>
</div>

<div id="m2">
<?php mosLoadModules ( 'm2' ); ?>
</div>

<div id="telo">
<div id="l">
<div id="po">
<div id="lev"></div>
<div id="poi"><?php mosLoadModules ( 'poisk' ); ?></div>
</div>
<div id="te"><?php echo mosMainBody();?></div>
</div>
<div id="container">
<div id="sh"></div>
</div>

<div id="fg">
<div id="f1"></div>
<div id="f2"><?php mosLoadModules ( 'f' ); ?></div>
</div>

</div>

</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
font-size:11px;

}
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}

* html #container {
height: 100%;
}

#a {
height:130px;
width:1000px;
margin-left:auto;
margin-right:auto
}

#k {
width:670px;
height:133px;
float:left;
background-image:url(../images/kart.jpg);
background-repeat:no-repeat;
}

#ba {
background-image:url(../images/lev1.jpg);
background-repeat:no-repeat;
width:132px;
height:133px
}

#m {
width:163px;
height:130px;
background-color:#ffffff;
float:right;
background-image:url(../images/b.jpg);
background-position:left top;
background-repeat:no-repeat;
text-align:left;
}

#m2 {
width:1000px;
margin-left:auto;
margin-right:auto;
height:23px;
background:#9c0000;
background-image:url(../images/lev2.jpg);
background-repeat:no-repeat
}

#lev {
width:132px;
height:44px;
background-image:url(../images/lev3.jpg);
background-repeat:no-repeat;
float:left
}

#telo {
width:1000px;
margin-left:auto;
margin-right:auto;
}

#l {
float:left;
width:710px;
height:auto
}

#container {
float:right;
width:265px;
background:#f4f8ff;
min-height:100%;
margin-top:1px
}

#po {
height:50px
}

#poi {
height:30px;
width:250px;
float:right;
margin-right:15px;
margin-top:3px
}

#sh {
background-image:url(../images/pal.jpg);
background-repeat:repeat-x;
height:29px;
}

#te {
height:50px
}

#fg {
height:40px;
width:1000px;
margin-left:auto;
margin-right:auto;
float:left
}

#f1 {
height:18px;
background-color:#9c0000;
width:1000px;
}

#f2 {
height:25px;
background-color:#ffffff;
width:1000px;
text-align:right;
}

.moduletable-fo {
float:right;
margin-top:5px;
font-size:10px;
color:#666666;
margin-right:30px
}

.moduletable-fo a {
font-size:10px;
color:#666666
}

.moduletable-mainlevel {
width:69px;
margin-top:15px;
margin-left:25px;
}

a.mainlevel-mainlevel:link, a.mainlevel-mainlevel:visited, a#active_menu-mainlevel.mainlevel-mainlevel {
background-image:url(../images/but.jpg);
background-repeat:no-repeat;
font-size:10px;
color:#9c0000;
text-decoration:none;
padding-left:15px;
width:69px;
line-height:6px;

}

table.moduletable-mainlevel {
margin-top:20px;
margin-left:30px;
padding: 0px;
}

.mainlevel-mainlevel {
height:17px;
display:block;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
text-align:left;
white-space:nowrap;
}

.contentpaneopen td {
font-size:11px;
text-align:justify;
background-color:#f4f8ff;
border: 1px solid #e3e3e3;
border-top:none;
color:#494949;
padding:10px 7px 7px 7px;
}

table.contentpaneopen {
margin-top:-5px;
border-bottom:none;
width:100%;
}

td.contentheading {
border-bottom:none;
width:100%;
padding-top:5px;
border-top: 4px solid #e3e3e3;
background-image:url(../images/li.jpg);
background-repeat:no-repeat;
color:#990000
}

td.contentheading a {
font-size:11px;
color:#9c0000;
text-decoration:none

}

.inputbox-poisk {
border:1px solid #7f9db9;
height:15px;
font-size:9px;
float:left;
width:150px
}

.moduletable-poisk {
float:left;
color:#9c0000;
font-size:10px;
text-align:left;
margin-bottom:4px;
}

.button-poisk {
border:1px solid #7f9db9;
font-size:10px;
color:#9c0000;
background-color:#FFFFFF;
height:17px;
margin-left:10px;
margin-top:1px;
padding-bottom:2px;
width:80px
}

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Member Statistics

    46,451
    Total Members
    3,128
    Most Online
    rhouland
    Newest Member
    rhouland
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Вернулся в свою созданную тему через 4,5 года. )) После создания темы около года верстал заказы на фрилансе. От обычной верстки до полноценных LP и небольших сайтов. Даже один раз из своей верстки шаблон Wordpress сделал.   Потом заинтересовался другими нишами и верстку забросил. Арбитражил, занимался СЕО, даже трейдил криптовалютой больше года. Но опять потянуло в вебразработку. Пытаюсь снова все вспомнить. Мешает только основная работа - мало времени остается на своё хобби.  В общем, кому сроки не жмут и кто не боится доверится джуниору, милости просим. Сверстаю, подправлю, помогу. В свободное от работы время. Бескорыстно. Просто хочется снова покодить и не просто так, а чтобы с пользой.  Почта : zdl79@mail.ru Skype : forest19791 Телеграмм : https://t.me/forestino
    • Могу попробовать. Опыт верстки 1 год. Но в связи с основной работой, не связанной с IT, мало на это времени. zdl79@mail.ru
    • Здравствуйте, кажется я делаю что-то не так, но вот что именно никак не пойму.
      Проблема в следующем: подключаю карусель и блок становится неактивен, хотя вроде бы все должно работать как нужно.
      Пробовал подключать карусель и через cdn и через скачанный архив - результат один и тот же.
      Открывал через google, firefox и opera-у - все так же никакого сдвига.
      Подключал по инструкции на официальном сайте.
      Пробовал использовать SlickSlider, но результат тот же.
  • Popular Contributors