Нестандартная верстка

slava03 · May 12, 2011

Здравствуйте, уважаемые форумчане! Мне нужна небольшая помощь с версткой. Верстка трехколоночного сайта. Имеется готовая верстка, в которой нужно внести небольшое изменение, а я не знаю как. Вот ссылка для скачивания верстки: http://dump.ru/file/5215651 - вопрос в том, как сделать чтобы шапка и подвал были не сверху и снизу (соответственно) правого блока, а прижимались к нему сбоку (соответственно шапка сверху сбоку блока, подвал снизу сбоку блока)?

Softlink · May 12, 2011

вы бы сюда скинули код, или залили на какой-нибудь хост.

slava03 · May 12, 2011

вы бы сюда скинули код, или залили на какой-нибудь хост.

Так я же в сообщении дал ссылку на скачивание этой верстки http://dump.ru/file/5215651 - там все файлы - html, css и jpg для фона контента.

Но могу и код:

HTML и CSS

<html>
<head>
<title>Блочная верстка</title>
<link href="table layout.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
  <h1>Header</h1>
</div>
<div id="left">Левый блок  
</div>
<div id="right">Правый блок  
</div>

<div id="content">Контент  
</div>
<div id="clear"></div>
<div id="footer"> 
  Подвал
</div>
</div>
</body>
</html>

body, html {
margin:0px; 
padding:0px;
text-align:center; 
}
#wrapper{
margin:0 auto;  
text-align:left;  
width:800px; 
}

#header{
background-color:#63b9da;
}
#header h1 {
	margin: 0; 
	padding: 10px 0; 
}

#left{
background-color:#a9d28c;
width:150px; 
height:740px; 
float:left;  
}

#right{
width:150px;
height:740px; 
background-color:#a9d28c;
float:right; 
}

#content{
width:550px;
height:740px;
background:url('preview.jpg');
margin:0px; 
margin-left:151px; 
margin-right:102px; 
}
#content h1 {
margin:0px; 
} 
#content p {
margin:0px; 
padding:5px; 
}

#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}

#footer{
height:100px;
background-color:#d292bc;
}
#footer p{
margin:0px;  
padding: 10px 0; 
}

Edited May 12, 2011 by slava03

Softlink · May 12, 2011

код надо в теги засовывать.

Посмотрите, вы так хотели?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251" />
<link rel="stylesheet" href="style.css">
</head>

<style>
body, html {
margin:0px; 
padding:0px;
text-align:center; 
}
#wrapper{
margin:0 auto; 
text-align:left; 
width:800px; 
overflow:hidden;
}

#header{
background-color:#63b9da;
width:650px;
float:left;
}
#header h1 {
margin: 0; 
padding: 10px 0; 
}

#left{
background-color:#a9d28c;
width:150px; 
height:640px; 
float:left; 
}

#right{
width:150px;
height:797px; 
background-color:#a9d28c;
float:right; 
}

#content{
width:550px;
height:640px;
background:url('preview.jpg');
margin:0px; 
margin-left:151px; 
margin-right:102px; 
}
#content h1 {
margin:0px; 
} 
#content p {
margin:0px; 
padding:5px; 
}

#clear{
height:0;
font-size:1px;
line-height:0px;
clear:both;
}

#footer{
height:100px;
background-color:#d292bc;
width:650px;
float:left;
}
#footer p{
margin:0px; 
padding: 10px 0; 
} 
</style>

<body>
<div id="wrapper">
	<div id="header">
		<h1>Header</h1>
	</div>


	<div id="right">Правый блок</div>
	<div id="left">Левый блок</div>

	<div id="content">Контент</div>

	<div id="footer">Подвал</div>
</div>



</body>

</html>

slava03 · May 12, 2011

код надо в теги засовывать.

Спасибо, не знал.

Посмотрите, вы так хотели?

Большое спасибо за быструю помощь, Вы сделали именно то, что мне нужно. Фоновую картинку для контента вставлю сам.

Sign In

Нестандартная верстка

Question

slava03

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

slava03

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

slava03

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information