Вопросы по верстке макета (онлайн)

Benya-a · January 17, 2012

Доброго времени суток!

Новичок, первый макет с которого начал верстать.

Оригинал:

На данный момент (что имеется):

Вопросы:

1. Как лучше реализовать пункты меню? (Далее будет код)

2. Черная плашка. Как ее реализовать?

3. Общие комментарии.

HTML:


<html>
<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="css/style.css">
</head>

<body>

	<div class="content">
		<div class="header">
			<img src="img/logo.png">
				<ul>
					<li><a href="#">HOME</a></li>
					<li><a href="#">PRODUCTS</a></li>
					<li><a href="#">SERVICES</a></li>
					<li><a href="#">BLOG</a></li>
					<li><a href="#">CONTACT</a></li>
				</ul>
				<ul class="small">
					<li><a href="#">Back to home</a></li>
					<li><a href="#">What we have for you</a></li>
					<li><a href="#">Things we do</a></li>
					<li><a href="#">Follow for our updates</a></li>
					<li><a href="#">Ways to reach us</a></li>
				</ul>
		</div>
		<img src="img/main_background.png">
	</div>

</body>
</html>

CSS:


body {
	margin: 0px auto;
	font-family: helvetica;
}

.content {
	background-color: #a3cdcc;
	width: 940px;
	height: 1600px;
	margin: 0px auto;
}

.header img {
	float: left;
}

.header ul {
	margin: 0px;
	padding: 0px;
	width: 531px;
	float: right;
	padding-top: 40px;
}

.header ul li a {
	text-decoration: none;
	color: #666;
	padding-left: 10px;
	padding-right: 10px;
	height: 17px;
	border-left: 1px dotted #999;
}

.header ul li {
	display: inline;
	width: 66px;
}

.small {
	font-size: 0.5em;
}

.small ul {
	padding-top: -20px;
	clear: both;
}

Благодарю за содействие! Буду писать сюда, как и что делаю, чтобы получать ОС.

Edited January 17, 2012 by Benya-a

Sole · January 18, 2012

1 меню делается одним списком, мелкий текст оберните в <span></span>


<ul class="nav">
	<li>
		<a href="#">HOME<br><span>Back to home</span></a>
	</li>
</ul>

2 background для соответствующего блока

3 у вас отсутствует doctype, тег title тоже нужно добавить

Edited January 18, 2012 by Sole

Sole · January 18, 2012

ну и примерно стили


.nav a {
color:#666;
text-decoration:none;
text-transform:uppercase;
}	
.nav a span {
font-size:10px;
text-transform:lowercase;
}

Edited January 18, 2012 by Sole

Benya-a · January 19, 2012

Спасибо огромное за обратную связь.

Вчера удалил все и начал заново собирать по кускам. Уже лучше. Однако есть вопросы.

Что имею на данный момент:

HTML:


<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/style.css" />
	<title>First site</title>
</head>
<body>

<div class="wrap">

	<div class="header">
		<img src="img/logo.png">
		<ul class="nav">
			<li><a href="#">HOME</a></li>
			<li><a href="#">PRODUCT</a></li>
			<li><a href="#">SERVICES</a></li>
			<li><a href="#">BLOG</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
		<ul class="nav2">
			<li><a href="#">B<span>ack to home</span></a></li>
			<li><a href="#">W<span>hat we have for you</span></a></li>
			<li><a href="#">T<span>hings we do</span></a></li>
			<li><a href="#">F<span>ollow our updates</span></a></li>
			<li><a href="#">W<span>ays to reach us</span></a></li>
		</ul>
	</div>	

	<div class="content">
		<div class="banner">
			<img src="img/main_background.png">
		</div>
	</div>

	<div class="footer">

	</div>

</div>

</body>
</html>

CSS:


* {
	margin: 0;
	padding: 0;
}

body {
	min-width: 1600px;
	width: 100%;
	height: 1600px;
	margin: 0px auto;
	font-family: helvetica;
}

.wrap {
	width: 940px;
	margin: auto;
	background: grey;
}

.nav a, .nav2 a {
	text-decoration: none;
	text-transform: uppercase;
	padding-left: 5px;
}

.nav2 a span {
	font-size: 10px;
	text-transform: lowercase;
}

.nav, .nav2 {
	list-style: none;
	width: 532px;
	float: right;
	padding-top: 20px;
}

.nav li, .nav2 li {
	text-align: center;
	display: inline;
	border-left: 1px dotted #bcbcbc;
	width: 520px;
}

.header img {
	float: left;
}

.banner {

}

.banner img {
	padding-top: 22px;
}

Вопрос, залить фон сзади данной картинки?

Sole · January 20, 2012




		<ul class="nav">
			<li><a href="#">HOME</a></li>
			<li><a href="#">PRODUCT</a></li>
			<li><a href="#">SERVICES</a></li>
			<li><a href="#">BLOG</a></li>
			<li><a href="#">CONTACT</a></li>
		</ul>
		<ul class="nav2">
			<li><a href="#">B<span>ack to home</span></a></li>
			<li><a href="#">W<span>hat we have for you</span></a></li>
			<li><a href="#">T<span>hings we do</span></a></li>
			<li><a href="#">F<span>ollow our updates</span></a></li>
			<li><a href="#">W<span>ays to reach us</span></a></li>
		</ul>

Зачем вы ставите 2 списка в хедере? Там явно одно меню: название пункта и его краткое описание. Объедините все в один.


	<div class="content">
		<div class="banner">
			<img src="img/main_background.png">
		</div>
	</div>

зачем у вас здесь лишние дивы? еще и без стилей?

Вопрос, залить фон сзади данной картинки?

можно сделать background у .banner, а можно сразу для body сделать один фон: светло-серый хедер + темно-серая плашка

param · January 20, 2012

Слышал что использовать в идентификаторах и классах, слово banner не не рекомендуется так как, на это реагирую программы типа Аутпоста и просто вырезают этот элемент.

Sign In

Вопросы по верстке макета (онлайн)

Question

Benya-a

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Sole

Link to comment

Share on other sites

Sole

Link to comment

Share on other sites

Benya-a

Link to comment

Share on other sites

Sole

Link to comment

Share on other sites

param

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information