Верстка DIV

okunev2 · February 19, 2008

Вот решил на див переходить, на пинайте, хочу спросить основы!

Как сделать фиксированными несколько блоков при определенном разрешении,чтобы не было съезда? Верстка смешаная таблица и div, таблица тянется по высоте и ширине, центральная колонка фиксировнная в шапке будут блоки div, так же блоки div в центре и внизу!

Дайте хорошие примеры, по реализации такого макета, чтобы понять суть верстки div, плиз.

Slyfox · February 19, 2008

http://htmlbook.ru/content/?pid=17

Mordraug · February 19, 2008

Если вам хочется именно поразбираться ? посмотрите вот это, к примеру, возможно многие вопросы отпадут. А так ? за основами вам раздел "Шаг за Шагом" или "Рецепты" (кнопочки в самом верху страницы).

А то, что решили переходить ? это правильно... нужно повышать собственный уровень

okunev2 · February 21, 2008

Вот начал верстать дивами, это шапка сайта, центр фиксированный, по высоте резина тоже:

html {
 height:100%;
}
* html body {
 height: 100%;
}
body {
 padding: 0px;
 margin: 0 auto;
 width: 100%;
 position: relative;
 min-height:100%;
}
img {
 border: 0px;
}

#main {
 position: relative;
 height: 100%;
 min-width: 1200px;
}

#header_fon {
 width: 100%;
 height: 264px;
 background: url(images/fon_header.jpg) top left repeat-x;
}

#header_left-block {
 background: url(images/fon_header_left-block.jpg) top left no-repeat;
 float: left;
 width: 600px;
 height: 264px;
}

#header_right-block {
 background: url(images/fon_header_right-block.jpg) top left no-repeat;
 float: right;
 width: 590px;
 height: 264px;
}

это страница сама:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Шаблон - zodiac_atlas-a</title>
 <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <META http-equiv="Content-Language" content="ru">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="style.css">
<!--[if lte IE 6]><script src="minmax.js" type="text/javascript"></script><![endif]-->
</head>

<body>

<div id="main">

<div id="header_fon">
<div id="header_left-block"></div>
<div id="header_right-block"></div>
</div>
</div>

</body>

</body>
</html>

Как мне расположить остальные блоки также в шапке, как на картинке, по центру блок и кратко новости (зеленый), правее и ниже ещ? блок с меню (оранжевый), так ниже от центрального блока ссылки и ниже главная сслыка (ссылка1 и т.д.)? Подскажите пример кода плиз!

Slyfox · February 21, 2008

Я так понял, что нужно чтобы все блоки были по центру и один под одним.

<div id="main" align="center">
 <div id="header_left-block"></div>
 <div id="header_right-block"></div>
</div>

Думаю, что так должно заработать

Slyfox · February 21, 2008

align="center" вставляй там, где прописано id="main", если нужно выравнивать абсолютно все.

Код я подредактировал.

okunev2 · February 21, 2008

Ребята в ячейки есть картинка к ней применяется прозрачность, она в ячейке как фон, там же нужно поверх писать текстом, а щас он внизу под картинкой, как мне в css это прописать, вот:

<td rowspan="2" class="header1_8"><div class="a1"><img src="images/fon02.gif" class="opacity" width="220" height="138"></div><div class="a1">О компании</div></td>

okunev2 · February 21, 2008

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

Slyfox · February 21, 2008

Думаю что поможет

position: relative

klierik · February 21, 2008

<td rowspan="2" class="header1_8">
 <div class="a1" style="position: relative;">
 <img src="images/fon02.gif" class="opacity" width="220" height="138">
 <div style="position: absolute; left:0; top: 0;">О компании</div>
 </div>
</td>

okunev2 · February 22, 2008

Хотиь и стоит фиксированная ширина, текст вниз съезжает, а блок на месте!

klierik · February 22, 2008

overflow: hidden;

Sign In

Верстка DIV

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information