Как правильно написать HTML код для шапки сайта?

Есть довольно простенький макет сайта. Как будет выглядеть HTML код его шапки?
d5b23c90e93d4ed9a55af764c4c9f127.png
  • Вопрос задан
  • 15118 просмотров
Решения вопроса 1
@stas3572
т.е. все остальное вы уже сверстали/знаете как сверстать, и проблема только с шапкой?

Поправил:
Что же вы так прицепились к «пустой» ячейке? Ее там нет, я ее не вижу и вы не должны видеть и вот почему: потому что там не пустая ячейка, а тянущиеся границы обертки линии меню+поиска, такие же как и справа.
вот примерно, разметка проще не придумаешь:
<div class="navigation line">
	<div class="c-wrap cl">
		<nav class="nav">
			<ul class="nav_ul">
				<li class="nav_i"></li>
				<li class="nav_i"></li>
				<li class="nav_i"></li>
				...
			</ul>
		</nav>
		<div class="search">...</div>
	</div>
</div>

и стили:
.line{
	width: 100%;
}
.c-wrap{
	width: 960px;
	margin: 0 auto;
}
.navigation{
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}
.nav{
	
}
.nav_ul{
	display: table;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.nav_i{
	display: table-cell;
}
.nav_i + .nav_i{
	border-left: 1px solid #ccc;
}
.search{
	
}

где .nav и .search флоатите или инлайните как хотите
Ответ написан
Пригласить эксперта
Ответы на вопрос 5
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Т.е. Вы хотите, чтобы за Вас тут написали код шапки сайта?
Ответ написан
Не совсем понял вопроса. Вам типа такого нужно?
<div class="wrapper">
    <div class="header">
           <div class="topbar">
                 <div class="container>
                 <div id="logo" class="pull left"></div>
                 </div>
           </div>
           <div class="navbar">
                <div class="container">
                 <ul class="nav">
                          <li class="active">Home</li>
                          <li>Ideas<span>Css,Html,php</span></li>
                          <li>Tutorials<span>Photoshop, AI, Corel</span></li>
                           <li>Blogs<span>News</span></li>
                  </ul>
                </div>
           </div>
         </div>
</div>
Ответ написан
@anlamas
вот у вас есть навигационный блок
<nav>
    содержимое: Home,..., Форма поиска
</nav>


Теперь надо просто оцентрировать. Советую сделать так:
<nav>
    <div class="center">
        содержимое: Home,..., Форма поиска
    </div>
</nav>


в css
.center {
    width: 960px;
    margin: 0 auto;
}
Ответ написан
Комментировать
@h1gh_voltage Автор вопроса
Я вот так сделал.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
	<title>Faizan Haider</title>
</head>
<body>

<div class="wrapper cf">	
	<div class="logo">
	    <img src="http://placehold.it/140x100">
	</div>
</div>

<div class="pageWrapper">
	<div class="wrapper">
		<nav>
			<ul>
				<li>Home</li>
				<li>Ideas</li>
				<li>Tutorials</li>
				<li>Blogs</li>
			</ul>
		</nav>

		<div class="search">
			<form action="#">
			<input type="search" placeholder="search...">
			<button>GO</button>
			</form>
		</div>
	</div>
</div>

</body>
</html>


* {
	box-sizing: border-box;
}

.cf:after {
	content: " ";
	display: table;
	clear: both;
}

.cf {
	zoom: 1;
}

body {
	font: normal normal normal 12px Tahoma, sans-serif ;
}



.wrapper {
	max-width: 980px;
	margin: 0 auto;
}

.pageWrapper {
	width: 100%;
	height: 100px;
	border: 1px solid #C2C2C2;
	background-color: #eee;
}

/*HEADER CSS ----------------------------------------------*/


.logo {
	margin-top: 20px;
}

nav {
	float: left;
	width: 65%;
}

.search {
	float: right;
	width: 35%;
}

nav ul {
	margin-top: -1px;
	padding: 0;
}

nav ul li {
	display: inline-block;
	margin-right: -5px;
	border: 1px solid #C2C2C2;
	height: 100px;
	font-size: 22px;
	font-weight: bold;
	
	padding: 10px 20px 0px 20px;
}

form {
	margin-top: 35px;
	float: right;
}
Ответ написан
@Lici
Меню выводите списком горизонтальным.
Выставьте минимальную ширину и высоту пункта списка.
В первый пункт вставьте только один пробел неразрывный. И будет вам пустой блок.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы