Первый шаблон и первые проблемы..

Dark_Semi · March 28, 2012

Добрый день!

Первый раз верстаю шаблон, и уже успел столкнуться с проблемой. Хочу сверстать вот такой шаблон -

СSS -

@charset "utf-8";
/* CSS Document */
* { padding:0; margin:0;} 
body {background:#e7e7df url(Images/bg-body.jpg) left  top no-repeat;
}
		.main {
	width:960px; margin:0 auto;}

	.head{
		height:40px;}

.content-main{
	background:#fffdfd; overflow:hidden;

}

	.content{
		width:730px; float:right; margin:15px 15px 15px 0; 
	}
	.post-main{
		background:#ffffff; margin:0;

	}
	.post-main h1{
		font:24px Verdana, Geneva, sans-serif;color:;background:#4ebbff;

		padding:5px 20px 8px 15px; margin:0;
	}
	.post-main h1 a{
		font: normal 24px Verdana, Geneva, sans-serif;color:#ffffff;text-decoration:none;
	}
	.post-main h1 a:hover{
		font: normal 24px Verdana, Geneva, sans-serif;color:#ffffff;text-decoration:underline;
	}
	.imgstyle{
		float:left; margin:0;
	}
	.post{
		margin:0;
	}
	.post p{
		font:12px Verdana, Geneva, sans-serif;color:#000; margin:0;
	}
	.post p a{ 
	color:#423e3e; text-decoration:underline;
	}






	.sitebar{
		width:275px; float:left; margin:0 15px 15px 0;
	}
	.vidget{
		background:#ffffff; margin:0;


	}
		.vidget h2{
	 font:18px Verdana, Geneva, sans-serif; background:#66cc9a;	color:#000; padding:5px 0;

		}
		.vidget ul{
		list-style:none;padding:25px 15px;	
			}
		.vidget ul li{
			font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 0 5px 20px;
		}
		.vidget ul li a{
		text-decoration:none;color:#000;
		}



	.reklama{width:275px; float:left; margin:0 15px 15px 0;
	}
	.vidget2 {
		background:#ffffff; margin:0;


	}
	.vidget2 h2{
	 font:18px Verdana, Geneva, sans-serif; background:#66cc9a;	color:#000; padding:5px 0;

		}
	.vidget2 ul{
		list-style:none;padding:25px 15px;	
			}
		.vidget2 2ul li{
			font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 0 5px 20px;
		}
		.vidget2 ul li a{
		text-decoration:none; color:#000;
		}



			.reklama1 {width:275px; float:left; margin:0 15px 15px 0; 
	}
	.vidget22 {
		background:#ffffff; margin:0;


	}
	.vidget22 h2{
	 font:18px Verdana, Geneva, sans-serif; background:#fc575e;	color:#000; padding:5px 0;

		}
	.vidget22 ul{
		list-style:none;padding:25px 15px;	
			}
		.vidget22 2ul li{
			font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 0 5px 20px;
		}
		.vidget22 ul li a{
		text-decoration:none; color:#000;
		}

.footer {
			font:14px Verdana, Geneva, sans-serif;
		}

	.reklama{width:207px; float:left; margin:0; padding:20px 0 0 0; 
	}
	.vidget2 {
		background:#ffffff; margin:0;


	}
	.vidget2 h2{
	 font:18px Verdana, Geneva, sans-serif; background:#f3a950;	color:#000; padding:5px 0;

		}
	.vidget2 ul{
		list-style:none;padding:25px 15px;	
			}
		.vidget2 2ul li{
			font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 0 5px 20px;
		}
		.vidget2 ul li a{
		text-decoration:none; color:#000;
		}



			.reklama1 {width:207px; float:left; margin:0; padding:20px 0 0 0; 
	}
	.vidget22 {
		background:#ffffff; margin:0;


	}
	.vidget22 h2{
	 font:18px Verdana, Geneva, sans-serif; background:#fc575e;	color:#000; padding:5px 0;

		}
	.vidget22 ul{
		list-style:none;padding:25px 15px;	
			}
		.vidget22 2ul li{
			font:14px Verdana, Geneva, sans-serif; color:#000; padding:5px 0 5px 20px;
		}
		.vidget22 ul li a{
		text-decoration:none; color:#000;
		}

.footer {
			font:14px Verdana, Geneva, sans-serif;
		}

HTML -

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>GRead beta</title>
</head>

<body>
<div class="main">
<div class="head">
</div>


<div class="content">
<div class="post-main">
<h1><a href="#">Welcom</a></h1>
<div class="post"> 
Hello, Friends.</p>GRead helps you to read book conveniently. But I will not tell a lot better to look screencast: </p>
If you have any question, send in to me: <a href="#">spirt40@gmail.com</a>

</div>
</div></div>


<div class="sitebar">
<div class="vidget">
<h2>Log in</h2>
<ul>
<li>- <a href="#">История макияжа</a></li>
<li>- <a href="#">Правила макияжа</a></li>
<li>- <a href="#">Уроки макияжа</a></li>
<li>- <a href="#">Макияж глаз</a></li>
<li>- <a href="#">Макияж звезд</a></li>
</ul>

</div>
<div class="reklama">
<div class="vidget2">
<h2>Реклама</h2>
<ul>
<li><center><img src=Images/reklama1.jpg></center></p><center><a href="#">Стрижки, не требующие укладки</a></center></li>
</ul>
</div>
<div class="reklama1">
<div class="vidget22">
<h2>Реклама</h2>
<ul>
<li><center><img src=Images/reklama1.jpg></center></p><center><a href="#">Стрижки, не требующие укладки</a></center></li>
</ul>
</div></div>
<div class="footer"></div>
<br />
</div></div></div>
</body>
</html>

Получилось вот что -

В общем пока не выходит.. Подскажите что и как нужно исправить, чтоб было так как на 1 картинке

Alma · March 28, 2012

добавьте float:left; к тем блокам, которые должны обтекаться

станет получше

дальше смотрите по ширине. отступам и очередности расположения в хтмл файле

NeoXidizer · March 28, 2012

у вас .main - 960px, а sidebar и content вместе занимают 1005px

Sign In

Первый шаблон и первые проблемы..

Question

Dark_Semi

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Alma

Link to comment

Share on other sites

NeoXidizer

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information