Блочная верстка по-быстрому

Несколько простых приемов.

1. Создаем див, назначаем ему фон. Вставляем в него другой див в котором будет контент. Ему ставим стиль relative и z-index. Теперь под контент можно подсовывать разные другие картинки. Между фоном и текстом. Чем больше число z индекса тем слой выше.

Если родительский див релативный, то в него можно ставить див с абсолютной позицией — отсчет начнется от края релативного дива.

<div id="page" style="position: relative">
<div style="position: absolute; width: 870px;  z-index: 1; left: 0px; top: -30px; ">
	<div style="float: right; width: 350px; height: 600px; background-image: url ('1234.png'); background-size: 350px">
</div>		</div>

</div> </div>

А вот такая конструкция:

body         {  background:url ('1234.png') center top; }

#page {

	position: relative;  z-index:1;
	margin: 0px auto 0;
	width: 1200px;
}
#page_back {
width: 1200px;
display: inline-block;
background-color: #F0DC7D;
}

body { background:url('1234.png') center top; }

#page {

position: relative; z-index:1;

margin: 0px auto 0;

width: 1200px;

}

#page_back {

width: 1200px;

display: inline-block;

background-color: #F0DC7D;

}

обеспечит нам див #page как контейнер для всего контента по центру.

А display: inline-block; нужно чтобы контейнер растягивался вместе с содержимым.

И недурно бы отделить теперь фон:

#page_back {

	background: url(images/content.gif);

}

#page_back {

background: url(images/content.gif);

}

Этот див вставляем внутрь #page.

Далее — див контент.

#content {

	padding: 10px 0px 10px 0px;

	float: left;

	width: 750px;

	overflow: hidden;

}
.post {position:relative; z-index:9999;

	clear:both;

	padding-top: 15px;

}

#content {

padding: 10px 0px 10px 0px;

float: left;

width: 750px;

overflow: hidden;

}

.post {position:relative; z-index:9999;

clear:both;

padding-top: 15px;

}

а в нем класс post релативный, для возможности подводить под него картинки, например.

Сайдбар.

С ним такая же песня:

#sidebar {position:relative; z-index:99999;
	float: right;
	padding: 20px 30px 20px 0px;
	width: 230px;
	color: #4c3c2d;
	overflow: hidden;
}
#sidebar_back {
	background: url(images/sidebar_title.gif) no-repeat top;
	margin: 10px 0 0 0;
	padding: 0;
}

#sidebar {position:relative; z-index:99999;

float: right;

padding: 20px 30px 20px 0px;

width: 230px;

color: #4c3c2d;

overflow: hidden;

}

#sidebar_back {

background: url(images/sidebar_title.gif) no-repeat top;

margin: 10px 0 0 0;

padding: 0;

}

С шапкой и подвалом поступаем также.

Продолжение следует…

основа для верстки контент сверху в коде

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Выбор августа 1945-го » Техника Победы</title>

<style>
<!--

body         {   center top; margin:0px;  padding:0px;}

#page {

	position: relative;  z-index:1;
	width: 900px; margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0; background-color:#999999
}

#page_back {
width: 900px;
display: inline-block;
background-color: #F0DC7D;
}
#header {position:absolute; z-index:9999;
 width: 900px;
	clear:both;
 	left:0px;
	top: 0px;
 display: inline-block; background-color:#7B722D; height:215px;
}
#post {float: right;position: relative;
 width: 650px;
	clear:both;

 display: inline-block; margin-top:222px
}

#sidebar { float: left; position:absolute;
		padding: 0px 30px 20px 0px;
	width: 230px;
	color: #4c3c2d;
	overflow: hidden; top: 225px; display: inline-block;
}

#footer {
 width: 900px;
	clear:both;
 	left:0px;

 background-color:#C0C0C0; height:100px
 }
 -->
</style>

</head>

<body leftmargin="0" rightmargin="0" >

<div id="page">
<div id="page_back">
<div id="post">post</div>
<div id="sidebar">sidebar</div>
<div id="header">header</div>
<div id="footer">footer</div>
</div>
</div>

</body>

</html>

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

<head>

<title>Выбор августа 1945-го » Техника Победы</title>

<style>

<!--

body { center top; margin:0px; padding:0px;}

#page {

position: relative; z-index:1;

width: 900px; margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0; background-color:#999999

}

#page_back {

width: 900px;

display: inline-block;

background-color: #F0DC7D;

}

#header {position:absolute; z-index:9999;

width: 900px;

clear:both;

left:0px;

top: 0px;

display: inline-block; background-color:#7B722D; height:215px;

}

#post {float: right;position: relative;

width: 650px;

clear:both;

display: inline-block; margin-top:222px

}

#sidebar { float: left; position:absolute;

padding: 0px 30px 20px 0px;

width: 230px;

color: #4c3c2d;

overflow: hidden; top: 225px; display: inline-block;

}

#footer {

width: 900px;

clear:both;

left:0px;

background-color:#C0C0C0; height:100px

}

-->

</style>

</head>

<div id="sidebar">sidebar</div>

<div id="header">header</div>

<div id="footer">footer</div>

</div>

</body>

</html>

А вот более грамотный свежак допиленный под современные стандарты ниже приводится файл стилей

https://www.goldedu.ru.

body         {   center top; margin:0px;  padding:0px;  background-color: #EFEDE0;}

#page {

	position: relative;  z-index:1;
	width: 1200px; margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0;
}

#page_back {
width: 1200px;
display: inline-block; background-color: #EFEDE0;

}
#header {position:absolute; z-index:9999;
 width: 100%;
	clear:both;
 	left:0px;
	top: 0px;
 display: inline-block; background-color:#003637; height:120px; padding-left:50px; color:#FFFFFF
}
#post {float: right;position: relative;
 width: 900px;
	clear:both;  line-height:150%;

 display: inline-block; margin-top:120px; padding:10px
}

#sidebar { float: left; position:absolute; width: 246px;
	color: #4C3C2D;
	overflow: hidden; top: 120px; display: inline-block; padding-left:0px; padding-right:30px;
	padding-top:0px; padding-bottom:20px;  background-color: #EFEDE0; font-family:Tahoma; font-size:11pt; line-height:150%}

#footer {
 width: 100%;
	clear:both;
 	left:0px;

background-color:#003637; height:50px
 }
  #recent-posts-2 , #categories-2 { list-style-type: none; margin-left:10px }

body { center top; margin:0px; padding:0px; background-color: #EFEDE0;}

#page {

position: relative; z-index:1;

width: 1200px; margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0;

}

#page_back {

width: 1200px;

display: inline-block; background-color: #EFEDE0;

}

#header {position:absolute; z-index:9999;

width: 100%;

clear:both;

left:0px;

top: 0px;

display: inline-block; background-color:#003637; height:120px; padding-left:50px; color:#FFFFFF

}

#post {float: right;position: relative;

width: 900px;

clear:both; line-height:150%;

display: inline-block; margin-top:120px; padding:10px

}

#sidebar { float: left; position:absolute; width: 246px;

color: #4C3C2D;

overflow: hidden; top: 120px; display: inline-block; padding-left:0px; padding-right:30px;

padding-top:0px; padding-bottom:20px; background-color: #EFEDE0; font-family:Tahoma; font-size:11pt; line-height:150%}

#footer {

width: 100%;

clear:both;

left:0px;

background-color:#003637; height:50px

}

#recent-posts-2 , #categories-2 { list-style-type: none; margin-left:10px }

а это
код страницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title><?php bloginfo('name'); ?> |
<?php is_home() ? bloginfo('description') : wp_title(''); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="/style.css" />
</head>
<body leftmargin="0" rightmargin="0">
<div id="page"><div id="page_back"><div id="post">
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<h1><?php if(the_title( '', '', false ) !='') the_title(); else _e('Untitled','gitem');?></h1>
<div class="info">
<?php the_content('Читать полностью &raquo;'); ?>
</div>
<?php endwhile; ?>
<div class="entries">
<div class="left"><?php next_posts_link('&laquo; Раньше') ?></div>
<div class="right"><?php previous_posts_link('Позже &raquo;') ?></div></div>
<?php else : ?>

<h3>Не найдено</h3>

К сожалению, по вашему запросу ничего не найдено.

<?php endif; ?>
</div>
<div id="sidebar">
<?php dynamic_sidebar( 'sidebar' ); ?></div>

</div>
</div>
	<div id="header"><?php include (TEMPLATEPATH . '/shapka.php'); ?></div>
	<div id="footer"><?php get_footer(); ?></div>
</body>
</html>

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

<head>

<title><?php bloginfo('name'); ?> |

<?php is_home() ? bloginfo('description') : wp_title(''); ?></title>

<?php wp_head(); ?>

</head>

<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

<?php the_content('Читать полностью »'); ?>

</div>

<?php endwhile; ?>

<?php else : ?>

<h3>Не найдено</h3>

К сожалению, по вашему запросу ничего не найдено.

<?php endif; ?>

</div>

<?php dynamic_sidebar( 'sidebar' ); ?></div>

</div>

</body>

</html>

Связанные посты:

Метки: Шаблоны

Записки вебмастера