Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Проблема с 3 div-ами по горизонтале / 11 сообщений из 11, страница 1 из 1
30.10.2007, 15:33
    #34904986
Verik
Verik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
Проблема с 3 div-ами по горизонтали

Помогите плиз! Вобщем, проблема в следующем: мне нужно сделать 3 div-а по горизонтали. Сделал, но в IExplorer между ними появляется промежуток. Посоветуйте что делать.

Сделать нужно вот такую структуру:
Код: plaintext
1.
2.
3.
|-----| |-----------------------------------------------| |-----|
|     | |                                               | |     |
|-----| |-----------------------------------------------| |-----|

Я делал это так:
Код: 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.
CSS:
#div1 {
   float: left;
   border: 1px solid # 000 ;
   height: 40px;
   width: 40px;
}
#div2 {
   float: right;
   border: 1px solid # 000 ;
   height: 40px;
   width: 40px;
}
#div3 {
   margin-left: 40px;
   margin-right: 40px;
   border: 1px solid # 000 ;
   height: 40px;
   width: auto;
}

HTML:
.....
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
.....
P.S. Проблема только в IE!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 15:48
    #34905048
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
А таблички уже не катят?
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 15:56
    #34905080
Verik
Verik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
Как не горько это слышать, но это так. Новые стандарты запрещают использование таблиц для разметки рабочей области.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 16:13
    #34905151
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
Чем же они провинились?
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 18:31
    #34905661
PhoenixNET
PhoenixNET
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
В IE margin'ы блочных элементов в 2 раза больше от того, что пишите в свойстве.
Лечится dislplay:inline;
В будущем может ещё возникнуть проблема 3-хпиксельного просвета между плавающим и статическим элементом, тогда google -> 3 pixel gap.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 22:16
    #34905984
Hektor
Hektor
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
krvsaЧем же они провинились?


Таблицы ни в чем не провинились, просто это уже история.

VerikПроблема с 3 div-ами по горизонтали

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

Код: 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.
53.
54.
<html>
<head>
  <style type="text/css">
	<!--
		body {
			margin: 0px;
			padding: 0px;
		}
		#div1 {
			border: 1px solid # 000 ;
			height: 40px;
			width: 40px;
			background-color: # 999999 ;
			position: absolute;
			left: 0px;
			top: 0px;
			margin-left: -40px;
		}
		/* Здесь используем хак для Firefox и Opera */
		html>body #div1 {
			margin-left: 0px;
		}
		#div3 {
			position: absolute;
			right: 0px;
			top: 0px;
   			border: 1px solid # 000 ;
   			height: 40px;
   			width: 40px;
			background-color: #00CC66;
		}
		#div2 {
   			border: 1px solid # 000 ;
   			height: 40px;
   			width: auto;
			background-color: #00CCFF;
		}
		#center {
			position: relative;
			padding: 0px 40px 0px 40px;
		}
	-->
	</style>
</head>
  <body>
	<div id="center">
		<div id="div2">
			Если здесь находится контент, то желательно, чтобы он был в 
			html коде выше других блоков. Это очень важно для раскрутки сайта.
		</div>
		<div id="div1"></div>
		<div id="div3"></div>
	</div>
  </body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 22:43
    #34906007
Verik
Verik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
Спасибо за помошь идея отличная!

Но если я пытаюсь всё включить ещё в один div, то опять в IE что-то непонятное.
Код: 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.
53.
54.
55.
56.
57.
58.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <style type="text/css">
	<!--
		body {
			margin: 0px;
			padding: 0px;
		}
		#div1 {
			border: 1px solid # 000 ;
			height: 40px;
			width: 40px;
			background-color: # 999999 ;
			position: absolute;
			left: 0px;
			top: 0px;
			margin-left: -40px;
		}
		/* Здесь используем хак для Firefox и Opera */
		html>body #div1 {
			margin-left: 0px;
		}
		#div3 {
			position: absolute;
			right: 0px;
			top: 0px;
			float:right;
   			border: 1px solid # 000 ;
   			height: 40px;
   			width: 40px;
			background-color: #00CC66;
		}
		#div2 {
   			border: 1px solid # 000 ;
   			height: 40px;
   			width: auto;
			background-color: #00CCFF;
		}
		#center {
			position: relative;
			padding: 0px 40px 0px 40px;
		}
	-->
	</style>
</head>
  <body>
<div style="margin:60px; border:1px solid #000"> <!-- Контейнер -->
	<div id="center">
		<div id="div2">
			Если здесь находится контент, то желательно, чтобы он был в 
			html коде выше других блоков. Это очень важно для раскрутки сайта.
		</div>
		<div id="div1"></div>
		<div id="div3"></div>
	</div>
</div>
  </body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 23:38
    #34906055
agrasoff
agrasoff
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
VerikКак не горько это слышать, но это так. Новые стандарты запрещают использование таблиц для разметки рабочей области.а можна ссылку про стандарты почитать?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 23:41
    #34906057
Verik
Verik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
PhoenixNETВ будущем может ещё возникнуть проблема 3-хпиксельного просвета между плавающим и статическим элементом, тогда google -> 3 pixel gap.
Спасибо PhoenixNET за подсказку, то что нужно.

Вот результат:
Код: 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
	div#demoContainer {
		width: 500px;
		background: blue;
	}
	div#demoLeftDiv
	{
		width: 100px;
		height: 50px;
		background: yellow;
		float: left;
	}
	div#demoRightDiv
	{
		margin-left: 100px;
		width: auto; 
		height: 50px;
		background: red;
	}
</style>
<!--[if lt IE 7]>
<style type="text/css">
	div#demoLeftDiv
	{
		margin-right: -3px;
	}
	div#demoRightDiv
	{
		margin-left: 0px;
	}
</style>
<![endif]-->
</head>

<body>
<div id="demoContainer">
	<div id="demoLeftDiv"> </div>
	<div id="demoRightDiv"> </div>
</div>

</body>
</html>

Вот только это реализация для 2-х div-вов, а мне нужно для 3-х (немогу сам никак сделать). Помогите!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.10.2007, 23:43
    #34906060
Verik
Verik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
agrasoffа можна ссылку про стандарты почитать?

Вот и ссылка: http://www.w3.org/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.10.2007, 00:07
    #34906072
Verik
Verik
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Проблема с 3 div-ами по горизонтале
Огромное СПАСИБО, всем кто мне помогал. Ещё раз убедился, что это отличный форум! Проблема решена, тему можно закрывать .

Кому интересно ниже привожу решение проблемы:
Код: 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.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
	div#demoContainer {
		width: 500px;
		background: blue;
	}
	div#demoLeftDiv
	{
		width: 100px;
		height: 50px;
		background: yellow;
		float: left;
	}
	div#demoRightDiv
	{
		margin-left: 100px;
		margin-right: 100px;
		width: auto; 
		height: 50px;
		background: red;
	}
	div#demoRight2Div
	{
		width: 100px;; 
		height: 50px;
		background: black;
		float:right;
	}
</style>
<!--[if lt IE 7]>
<style type="text/css">
	div#demoLeftDiv
	{
		margin-right: -3px;
	}
	div#demoRightDiv
	{
		margin-left: 0px;
		margin-right: 0px;
	}
	div#demoRight2Div
	{
		margin-left: -3px;
	}

</style>
<![endif]-->
</head>

<body>
<div id="demoContainer">
	<div id="demoLeftDiv"> </div>
	<div id="demoRight2Div"> </div>
	<div id="demoRightDiv"> </div>
</div>

</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Проблема с 3 div-ами по горизонтале / 11 сообщений из 11, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 513ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1457440]:
 0ms
get settings:
 8ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 173ms
get topic data:
 13ms
get forum data:
 2ms
get page messages:
 50ms
get tp. blocked users:
 1ms
others: 246ms
total:  513ms
x
x
Закрыть


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