ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Проблема с 3 div-ами по горизонтале
11 сообщений из 11, страница 1 из 1
Проблема с 3 div-ами по горизонтале
    #34904986
Verik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Verik
Гость
Проблема с 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:33
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34905048
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
А таблички уже не катят?
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
30.10.2007, 15:48
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34905080
Verik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Verik
Гость
Как не горько это слышать, но это так. Новые стандарты запрещают использование таблиц для разметки рабочей области.
...
Рейтинг: 0 / 0
30.10.2007, 15:56
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34905151
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Чем же они провинились?
----------
Cache for Windows NT (Intel) 5.0.20 (Build 6305) Fri Sep 16 2005 11:54:10 EDT
...
Рейтинг: 0 / 0
30.10.2007, 16:13
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34905661
PhoenixNET
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PhoenixNET
Гость
В IE margin'ы блочных элементов в 2 раза больше от того, что пишите в свойстве.
Лечится dislplay:inline;
В будущем может ещё возникнуть проблема 3-хпиксельного просвета между плавающим и статическим элементом, тогда google -> 3 pixel gap.
...
Рейтинг: 0 / 0
30.10.2007, 18:31
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34905984
Hektor
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Hektor
Гость
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:16
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34906007
Verik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Verik
Гость
Спасибо за помошь идея отличная!

Но если я пытаюсь всё включить ещё в один 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, 22:43
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34906055
Фотография agrasoff
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
agrasoff
Участник
VerikКак не горько это слышать, но это так. Новые стандарты запрещают использование таблиц для разметки рабочей области.а можна ссылку про стандарты почитать?
...
Рейтинг: 0 / 0
30.10.2007, 23:38
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34906057
Verik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Verik
Гость
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:41
| Ответить | Цитировать | Написать  
Проблема с 3 div-ами по горизонтале
    #34906060
Verik
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Verik
Гость
agrasoffа можна ссылку про стандарты почитать?

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

Кому интересно ниже привожу решение проблемы:
Код: 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
31.10.2007, 00:07
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Проблема с 3 div-ами по горизонтале
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=359&tid=1457440]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 43ms
get topic data:
 11ms
get forum data:
 2ms
get page messages:
 47ms
get tp. blocked users:
 1ms
others: 11ms
total:  143ms
созд. / загр.: 143ms
x
x
Закрыть


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