Меню
Что нового?

Вопрос по верстке

Focus

Новичок
Есть простой макет:
PHP: 
<html>
<style>
#wrapper {
  width: 100%;
  width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
  min-width: 1000px;
}
#container {width: 100%;}
#content {
  width: 100%;
  float: left;
}
#text {margin: 0 250px; background:#3366CC; }
#left {
  float: left;
  width: 250px;
  margin-left: -100%;
  background:#00CCFF; 
}
#right {
  float: left;
  width: 250px;
  margin-left: -250px;
  background:#FFFF99; 
}
</style>
<body>
<div id="wrapper">
	<div id="header" style="height:100px; background:#995500">HEADER</div>
	
	<div id="container">
		<div id="content">
			<div id="text">MAIN CONTENT</div>
			
		</div>
		
		<div id="left">LEFT CONTENT</div>
		<div id="right">RIGHT CONTENT</div>
		
		<div class="clear"></div>
	</div>
	
	<div id="footer" style="background:#993333">FOOTER</div>
</div>
</body>
</html>
Как поменять стили так, чтобы первым шел блок <div id="container">, потом <div id="header"> и последним <div id="footer">
 
С.

С.

Продвинутый новичок
В общем случае никак.
А что, разве волна ЦСС-дрочерства еще не улеглась?
 
HEm

HEm

Сетевой бобер
#container { margin-top: 300px; }
#header { position: absolute; height: 300px; top: 0; }

как то так
 

Focus

Новичок
и почему не наследуется значение width для header ?
Вот полный код который дает этот скриншот:
PHP: 
<html>
<style>
#wrapper {
  width: 100%;
  width: expression((documentElement.clientWidth||document.body.clientWidth)<995?'1000px':'');
  min-width: 1000px;
}
#container {width: 100%; margin-top: 300px;}
#content {
  width: 100%;
  float: left;
}
#text {margin: 0 250px; background:#3366CC; }
#left {
  float: left;
  width: 250px;
  margin-left: -100%;
  background:#00CCFF; 
}
#right {
  float: left;
  width: 250px;
  margin-left: -250px;
  background:#FFFF99; 
}
</style>
<body>
<div id="wrapper">
    <div id="container">
        <div id="content">
            <div id="text">MAIN CONTENT</div>            
        </div>        
        <div id="left">LEFT CONTENT</div>
        <div id="right">RIGHT CONTENT</div>        
        <div class="clear"></div>
    </div>
    <div id="header" style="height:100px; background:#995500; position: absolute; height: 300px; top: 0;">HEADER</div>
	<div class="clear"></div>
    <div id="footer" style="background:#993333">FOOTER</div>
</div>
</body>
</html>
 
Redjik

Redjik

Джедай-мастер
Ага, мне тут подкинули задачку, сверстать так, чтобы в коде можно было менять местами блоки.
Есть теория что можно как то на СЕО повлиять, если header будет, скажем, в конце кода.

Ну само собой всю абсолютами слепил...
 
Войдите или зарегистрируйтесь для ответа.
Сверху