body {
margin: 0px; padding: 0px;
background-color: white;
}
div#admin {
width: 100%;
height: 30px;
border: 2px solid red;
display: inline-block;
}
div#bottom {
width: 100%;
border: 2px solid orange;
height: 100px;
display: inline-block;
}
div#main {
width: 100%;
display: block;
}
div#content {
height: 300px;
border: 2px solid black;
left: 155px;
right: 155px;
position: absolute;
}
div#menu {
width: 150px;
height: 400px;
float: left;
border: 2px solid black;
}
div#adds {
width: 150px;
height: 400px;
float: right;
border: 2px solid black;
}
Проблема с блочной версткой
Все никак не могу правильно сотворить блочную верстку... Тупая кроссбраузерность.. Или мои кривые руки.. В чём проблема?
Проблема в следуюшем:
необходимо блочно разместит элементы на странице: [COLOR="#FF0000"]навигация[/COLOR] (должна быть вверху), [COLOR="#000000"]основная часть[/COLOR](в середине), [COLOR="orange"]низ страницы[/COLOR](внизу).
Код:
CSS:
HTML:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Бугага!!!</title>
</head>
<link rel="stylesheet" href="./tpls/default/files/css.css">
<body>
<div id="admin">
<a href="index.php">Главная страница</a> |
<a href="admin/config.php">Настройки</a> |
<a href="admin/exit.php">Выход</a>
</div>
<div id="main">
<div id="content">%CONTENT%</div>
<div id="menu"><a href="topic.php?topic=1" style="font-weight: bold; font-style: italic;">Пункт1</a><br /><a href="topic.php?topic=2" style="font-weight: bold; font-style: italic;">Пункт2</a><br /><a href="topic.php?topic=6" style="font-weight: bold; font-style: italic;">Parent0_3</a><br /><a href="topic.php?topic=4" style="font-weight: bold; font-style: italic;">Пункт 4</a><br /><a href="topic.php?topic=3" style="font-weight: bold; font-style: italic;">Пункт3</a><br /></div>
<div id="adds">%ADDS%</div>
</div>
<div id="bottom">Времы выполнения: 0.0122</div>
</body>
</html>
[/HTML]
В Опере (v.9.21) все работает нормально. В Осле (№6) с горем пополам, но работает. В Мозилле (1.5) вообще не так отображается как надо.
Вот скриншоты заодно:
Проблема в следуюшем:
необходимо блочно разместит элементы на странице: [COLOR="#FF0000"]навигация[/COLOR] (должна быть вверху), [COLOR="#000000"]основная часть[/COLOR](в середине), [COLOR="orange"]низ страницы[/COLOR](внизу).
Код:
CSS:
Код:
HTML:
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Бугага!!!</title>
</head>
<link rel="stylesheet" href="./tpls/default/files/css.css">
<body>
<div id="admin">
<a href="index.php">Главная страница</a> |
<a href="admin/config.php">Настройки</a> |
<a href="admin/exit.php">Выход</a>
</div>
<div id="main">
<div id="content">%CONTENT%</div>
<div id="menu"><a href="topic.php?topic=1" style="font-weight: bold; font-style: italic;">Пункт1</a><br /><a href="topic.php?topic=2" style="font-weight: bold; font-style: italic;">Пункт2</a><br /><a href="topic.php?topic=6" style="font-weight: bold; font-style: italic;">Parent0_3</a><br /><a href="topic.php?topic=4" style="font-weight: bold; font-style: italic;">Пункт 4</a><br /><a href="topic.php?topic=3" style="font-weight: bold; font-style: italic;">Пункт3</a><br /></div>
<div id="adds">%ADDS%</div>
</div>
<div id="bottom">Времы выполнения: 0.0122</div>
</body>
</html>
[/HTML]
В Опере (v.9.21) все работает нормально. В Осле (№6) с горем пополам, но работает. В Мозилле (1.5) вообще не так отображается как надо.
Вот скриншоты заодно:
Не всё так страшно. Чтобы футер скользил ниже остальных блоков, следует вписать:
Но, на самом деле, это не выход. Следует отказаться от абсолютного позиционирования блока с контентом - по счастью, это ни к чему. Поищите в ветке HTML ссылки на DIV-ные шаблоны и используйте один из них. (Насколько я понял, учиться уже не досуг, надо реализовать конкретную задачу?)
Код:
div#bottom {clear:both;}
Но, на самом деле, это не выход. Следует отказаться от абсолютного позиционирования блока с контентом - по счастью, это ни к чему. Поищите в ветке HTML ссылки на DIV-ные шаблоны и используйте один из них. (Насколько я понял, учиться уже не досуг, надо реализовать конкретную задачу?)
Хммм)) Работает)) Вот только от absolute в #content отказаться не могу.. Иначе все поле контент съезжает наверх поверх %ADDS% и %MENU%...
Ну и наш любимый осел похоже не понимает свойства "left" и "right" и слоя...
Эхх) Проще было бы все таблицами, но не так это гибко.. Ладно, думать буду завтра, а то ща уже 2 ночи((
Ну и наш любимый осел похоже не понимает свойства "left" и "right" и слоя...
Эхх) Проще было бы все таблицами, но не так это гибко.. Ладно, думать буду завтра, а то ща уже 2 ночи((
Цитата:
(Насколько я понял, учиться уже не досуг, надо реализовать конкретную задачу?)
Да учиться я без проблем) Дайте норм.мануал) Так то я читал и шаблоны смотрел (того же vkontakte.ru), но блин когда сам с нуля пишешь - все равно сложновато=)
А насчет задачи.. Ну то что я привел это обобщение.. По идее это все поменятся ещё сто раз, но для костяка надо такой шаблон пока что...
Цитата: UAS
Хммм)) Работает)) Вот только от absolute в #content отказаться не могу.. Иначе все поле контент съезжает наверх поверх %ADDS% и %MENU%...
Ну, это понятно: div - блочный элемент и для внесения его в строку нужно что-нибудь прописать. Например, как вариант, заменить
Код:
div#content {position:absolute;}
на
Код:
div#content {float:left;}
Цитата: UAS
Ну и наш любимый осел похоже не понимает свойства "left" и "right" и слоя...
Понимает, может не так, как от него ожидают, но понимает.
Цитата: UAS
Эхх) Проще было бы все таблицами, но не так это гибко.. Ладно, думать буду завтра, а то ща уже 2 ночи((
Если точно известно, что сайт не будет менять дизайн каждые три месяца, то и гибкость ему не нужна такая уж. Имхо, исходить нужно из реального положения дел. Исключения, когда хочется после завершения работы разогнуть пальцы.
Цитата: UAS
Да учиться я без проблем) Дайте норм.мануал) Так то я читал и шаблоны смотрел (того же vkontakte.ru), но блин когда сам с нуля пишешь - все равно сложновато=)
А насчет задачи.. Ну то что я привел это обобщение.. По идее это все поменятся ещё сто раз, но для костяка надо такой шаблон пока что...
А насчет задачи.. Ну то что я привел это обобщение.. По идее это все поменятся ещё сто раз, но для костяка надо такой шаблон пока что...
Заметил, что многие аспекты освоил намного быстрее, когда стал использовать не многичисленные учебники и самописные мануалы, а спецификации в купе с обязательным тестированием в разных браузерах и поиском нетривиальных решений в гугле.
