Горизонтальное кроссбраузерное выравнивание вложенных слоев

Микель · February 2, 2008

Добрый день.

Подскажите,плз,мне надо прижать вложенный слой к правой границе контейнера (др слоя).Нормально работает у меня это толкьо в ИЕ. Opera,Mozilla и Safari на выравнивание не реагируют.

<div style="width:100%;text-align:right;border:1px solid green;position: relative;" align="right">
	<div style="width:200px; border:1px solid red;position: relative;">Контент</div>
</div>

klierik · February 2, 2008

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

	<style type="text/css">
		* {margin:0; padding:0;}
		html,body {height:100%; background-color:#eee; font-family:tahoma; font-size:11px; color:#690000;}

		div.case {height:100px; border:1px solid #000;}
		div.content {width:400px; height:60px; background-color:#aaa; float:right;}
		div.clear {clear:both;}
	</style>

</head>

<body>
	<div class="case">
		<div class="content">content</div>
		<div class="clear"></div>
	</div>

</body>
</html>

Микель · February 2, 2008

klierik, Спасибо

klierik · February 2, 2008

u welcome

Микель · February 2, 2008

А вот еще такой вопрос по поводу сойства * {margin:0; padding:0;}

Насколько я понимаю,оно задает нулевые внешние и внутренние отступы для всех контейнеров (div,td и пр)

А у меня во вложенном слое content находится меню фиксированной ширины на основе ul и li.

Если прописать *{margin:0; padding:0;} для всего кода,то со списком все нормально,но контент перестает выравниваться по центру body (в Опере),а если не прописывать,то над списком появляются лишние отступы (Firefox)

Пытался задать нулевые отступы только для слоя со списком,тоже не получается

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

	<style type="text/css">
		* {margin:0; padding:0;}
		html,body {height:100%; background-color:#eee; font-family:tahoma; font-size:11px; color:#690000;}

		div.case {height:10px; border:1px solid #000;width:80%;}
		div.content {width:400px; height:10px; background-color:#aaa; float:right;margin:0; padding:0;}
		div.clear {clear:both;}
		li {
		float:left;
		}
	</style>

</head>

<body>
<div align="center">
	<div class="case">
		<div class="content">
			<ul>
			<li><p>1111</p></li>
			<li><p>2222</p></li>
			<li><p>3333</p></li>
			</ul>
		</div>
		<div class="clear"></div>
	</div>
</div>
</body>
</html>

Sign In

Горизонтальное кроссбраузерное выравнивание вложенных слоев

Question

Микель

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Микель

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Микель

Link to comment

Share on other sites

Обсуждения

Forums

Important Information