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

Trust · May 20, 2008

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

Trust · May 20, 2008

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

ARA · May 20, 2008

вот здесь читали?

Dimitry Wolotko · May 20, 2008

mmm dwnew

Trust · May 21, 2008

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

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

Trust · May 21, 2008

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

Теперь ещ? одна проблема. Не могу сделать так, чтобы блоки ВНУТРИ блока растягивались на 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
}

Trust · May 21, 2008

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

Trust · May 21, 2008

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

ARA · May 21, 2008

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

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

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

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

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

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

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

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

Trust · May 22, 2008

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

Trust · May 22, 2008

У меня сейчас две проблемы: нужно сделать так, чтобы правый серый блок тянулся до пола и чтобы модуль поиска отображался коррекно в 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. я не советую вам растягивать блок на всю высоту экрана, это не лучший способ это раз, можно создать иллюзию что блок растянут по высоте это два! И тут есть такие примеры, у вас не правильный подход к верстке

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

Trust · May 23, 2008

Вот последняя версия кода: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
}

Sign In

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

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information