Как сделать фон при блочной вёрстке сайта?

KiberNet · 18.12.2016, 17:28

Код HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div id="container">
	<div id="header">	
	<div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/SHAPKA.jpg" width="900px" height="115px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2><br><br><span style="font-family:Gabriola;font-size:34px;"><font color="#F0FFFF">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspСайт-Рюзюме Маликова Паши</font></span><br></h2>
    </div> 
	</div>
		 
	<div id="navigation">
	<div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/POLOSA.jpg" width="900px" height="20px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp	
	<a href="resume.html"><span style="font-family:Segoe Print;font-size:14px;">Р Е З Ю М Е</span></a>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp
	<a href="kontakt.html"><span style="font-family:Gabriola;font-size:14px;">К О Н Т А К Т Ы</span></a>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp
	<a href="foto.html"><span style="font-family:Gabriola;font-size:16px;">Ф О Т О</span></a>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp
	<a href="rabot.html"><span style="font-family:Gabriola;font-size:16px;">Р А Б О Т Ы</span></a>
	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
	</h2> 
    </div> 
	</div>
		 
	<div id="menu">
	<div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/MENU.jpg" width="200px" height="415px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2><br><br><span style="font-family:Gabriola;font-size:34px;"><font color="#F0FFFF">
	<p><a href="resume.html"><span style="font-family:Gabriola;font-size:24px;">• Р Е З Ю М Е</span></a></p>
	<p><a href="kontakt.html"><span style="font-family:Gabriola;font-size:24px;">• Контакты</span></a></p>
	<p><a href="foto.html"><span style="font-family:Gabriola;font-size:24px;">• Фото</span></a></p>
	<p><a href="rabot.html"><span style="font-family:Gabriola;font-size:24px;">• Работы</span></a></p>
	</font></span><br></h2>
    </div>
	</div>
		 
	<div id="content">
	 <span style="font-family:Gabriola;font-size:28px;">
	 <p>***РЕЗЮМЕ : Программиста в Компьютерных Системах (Оператора ЭВМ )<p/>
	 <p>**Специалиста среднего образования Техникума им. Сорокина группы ПКС-4<p/>
	</div>
		 
	<div id="clear">
		 
	</div>
							   
	<div id="footer">
	<div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/C.jpg" width="900px" height="80px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2><span style="font-family:Courier New;font-size:24px;"><font color="#F0FFFF"><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspСOPY RIGHT!</font></span><br></h2>
    </div>
	</div>
	
</div>
		 
</body>
</html>

[CSS]body {

color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {

margin: 30px auto;
width: 900px;
height: 600px;
}

#header {

height: 100px;
width: 900px;
}

#navigation {

width: 900px;
height: 20px;
}

#menu {

float: left;
width: 200px;
height: 400px;
}

#content {
float: right;

width: 700px;
height: 400px;
}

#clear {
clear:both;
}

#footer {
height: 80px;
width: 900px;
}
[/CSS]

Это то что сейчас, а надо то что на рисунке, так как препод сменил задание...
В блоке контент должна остаться запись на фоне который и в меню и в котейнере в общем у этих блоков общий фон...

18.12.2016, 17:28
Helpmaster Member Регистрация: 08.03.2016 Сообщений: 0	Дам вам рекомендацию - прочитайте данные топики Как при блочной верстке разместить текст по центру блока? Как правильно и лучше сделать для сайта? При создании сайта решил сделать в нем форум

Ads
Яндекс Member Регистрация: 31.10.2006 Сообщений: 40200 Записей в дневнике: 0 Сказал(а) спасибо: 0 Поблагодарили 0 раз(а) в 0 сообщениях Репутация: 55070