Форум PHP программистов > верстка помощь

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Por$h

5.10.2011 - 14:48

Не получается установить авто-высоту для боковых блоков что бы отображался фон. в зависимости от центрального,основного контентного блока.

Пробовал 2 способами:
1. блочным :


<head.....>

<div id="content_wrap">
        <div id="shadow_l"></div>
        <div id="content">

         </div>
        <div id="shadow_r"></div>
</div>

<foot.....>

#content_wrap{
width:970px;
margin: 0 auto;
}
#shadow_l{
float:left;
background:url(images/shadow.png) repeat-y;
width:10px;

}
#shadow_r{
width:10px;
background:url(images/shadow.png) repeat-y;
float:right;
}
#content {
float:both;
width:950px;
margin:0 auto;
}

2.табличным что-то вроде

<table>
<tr>
      <td id="shadow_l"></td>
      <td id="content"></td>
      <td id="shadow_r"></td>
</tr>
</table>

Вообщем справа и слева от контента 2 полосы шириной в 10px..
полосы должны расширятся по длине контента..
Как сделать?

Спустя 23 часа, 29 минут, 47 секунд (6.10.2011 - 13:17) McLotos написал(а):

Цитата

полосы должны расширятся по длине контента..

Что значит расширяться по длине? Не совсем понял. Т.е. нужно чтобы они были прилеплены к нижнему краю? Тогда не по ширине, а по высоте! =)

/*Левая колонка
-----------------------------------------------------------------------------*/
#sideLeft {
	float: left;
	width: 250px;
	position: relative;
	left: -250px;
}


/* Правая колонка
-----------------------------------------------------------------------------*/
#sideRight {
	float: right;
	margin-right: -250px;
	width: 250px;
	position: relative;
}

как-то так?
Т.е. в результате получится что высота обеих колонок одинаковая и равна высоте центра.

Спустя 5 минут (6.10.2011 - 13:22) TranceIT написал(а):

Где-то я встречал решение. Использовался трюк с background-image. Найду, дам ссылку.

Спустя 6 часов, 46 минут, 27 секунд (6.10.2011 - 20:09) ceil100 написал(а):

что за float:both; ?
такого свойства не существует


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		body,html{width:100%;height:100%;margin:0;padding:0;}
		#wrap{height:100%;width:900px;margin:auto;}
		#left,#right {width:10px;height:100%;background:#666}
		#left {float:left}
		#right {float:right}
		#content{height:100%;margin:0 10px; background:#ae35aa;}
	</style>
</head>
<body>
	<div id="wrap">
		<div id="left"></div>
		<div id="right"></div>
		<div id="content"></div>
	</div>
</body>
</html>

в #wrap{height:100%; <-пишешь высоту

Спустя 22 минуты, 41 секунда (6.10.2011 - 20:32) ceil100 написал(а):

если нужен еще footer прижатый книзу, то это другая схема, более сложная

Спустя 40 минут, 2 секунды (6.10.2011 - 21:12) redreem написал(а):

вот пример 3-х колонок одинаковой высоты дивами. замените боковые на ваши тени и будет щастье.

<!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" xml:lang="ru">
<head id="headId">
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<style type="text/css">
.wrap1 {
	width:100px;
	background:blue;
	
}
 
.wrap2 {
	width:400px;
	margin-right:-100px; 
	position:relative;
	left: 100px;
	background:red;
	
}
.wrap3 {
	width:200px;
	margin-right:-400px; 
	position:relative;
	left: 400px;
	background:green;
	
}
 
.col1 {
	float:left;
	width:100px;
	margin-right:-500px;
	position:relative;
	left:-500px;
}
.col2 {
	float:left;
	width:400px;
	margin-right:-400px;
	position:relative;
	left:-400px;
}
.col3 {
	float:left;
	width:200px;
	position:relative;
	left:0;
	height:130%;
}

.col3up {height:50%;background:yellow}
.col3down {height:50%;background:grey}
 
.clear {clear:both;overflow:hidden;}
</style>

<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
		<div class="col1">
			left column<br>
			left column<br>
			left column<br>
			left column<br>
			left column<br>
			left column<br>
			left column<br>
			left column<br>
			left column<br>
		</div>
		
		<div class="col2">
			center column<br>
			center column<br>
			center column<br>
			center column<br>
		</div>
		
		<div class="col3">
			right column<br>
		</div>
		<div class="clear"></div>
</div>
</div>
</div>

</body>
</html>

Спустя 21 минута, 19 секунд (6.10.2011 - 21:33) ceil100 написал(а):

Цитата (redreem @ 6.10.2011 - 18:12)

вот пример 3-х колонок одинаковой высоты дивами. замените боковые на ваши тени и будет щастье.
<!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" xml:lang="ru">
<head id="headId">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
</head>
<body>
<style type="text/css">
.wrap1 {
width:100px;
background:blue;

}

.wrap2 {
width:400px;
margin-right:-100px;
position:relative;
left: 100px;
background:red;

}
.wrap3 {
width:200px;
margin-right:-400px;
position:relative;
left: 400px;
background:green;

}

.col1 {
float:left;
width:100px;
margin-right:-500px;
position:relative;
left:-500px;
}
.col2 {
float:left;
width:400px;
margin-right:-400px;
position:relative;
left:-400px;
}
.col3 {
float:left;
width:200px;
position:relative;
left:0;
height:130%;
}

.col3up {height:50%;background:yellow}
.col3down {height:50%;background:grey}

.clear {clear:both;overflow:hidden;}
</style>

<div class="wrap1">
<div class="wrap2">
<div class="wrap3">
<div class="col1">
left column<br>
left column<br>
left column<br>
left column<br>
left column<br>
left column<br>
left column<br>
left column<br>
left column<br>
</div>

<div class="col2">
center column<br>
center column<br>
center column<br>
center column<br>
</div>

<div class="col3">
right column<br>
</div>
<div class="clear"></div>
</div>
</div>
</div>

</body>
</html>

Это фантастика!
В таком маленьком коде сделать столько ошибок!Супер!
Я в восхищении!Королева в восхищении, как кричал Бегемот!
Нет слов!Только эмоции

Прошу прощения, не часто такое увидишь

Спустя 2 часа, 4 минуты, 42 секунды (6.10.2011 - 23:38) redreem написал(а):

Полегче с высказываниями.

Invis1ble

Спустя 5 часов, 54 минуты, 47 секунд (7.10.2011 - 05:32) ceil100 написал(а):

Я. конечно, извиняюсь, но объявлять стили в body или давать id headу это не просто дурной тон,это грубейший ляп.
Городить столько вложенных дивов, причем родительский див меньше дочернего вообще против правил верстки.
Ну и так далее

Прежде, чем давать советы по чему-либо, может стоит почитать учебники и справочники?
А то, самому же потом и будет стыдно

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

Спустя 4 часа, 40 минут, 25 секунд (7.10.2011 - 10:13) redreem написал(а):

бред

Спустя 5 часов, 20 минут (7.10.2011 - 15:33) Por$h написал(а):

Всем спасибо за комменты и советы.Я нашёл решение гораздо более простое к решению именно моей проблемы..Мне стоило сказать ранее,что эти "тени" одинаковые.Вообщем я просто сделал 1x1 px тень эту..дал background repeat;
шириной в 970px и в этот див засунул свой контент шириной в 950px ..margin:0 auto; и стало выглядеть по бокам эта тень в 10 px; )

<div id="cont_wrap"> 
     <div id="content">
     </div>
</div>

#cont_wrap{
width:970px;
margin: 0 auto;
background:url(images/sh.png) repeat;
}
#content {
width:950px;
background:#fff;
margin:0 auto;
}

Спустя 1 день, 6 часов, 27 минут, 17 секунд (8.10.2011 - 22:00) YVSIK написал(а):

ceil100 сообщений 10) время на форуме На форуме: 2 дня все в цитире , самое время показать свой вариант вашего кода!!
это самое то что от тебя требуется!!

Спустя 2 часа, 21 минута, 32 секунды (9.10.2011 - 00:22) sebastjan написал(а):

ceil100
Не будь категоричной.
Суть вопроса не в расположении стилей.
Твои коменты пустая болтовня, а сам вопрос автора действительно интересный.
Сам бъюсь над проблемой див вёрстки - излогаю.
-Позиционирование по центру.
-Высота резиновая, не зависимо от содержания всегда на 100% по высоте.
-Три колонки (левая, центр-тело страницы, правая).
И подвал естественно всегда внизу.
Каждая колонка должна быть опредёлённого цвета и по высоте 100% с документом.
--НУ самое вкусное на последок-должно отображаться в ИЕ6 и так далее, ФФ, ОПЕРЕ ОДИНАКОВО.
Никакого яваскрипт.
--------------------------------------------------------------------------------------------------
Ну так вот -пока что после долгих испыта, применений хаков, пока что удачно работает схема но без цветных колонок , вернее не удаёться сделать высоту колонок в 100% от документа и задать им бг-цвет.
Страница резиновая по высоте, подвал всегда внизу, страница тянется от зависимости контента, но колонки подрезаются сразу по окончанию контента.
Нашол вариант с эмитации колонки, где просто заливаеться цвет мета колонки прямоугольником по высоте.
Но этот метод имеет недостаток, прямоугольник -картинка которым заливается бг-фон по вертикали должен быть по ширине колонки, иначе сказать чтоб изменить ширину в дальнейшем - придёться прикручивать другой прямоугольник по ширине.
-----------------
В общем пока что не готов полный вариант для открытия темы, как только закончу обязательно представлю общественности.
А пока что в теме вёрстка выставлю макет -резиновый-див 100% на 100% с этими чёртовыми колонками разных цветов.
Работает в ИЕ6, ФФ,опере.

Быстрый ответ:

Здесь расположена полная версия этой страницы.