Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Три колонки на сайте с помощью CSS / 9 сообщений из 9, страница 1 из 1
23.11.2007, 14:08
    #34961282
Vinnyl
Vinnyl
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
Есть файл стилей css:
Код: 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.
#primaryContentContainer
{
	background-color: # 006600 ;
	float: right;
	margin: 0em -18em 0em -19em;
	width:  100 %;
}

#primaryContent
{
	margin:  1 .5em 19em 0em  17 .25em;
	padding:  1 .5em 3em  1 .5em 3em;
}

/* Левая колонка */

#secondaryContent
{
	position: relative;
	float: left;
	width: 14em;
	padding: 3em 2em  1 .5em 2em;
	background: # 000066 ;
}

/* Правая колонка */

#tertiaryContent
{
    position: relative;
	float: right;
	width: 14em;
	padding: 3em 2em  1 .5em 2em;
	background: # 660000 ;
}

И есть html-файл его включающий:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
		<div id="tertiaryContent">
			<p>Данные в правой колонке</p>
		</div>
		<div id="primaryContentContainer">
			<div id="primaryContent">
				<p>Данные посередине</p>
			</div>
		</div>
		<div id="secondaryContent">
			<p>Данные в левой колонке</з>
		</div>
</body>
</html>

При окне браузера раскрытом на весь экран все выглядит нормально, но если сдвинуть окно на пол экрана по вертикали колонки начинают съезжать в столбик.
Как сделать так, чтобы колонки не съезжали, а появлялся горизантальный скролбар?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.11.2007, 15:48
    #34961709
Frenzy
Frenzy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
min-width а потом разбираемся с ие6

_______________________________________
2pro4U
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.11.2007, 22:17
    #34963336
Vinnyl
Vinnyl
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
Frenzy min-width а потом разбираемся с ие6

А можно по-подробнее?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.11.2007, 13:03
    #34964918
maXmo
maXmo
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
Код: 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.
<html>
<head>
<style type="text/css">
body { margin: 0px; padding: 0px; background: #fff; }
#head { background: #9F89B6; padding: 20px; }
#container { background: #ffec97; padding: 1px; }
#left { float: left; width:  20 %; border: solid 1px green; }
#left1 { padding: 20px; border: solid 1px green; }
#right { float: right; width: 20 %; border: solid 1px red; }
#right1 { padding: 20px; border: solid 1px red; }
#center { margin-left:  25 %; margin-right:  25 %; border: solid 1px blue; }
#center1 { padding: 20px; border: solid 1px blue; }
#clear { clear: both; }
#foot { background: #9F89B6; padding: 1px; }
</style>
</head>

<body>
<div id="head">заголовог</div>
<div id="container">
	<div id="left"><div id="left1">налево пойдёшь – коня потеряешь</div></div>
	<div id="right"><div id="right1">направо пойдёшь… забыл</div></div>
	<div id="center"><div id="center1">прямо пойдёшь – сам помрёшь</div></div>
	<div id="clear"></div>
</div>
<div id="foot">футер</div>
</body>
</html>
в осле это пахать не будет
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.11.2007, 13:33
    #34965054
mrJust
mrJust
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
забыл где брал :(
Код: 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.
<!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="en" lang="en">
<head>
<style>
h1{width:500px;border-bottom:3px solid #ccc;}
#min-width{margin:  0  auto; border-right:1px solid # 999 ;}

/* for all browsers that understand min-width */
#min-width {width: 70 %; min-width:500px; }

/* the bodge for IE6 browsers */
* html .minwidth {border-left:500px solid #fff; position:relative; float:left; z-index: 1 ;}
* html .container {margin-left:-500px; position:relative; float:left; z-index: 2 ; text-align:left;}
.width{border:2px solid green;}
</style></head>

<body>
<h1>example of min-width for IE (500px) - border method</h1>
<div id="min-width">
<div class="minwidth">
<div class="container">
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at
vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nu
asdas das da
</div>
</div>
</div>
</body></html>
Разбираемся...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
04.04.2008, 17:26
    #35236668
Dln_new
Dln_new
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
2 maXmo после того как размеры меняю IE 6 среднюю часть не отрисовывает!!!!!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.04.2008, 10:37
    #35237322
lanzer
lanzer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
Dln_new2 maXmo после того как размеры меняю IE 6 среднюю часть не отрисовывает!!!!!!!
Человек же пишет, что в осле это пахать не будет.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.04.2008, 12:27
    #35237357
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
.container {
	width: 100 %;
}
.left {
	width:100px;
	position:absolute;
	top: 0 ;
	left: 0 
}
.center {
	left:110px;
	right:110px;
	position:absolute;
	top: 0 ;
}
.right {
	width:100px;
	position:absolute;
	top: 0 ;
	right: 0 
}
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.04.2008, 13:17
    #35242323
maXmo
maXmo
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Три колонки на сайте с помощью CSS
lanzerЧеловек же пишет, что в осле это пахать не будет.в восьмом осле пашет идеально.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Три колонки на сайте с помощью CSS / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 486ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1456638]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 170ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 47ms
get tp. blocked users:
 1ms
others: 227ms
total:  486ms
x
x
Закрыть


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