Критическая величина!

Marlik · January 14, 2008

Незнаю правильно или не правильно я назвал тему но у меня вопрос достойный лягушатника!

Каким образом сделать верстку дивами так чтоб при уменьшении окна браузера блоки не меняли своего положения (где то я читал что это называется критической точкой) В общем вот код

<style type="text/css">
body,html {
	height:100%;
	background-color: blue;
	margin:0;
	padding:0;
}

a:link {color: #4f0100;text-decoration: none;}
a:active {color: #4f0100;text-decoration: none}
a:visited {color: #4f0100;text-decoration: none}
a:hover {color: #4f0100;text-decoration: underline}

#shapka {
	background-color: red;
	margin:auto;
	width: 100%;
	height: 148;
}
#s1 {
	float: left;
	position: relative;
	left: 0;
	top: O;
	background-color: black;
	height: 148;
	margin: auto;
	width: 100;
}
#s2 {
	float: left;
	position: releative;
	left: 0;
	top: O;
	background-color: green;
	height: 148;
	margin: auto;
	width: 100;
}
#s3 {
	float: left;
	position: relative;
	left: 0;
	top: O;
	background-color: white;
	height: 148;
	margin: auto;
	width: 100;
}
</style>
</head>
<body>
<div id="shapka">
	<div id="s1"></div>
	<div id="s2"></div>
	<div id="s3"></div>
</div>
</body>

Блоки постоянно перемещаются друг под друга скока я не пытался решить эту роблему не задавая такой нубский вопрос но ничего не получилось я сдался =((((((

Scrum · January 14, 2008

такой вариант подойдет ?

<style type="text/css">
<style type="text/css">
body,html {
	height:100%;
	background-color: blue;
	margin:0;
	padding:0;
}

a:link {color: #4f0100;text-decoration: none;}
a:active {color: #4f0100;text-decoration: none}
a:visited {color: #4f0100;text-decoration: none}
a:hover {color: #4f0100;text-decoration: underline}

#shapka {
	background-color: red;
	height: 148px;
	min-width: 400px;

}
#s1, #s2, #s3 {
	float: left;
	height: 148px;
	width: 100px;
}

#s1 {
	background-color: black;
}
#s2 {
	background-color: green;
}
#s3 {
	background-color: white;
}
* HTML #shapka {padding-left:400px}
* HTML .gordi {height:0;}
* HTML .content {margin-left:-400px;position:relative;height:0;}
</style>
</head>
<body>
<div id="shapka">
<div class="gordi">
<div class="content">
	<div id="s1"></div>
	<div id="s2"></div>
	<div id="s3"></div>
</div>
</div>
</div>
</body>
</body>

Marlik · January 14, 2008

такой вариант подойдет ?

Спасибо все работает тока объясни пожалуйста цель слоя gordi я вижу что он специально для IE а принцип работа не пойму! Еще раз спасибо!

Sign In

Критическая величина!

Question

Marlik

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

Marlik

Link to comment

Share on other sites

Обсуждения

Forums

Important Information