Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIV в DIVe помогите! / 8 сообщений из 8, страница 1 из 1
02.04.2010, 12:40:08
    #36557509
fexus
fexus
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
Друзья! Помогите, пожалуйста, т.к. задолбался уже и силушек нет.

Вопрос: как div "кусочек 1 " и "кусочек 2 " загнать внутрь div-а "Содержимое", т.е. чтобы div "Содержимое" растягивался вниз, при его заполнении, как например боковые div-ы

Код ниже (стандартная трехколоночная верстка, из учебников):

<html>
<head>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
<div class="header" style="width:100%; height:250px; background-color:blue;">
заголовок
</div>
<div class="left" style="width:200; float:left; background-color:green;">
левое меню
<br>
<br>
<br>
<br>
</div>
<div class="right" style="width:200; float:right; background-color:red;">
правое меню
</div>
<div class="content" style="background: repeat-y scroll 0 0 transparent; margin-left:201; margin-right:201; background-color:yellow; border: thin solid #45688E;">
Содержимое
<div class="pin" style="background-color:gray; width:100px; float:left">
кусочек 1
</div>

<div class="pin" style="background-color:gray; width:100px; float:left">
кусочек 2
</div>
</div>
<div class="clear" style="clear:both;">
</div>
<div class="footer" style="height:100; background-color:brown;">
подвал
</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.04.2010, 13:14:17
    #36557626
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
fexus , как вариант...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<html>
<head>
<style>
.content {
	background: repeat-y scroll  0   0  transparent; 
	margin-left: 201 ; 
	margin-right: 201 ; 
	background-color:yellow; 
	border: thin solid #45688E;
}
#cnt_1,
#cnt_2 {
	width: 100px;
	background-color:gray;
}
</style>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
<div class="header" style="width:100%; height:250px; background-color:blue;">
заголовок
</div>
<div class="left" style="width:200; float:left; background-color:green;">
	левое меню
	<br>
	<br>
	<br>
	<br>
</div>
<div class="right" style="width:200; float:right; background-color:red;">
	правое меню
</div>
<div class="content">
	Содержимое
	<table cellpadding='0' cellspacing='0' border='0'>
	<tr>
		<td id='cnt_1'>
			<p>Кусочек  1 </p>
		</td>
		<td id='cnt_2'>
			<p>Кусочек  2 </p>
		</td>
	</tr>
	</table>
</div>
<div class="clear" style="clear:both;">
</div>
<div class="footer" style="height:100; background-color:brown;">
подвал
</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.04.2010, 13:27:55
    #36557678
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
Либо, если устроит, так...

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
<html>
<head>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
	<div class="header" style="width:100%; height:250px; background-color:blue;">
		заголовок
	</div>
	<div class="left" style="width:200; float:left; background-color:green;">
		левое меню
		<br>
		<br>
		<br>
		<br>
	</div>
	<div class="right" style="width:200; float:right; background-color:red;">
		правое меню
	</div>
	<div class="content" style="background: repeat-y scroll 0 0 transparent; margin-left:201; margin-right:201; background-color:yellow; border: thin solid #45688E;">
		Содержимое
		<div class="pin" style="background-color:gray; width:100px; float:left">
			кусочек  1 
		</div> 
		<div class="pin" style="background-color:gray; width:100px; float:left">
			кусочек  2 
		</div> 
		<div style="clear:both;"></div>
	</div>
	<div class="clear" style="clear:both;"></div>
	<div class="footer" style="height:100; background-color:brown;">
		подвал
	</div>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.04.2010, 13:54:34
    #36557768
adv
adv
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
если я правильно понял:
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
<html>
<head>
</head>
<body style="margin:0;padding:0;">
<div class="container" style="margin:0 auto; min-width:800px;">
<div class="header" style="width:100%; height:250px; background-color:blue;">
заголовок
</div>
<div class="left" style="width:200; float:left; background-color:green;">
левое меню
<br>
<br>
<br>
<br>
</div>
<div class="right" style="width:200; float:right; background-color:red;">
правое меню
</div>
<div class="content" style="background: repeat-y scroll 0 0 transparent; margin-left:201; margin-right:201; background-color:yellow; border: thin solid #45688E;">

<div style="background-color:gray; width:100px; float:left">
кусочек  1 <br><br>кусочек  1 
</div>

<div style="background-color:gray; width:100px; float:left">
кусочек  2 
</div>

<div style="background-color:yellow;">
кусочек x<br>
<br>
кусочек x<br>
<br>
кусочек x<br>
<br>

</div>

</div>
<div class="clear" style="clear:both;">
</div>
<div class="footer" style="height:100; background-color:brown;">
подвал
</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.04.2010, 14:00:31
    #36557793
fexus
fexus
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
krvsa,

о! второй вариант устраивает! Как раз то, что хотел. Только не понял, почему так произошло.

дело в clear:both, но почему именно такой эффект- не пойму. (

Колдовство?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.04.2010, 14:32:41
    #36557920
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
fexusТолько не понял, почему так произошло.
дело в clear:both, но почему именно такой эффект- не пойму. (
Про какой именно эффект спрашиваешь?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.04.2010, 14:34:11
    #36557925
fexus
fexus
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
krvsa,

Ну, то что див content стал растягиваться после того как прописали clear:both
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
02.04.2010, 14:45:48
    #36557968
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DIV в DIVe помогите!
fexus , да. Это из-за того что див со стилем

Код: plaintext
clear:both;

не может быть обтекаемым другими элементами. Т.ч. никакого колдовства...

Мне только странно почему "серединный" необтекаемый блок так влияет на левый и правый блоки... По моему разумению он должен был вести себя как и табличка в моём первом примере. Ан нет...
Может кто просвятит?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / DIV в DIVe помогите! / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 354ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1453279]:
 0ms
get settings:
 10ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 30ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 41ms
get tp. blocked users:
 2ms
others: 240ms
total:  354ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]