Rambler's Top100
, : |

! : http://dreamweaver.net.ru/new-forum/

| FAQ | | |

DIVная верстка

 
  ,         .     ,        .     Форум Macromedia Dreamweaver -> HTML & CSS
 
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 16, 2006 7:58 pm     : DIVная верстка

Подскажите пожалуйста!



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=1251">
<title>Untitled Document</title>

<style type="text/css">
<!--
.common
{
width:850px;
border: 1px;
border-style: solid;
margin: auto;
background-color: #FFFFFF;
text-align: left;
}
#header
{
height: 100px;
background-color: #663333;
width: 100%;
}
#navbar
{
width: 200px;
float: left;
clear: left;
background-repeat: no-repeat;
height: 500px;
background-color: #0033CC;
padding: 100px;
}
#content
{
float: right;
clear: right;
width: 650px;
background-color: #FF0000;
padding: 100px;

}

-->
</style>
</head>

<body bgcolor="#009933">
<div class="common">
<div id="header"></div>
<div id="navbar">
&loz;<a href="1.html">ссылка 1</a><br>
&loz;<a href="2.html">ссылка 2</a><br>
&loz;<a href="3.html">ссылка 3</a><br>
&loz;<a href="4.html">ссылка 4</a>
</div>
<div id="content">gggggggggggggggggggggggggggggggggggggggg
ggggggggggggggggggggggggggwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
</div>
</div>
</body>
</html>


по задумке, common-основной слой, все остальные распологаются внутри него. Размеры фиксированные, обозначены в пикселах, вроде бы все должно работать, но в браузере (Opera, IE) такое...В чем ошибка?
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 17, 2006 8:31 am     :

Ошибок куча!
Давайте сделаем так - я не буду их указывать, а просто предложу вот это - http://www.web-anatomy.ru/issue20/
Там описано, как же сделать то, что Вы планировали, но правильно )
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 17, 2006 11:28 am     :

Статью эту читал, и если чесно, пытался сделат страничку
по принцыпу приведенномув статье, т.е блок common-является подложкой для остальных. Просто уже 2 дня бьюсь над этим, и наверное уже чего-то не замечаю. Но все равно спасибо за ссылку.
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 17, 2006 1:26 pm     :

та не за что. Тогда укажу пару ошибок:
//добавить
//div {position:relative;} - по умолчанию static и портит всю малину

.common
{
width:850px;
border: 1px;
border-style: solid;
margin: auto;
background-color: #FFFFFF;
text-align: left;
}
#header
{
height: 100px;
background-color: #663333;
width: 100%;
//добавить clear: both; - чтоб обтекания не было наверняка
}
#navbar
{
width: 200px; уверен??
float: left;
clear: left; //убрать
background-repeat: no-repeat; //зачем?
height: 500px;
background-color: #0033CC;
padding: 100px; //а это еще что? отступ изнутри для всех сторон!
//добавить top: высота хедера
}
#content
{
float: right; //убрать! уже есть элемент у которого есть float
clear: right; //убрать!!!
width: 650px; уверен?
background-color: #FF0000;
padding: 100px; //см в navbar
//добавить top: высота хедера
//добавить margin-left: ширина левого блока
}
Теперь, по поводу ширины блоков.
ширина блока=бирина блолка+padding'и+margin'ы (так называемая блочная модель!)

Вот и все, пожалуй
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 17, 2006 7:50 pm     :

background-repeat: no-repeat; //зачем?


В начале, вместо background-сolor, был background-imade. Просто не заметил


padding: 100px; //а это еще что? отступ изнутри для всех сторон!


Я понимаю padding, как отступ между текстом и border. А 100px-так это
для наглядности.
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 18, 2006 3:09 pm     :

:

Теперь, по поводу ширины блоков.
ширина блока=бирина блолка+padding'и+margin'ы (так называемая блочная модель!)

это я упустил из виду.
Спасибо OldFornit за помощь.
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 20, 2006 7:29 pm     :

Подскажите пожалуйста. Есть блок wight=100%, в нем картинка 200/120, по умолчанию расположена в верхнем левом углу. В этот блок вставляю другой 200/120 с картинкой внутри таких же размеров. Вопрос такой: как его привязать к правому краю родительского блока? Можно через position:absolute, но тогда при уменьшении окна броузера, картинка оказывается за бортом. Margin-left работает нормально, а вот margin-right почему-то не фурычит. Почему?
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 20, 2006 8:05 pm     :

Проблемма решена. Забыл Embarassed поставить float:right
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 24, 2006 11:41 pm     :

Ребята, подскажите. Есть три блока, правый и левый-фиксированной ширины, а средний-резиновый. В левом ссылки работают нормально, а вот в правом в Opera, ссылки отображаются как простой текст, хотя в IE все корректно. Почеиу так?
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 25, 2006 1:28 am     :

а код?
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 25, 2006 8:15 am     :

Пожалуйста:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=1251">
<title>Домашняя страница</title>
<style type="text/css">
<!--
.navbar
{
width: 225px;
height: 290px;
float: left;
padding-top: 30px;
padding-left: 25px;
}
.news
{
width: 160px;
float: right;
height: 400px;
padding-left: 10px;
}
.content
{
text-align: left;
padding-bottom: 20px;
font-style: italic;
margin-left: 275px;
}
-->
</style>
</head>
<body>
<div class="navbar">
<a href="1.htm">ссылка 1</a><br>
<a href="2.htm">ссылка 2</a><br>
<a href="3.htm">ссылка 3</a><br>

</div>
<div class="news">
20.05.2006<br>
<a href="1.htm" class="menu">Новость</a>
</div>
<div class="content">
контент
</div>
</body>
</html>

и еще интересно, что при уменьшеннии окна броузера,когда блоки становятся один над другим и news оказывается под navbar, то все начинает работать.
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 25, 2006 3:02 pm     :

Так,
1 - у меня вышеупомянутого глюка в опере не наблюдается. Возможно, у нас разные версии?
2 - Правильно этот код у Вас не будет работать никогда, ибо доктайп соответствует quirk-mode (браузер обрабатывает так, как ему угодно, но никак не так, как Вы ему указали)(если это прозвучало китайской грамотой, то добро пожаловать на http://xhtml.ru), да еще и есть куча недоработок.
3 - Зачем изобратать велосипед? На том же http://xhtml.ru есть раздел "Он-лайн инструменты", где в том числе имеется замечательный генератор шаблонов
4 - При уменьшении окна браузера блоки становятся друг над другом, так как у них нет единого контейнера, которому сказано, какая у него должна быть ширина.
dificit
Новичок

Новичок


: 39

: 02.03.2006
: 18

: 25, 2006 9:16 pm     :

:
2 - Правильно этот код у Вас не будет работать никогда, ибо доктайп соответствует quirk-mode (браузер обрабатывает так, как ему угодно, но никак не так, как Вы ему указали)(если это прозвучало китайской грамотой, то добро пожаловать на http://xhtml.ru), да еще и есть куча недоработок.


Спасибо за ссылочку, очень много нового и интересного для меня. Конечно же буду изучать весь материалл на эту тему, но есть просьба, OldFornit, не подскажите верный DOCTYPE для моего кода, что-бы было от чего отталкиватся. В такой ситуации усваевоемость материалла, для меня, происходит гораздо быстрее, а меня знаете ли, ну уж очень захлеснула тема сайтосроения и хочется все познать поскорее. И большое и искреннее спасибо за помощь.

:
1 - у меня вышеупомянутого глюка в опере не наблюдается. Возможно, у нас разные версии?


У меня 8.5
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 26, 2006 10:40 am     :

У меня тоже 8.5
Не мучайтесь. Воспользуйтесь предложенным инструментом.
Там сгенерируется замечательный код.
:   
  ,         .     ,        .     Форум Macromedia Dreamweaver -> HTML & CSS : GMT + 2
1 1

 


Powered by phpBB © 2001, 2005 phpBB Group
phpBB


/ : 134377 / 0

Rambler's Top100 @Mail.ru