Что нового?

Проблемы с HTML версткой

B

bagira911

Я верстаю сайт в dreamweaver, XHTML Transitional, с помощью разметочных слоев (абсолютное расположение, постоянная (не "резиновая") ширина страницы, а слои размещаю в родительском теге carrier. В книге я прочитала, что абсолютное расположение идет от родительского элемента, но почему границы так скачут? В браузере firefox - одни расстояния слоев друг от друга, в интернет эксплорере - другое, на мониторе меньшей диагонали - третье! Как с этим справиться, есть ли такой рецепт сайта с абсолютно постоянной шириной независимо от разных ситуаций? Причем я стараюсь использовать блочную верстку, это правило номер 1. Может кто то сможет поделиться опытом?
 
P

preconscious

Я лично люблю полуабсолютное позиционирование: контентный слой выношу margin'ом, а блоки размещаю в одном месте кода, и приравниваю к бокам уже абсолютно. Так я получаю очень удобную структуру - ссылочная база вначале, и чистый неразрывный контент в конце... ну или наоборот.

Касаемо конкретики, давайте-ка сюда подопытное тело.
 
K

katyakalimera

какие умные слова ппц! Проще пишите! А то столько слов чтоб написать : как отцентровать чтоб показывало везде одинаково, или почему осел показывает криво!))) Будте проще к вам потянутся!)
 
P

preconscious

сайт и css сюда, либо мне в пм.
 
J

Julia_Smirnova

вот и я мучилась этим..спасали padding и margin.
может, проще скачать готовый шаблон и дорабатывать дизайн?
 
B

bagira911

Максим, Вообщем в три колонки получается:
<title>Земпроект - Добро пожаловать!</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#html, body {
margin: 0px;
padding: 0px;
height: auto;
width: auto;
border: 0px;
}
#body {
background-color: #CCCCCC;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #666666;
margin-left:3px;
margin-right:3px;
}
#carrier {
width: 930px;
height:1150px;
background-color: #FFFFFF;
clear:both;
padding:0px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
z-index:1;

}
#header {
clear:both;
margin: 0px;
padding: 0px;
position: relative;
width:930px;
z-index:1;
left: 0px;
top: 0px;
}
#menu {
position:relative;
left: 0px;
top: 0px;
float:left;
margin:0px;
padding:0px;
}
#news {
padding:5px;
background-image: url(image/kart.jpg);
background-repeat:no-repeat;
font-size:9px;
float:left;
height: 450px;

}

#Layer1 {
position: absolute;
width:408px;
height:115px;
z-index:2;
left: 313px;
top: 197px;
}
#Layer2 {
position:absolute;
width:199px;
height:115px;
z-index:3;
left: 747px;
top: 197px;
}
#bottom {
position:absolute;
width:907px;
height:48px;
z-index:1;
left: 49px;
top: 993px;
clear:both;
background-image: url(image/bottom.gif);
background-repeat: repeat-x;
}

-->
</style>
</head>

<body>
<div id="carrier">


<div id="header">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/fl...,0,19,0" width="930" height="190" title="header">
<param name="movie" value="header.swf" />
<param name="quality" value="high" />
<embed src="header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="930" height="190"></embed>
</object>
</div>


<div id="menu">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/fl...,0,19,0" width="270" height="190">
<param name="movie" value="menu1.swf" />
<param name="quality" value="high" />
<embed src="menu1.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="270" height="190"></embed>
</object>


<div id="news">
<p class="n">...</p>
</div>
</div>


<div id="Layer1">
<h5 align="justify">...</h5>
<p>... </p>
</div>


<div id="Layer2">
<p>...... </p>
<div id="novosty">
<h5 align="center" class="style3"> Наши новости</h5>
<p> ...</p>
</div></div>


<div id="bottom"><p>...</p>
</div>

</div>
</body>
</html>
 
P

preconscious

Задача: сделать сайт полностью жесткий, абсолютным позиционированием, я правильно понял? Быстро написал структуру 3х столбцов, все кроссбраузерно, в чем проблема?

BODY{margin:0px;padding:0xp;}
DIV{position:absolute;}
#wrapper{left:0px;top:0px;width:930px;height:1150px;}
#header{left:0px;top:0px;width:930px;height:200px;background-color:#00FFCC;}
#menu{left:0px;top:200px;width:200px;height:900px;background-color:#FFFFCC;}
#content{left:200px;top:200px;width:530px;height:900px;background-color:#00FFFF;}
#news{left:730px;top:200px;width:200px;height:900px;background-color:#FFFFCC;}
#footer{left:0px;top:1100px;width:930px;height:50px;background-color:#00CCFF;}
</style>

<body>

<div id="wrapper">
<div id="header"></div>
<div id="menu"></div>
<div id="content"></div>
<div id="news"></div>
<div id="footer"></div>
</div>

</body>

Об абсолютном позиционировании:
http://on-line-teaching.com/html/lsn029.html#4

Для абсолютного позиционирования элементов Вэб-страницы служит свойство position со значением absolute. При этом браузер "вырывает" элементы абсолютного позиционирования из общего контекста страницы, причем соседние элементы сдвигаются, занимая "освободившееся" пространство.

2Ольга Геннадьевна Некрасова
Проблема не в том, качать или не качать шаблоны. Проблема в том, что дизайнеры - люди достаточно далекие от верстки, а поэтому я еще ни разу не видел в сети шаблона, который можно было бы использовать как базис верстки для изысков моего знакомого арт-извращенца.
 
D

dimitardobrev

Спасибо, Максим, но, как я поняла, при предложенной Вами разметке сайта, весь сайт визуально будет прибит к левому краю монитора, а нельзя ли по середине, так не получится?
В вашем учебнике написано, что при абсолютном позиционировании "для указания направления отсчета координат элемента относительно сторон "родительского" объекта (обычно Вэб-страницы) служат свойства top, bottom, left, right." а для моих блоков разве не считается родительским элементом блок, в котором они находятся? у вас он называется #wrapper.
 
P

preconscious

самый простой способ расположить жесткий сайт по середине - через margin:auto родительского дива (тут родительский див для всей структуры - #site):

<style>
body{margin:0px;padding:0px}
#wrapper{width:100%;height:100%;}
#site{margin:auto;width:900px;height:750px;background-color:#00FFFF;}
#header{height:200px;background-color:#FFFF99;}
#main{height:500px;background-color:#99FF66;}
#menu{float:left;width:20%;height:500px;background-color:#009900}
#content{float:left;width:60%;height:500px;background-color:#99FF99}
#news{float:left;width:20%;height:500px;background-color:#0066FF}
#footer{height:200px;background-color:#CCCCCC}
</style>

<body>

<div id="wrapper">
<div id="site">
<div id="header"></div>
<div id="main">
<div id="menu"></div>
<div id="content"></div>
<div id="news"></div>
</div>
<div id="footer"></div>
</div>
</div>

</body>

В таком случае, если нет статичных элементов, абсолютное позиционирование не требуется.

Не заметил вопроса. Абсолютный элемент располагается относительно родительского абсолютного(!) элемента. Если выше уровнем нет абсолютных элементов, относительно которых он мог бы позиционироваться, то он позиционируется относительно границ экрана.

<style>
#block{position:absolute;width:500px;height:500px;}
#block2{position:absolute;right:0px;bottom:0px;width:200px;height:200px;
background-color:#FF0000;}
</style>

<body><div id="block">

<div id="block2">

</div></div></body>

п.с.
Это не мой учебник, это первая выдача гугеля.
Юлия, вы во многом сэкономите свое время, если хотя бы мельком пробежитесь по http://www.htmlbook.ru/.
 
K

katyakalimera

<body>
<div align="center" style="width: 100%">
<div style="700px; text-align:left">

блок по центру

</div>
</div>
</body>

Вот так это сделать просто))) Все что внутри нижнего блока будет по цнтру) ширина 700 пикселей)
 
P

preconscious

Вынос стилизации за рамки css - в сильнейшей степени моветон.
 
B

bagira911

И все таки, на старых мониторах контент упрямо съезжает под менюшку! Ну что еще делать? http://zemproect.ru/index.html - может увидите? код разметки можно посмотреть в браузере, а стили:
@charset "utf-8";

html, body {
margin: 0px;
padding: 0px;
height: auto;
width: auto;
border: 0px;
}
body {
background-color: #CCCCCC;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #666666;
margin-left:3px;
margin-right:3px;
}
#wrapper{width:100%; height:100%; background-color: #CCCCCC;}
#site{margin:auto; width:930px; height:1150px; background-color:#FFFFFF;}
#header{height:190px; clear:both; margin:0px; padding:0px; width:930px; z-index:1;}
#main{height:800px; background-color:#FFFFFF; margin:0px; padding:0px;}
#menu{float:left; background-color:#FFFFFF; width:270px;margin:0px;
padding:0px;}

#content{float:left; width:408px; height:115px; background-color: #FFFFFF; padding:10px;}
#news{float:left; width:199px; clear:right; padding:0px;}
#novosty{
float:right;
background-color: #E6E6E6;
font-size:10px;
padding:5px;
}
#bottom {
margin-top:10px;
width:930px;
height:48px;
clear:both;
background-image: url(image/bottom.gif);
background-repeat: repeat-x;
}

#statyi {
padding:5px;
background-image: url(image/kart.jpg);
background-repeat:no-repeat;
font-size:9px;
float:left;
height: 450px;

}

Все вроде сделала, как посоветовал Максим....
 
P

preconscious

Проблема кажется в Layer1 с 313px left.
 
B

bagira911

Прошу прощения, Максим, дело в том, что моя хостинговая компания еще не обновила исправленную версию сайта! Спасибо тебе еще раз, за потраченное на меня время!!!
 
Войдите или зарегистрируйтесь для ответа.

Поделиться страницей

Статистика форума

Темы
200.483
Сообщения
380.306
Пользователи
327.889
Новый пользователь
Omaxis

О нашем форуме!

По всем вопросам пишите злому админу Email: [email protected] или Telegram: @wmlogs

Новые пользователи

Что нового?

Новые сообщения
Сверху Снизу