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,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors