PDA

Просмотр полной версии : Позиционирование

ARA
31.01.2007, 15:12
Привет всем! Разрабатывая сайт передомной стала такая задача: В HTML коде я разместил div-ы в порядке котором они должны размещаться.
Поисковики начинаю читать код сверху, поэтому "text" сказали мне разместить в начале body!
Возникают проблемы с позиционированием если position: static; то частенько он не хочет размещать там где я хочу (координаты указываю в "px"), если absolute то тот div в котором я указал width: auto сокрощается до минимума!
Как лучше позиционировать? И вообще стоит так извращатся над кодом!

А вот весь код! Помогите разобраться!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css"><!--
html, body {
margin: 0px;
padding: 0px;
border: none;}

#header {
width: auto;
height: 90px;
margin: 0px;
padding: 0px;
border: solid 1px red;
background: none;
position: absolute;
top: 0px;
left: 0px;}

#menua {
width: auto;
height: 25px;
margin: 0px;
padding: 0px;
border: solid 1px red;
background: none;
position: absolute;
top: 92px;
left: 0px;}

#menub {
width: 200px;
height: 100px;
margin: 0px;
padding: 0px;
border: solid 1px red;
background: none;
float: ;
position: absolute;
top: 40px;
left: 0px;}

#menuc {
width: auto;
height: 60px;
margin: 0px 0px 0px 200px;
padding: 0px;
border: solid 1px red;
background: none;
float: ;
position: absolute;
top: 119px;
left: 0px;}

#text {
width: auto;
height: 40px;
margin: 0px;
padding: 0px;
border: solid 1px red;
background: none;
position: absolute;
top: 181px;
left: 202px;}

#right {
width: 150px;
height: 100px;
margin: 0px;
padding: 0px;
border: solid 1px red;
background: none;
float: ;
position: absolute;
top: 119px;
right: 0px;}

#footer {
width: auto;
height: 30px;
margin: 0px;
padding: 0px;
border: solid 1px red;
background: none;
clear: both;}

//--></style>
</head>

<body>
<div id="text">text</div>
<div id="header">header</div>
<div id="menua">menua</div>
<div id="menub">menub</div>
<div id="menuc">menuc</div>
<div id="right">right</div>
<div id="footer">footer</div>
</body>
</html>
KidsKilla
31.01.2007, 16:49
http://astrostar.ru/
учи. сперва текст потом правая колонка, левая, потом футер и напоследок хедер через позишн абсолют. (можно до футера)
ARA
31.01.2007, 17:04
http://astrostar.ru/
учи. сперва текст потом правая колонка, левая, потом футер и напоследок хедер через позишн абсолют. (можно до футера)
Поясни пожалуйста почему в именно в таком порядке!
div в абсолютных координатах живет своей "жизнью",
и не взаимодействует с остальными, получается мне заранее нужно оставлять отступ сверху?
KidsKilla
31.01.2007, 19:01
абсолют только шапка. остальные -- флоаты. шапка должна быть заданной высоты. (либо JS d помощь)
ARA
01.02.2007, 12:19
Спасибо за помощь, но я имел ввиду чтоб было так! (как в коде)
Но возникла вторая проблема:
Я не могу задать коректную ширину блоку "menuc", если задаю 100%, то недостающие 200px которые я установил при позиционирование слева, вылазеют справа, если не задавать то при наполнение текстом блок начинает наезжать на блок"right"!
А если вообще не задовать, то при сжатие текст в блоке вылезет из рамки вблок "text"!
Уважаемые, помогите разобраться!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css"><!--
html, body {
margin: 0px;
padding: 0px;
border: none;
backgr__ound: #fff;}

#text {
width: auto;
height: 300px;
margin: 185px 150px 0px 200px;
padding: 0px;
border: none;
backgr__ound: #ff9;}

#right {
width: 150px;
height: 120px;
margin: 0px;
padding: 0px;
border: none;
backgr__ound: red;
float: right;
position: absolute;
top: 125px;
right: 0px;}

#header {
width: 100%;
height: 100px;
margin: 0px;
padding: 0px;
border: none;
backgr__ound: #66cc33;
position: absolute;
top: 0px;
left: 0px;}

#menub {
width: 200px;
height: 150px;
margin: 0px;
padding: 0px;
border: none;
backgr__ound: #cc6666;
float: left;
position: absolute;
top: 125px;
left: 0px;}

#menua {
width: 100%;
height: 25px;
margin: 0px;
padding: 0px;
border: none;
backgr__ound: #ff7;
position: absolute;
top: 100px;
left: 0px;}

#menuc {
width: auto;
height: 60px;
margin: 125px 150px auto 200px;
padding-left: 0px;
border: none;
backgr__ound: #0066cc;
position: absolute;
top: 0px;}

#footer {
width: auto;
height: 40px;
margin: 0px;
padding: 0px;
border: none;
backgr__ound: #ff3;
clear: both;}

//--></style>
</head>

<body>
<div id="text">text</div>
<div id="right">right Этому блоку я не могу задать "удачную" ширину! При сжатие текст лезет в блок text!</div>
<div id="header">header</div>
<div id="menua">menua</div>
<div id="menub">menub</div>
<div id="menuc">menuc При сужение окна этот блок заезжает под все остальные absolutr (menub, menuc)</div>
<div id="footer">footer</div>
</body>
</html>
AzuManga
04.02.2007, 12:05
Тут может быть только два варианта - или у тебя будет наезжать текст на правый блок, или правый блок будет упрыгивать под центральный. На мой взгляд, самый простой выход - зафиксировать у body минимальную ширину. В этом нет ничего страшного. Или можно извратиться как я это сделал тут http://gugnin.narod.ru/lab/threecolumn/