Моя первая верстка), подскажите

Общее
1

Пытаюсь сделать по макету (psd) навигацию сайта, в макете ширина горизонтального списка 940 пикселей, ставлю ее списку, в браузере даже названия всех 8 элементов не влазят, хотя по макету все должно быть норм, шрифт в фотошопе тоже смотрел, поставил такой же.

Кода мало, так что вставлю весь), и jpg вместо psd, заранее спасибо

<head>
	<meta charset="utf-8">
	<link href="style.css" rel="stylesheet"> 
</head> 
<body>
	<header>
		<h1><a href="index.html">WEBSITE</a></h1>
		<nav>
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">PRODUCTS</a></li>
				<li><a href="#">VIDEOS</a></li>
				<li><a href="#">PRICING</a></li>
				<li><a href="#">COMPANY</a></li>
				<li><a href="#">SUPPORT</a></li>
				<li><a href="#">BLOG</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</nav>
	</header>
</body>

И СSS

body {
padding: 0px;
margin: 0px;
background: #e5e6e9;
}

@font-face {
font-family: ‘Arial Rounded MT Bold’;
src: url(fonts/Arial-Rounded-MT-Bold-Bold.ttf);
}

header h1 {
font-size: 37px;
background: green;
font-family: Arial Rounded MT Bold, Arial, sans-serif;
margin: 33px auto 0px;
width: 180px;
padding: 0px 10px 0px;
height: 40px;
}

header h1 a {
text-decoration: none;
color: #2498f8;
}

nav ul {
width: 940px;
}

nav ul li {
display: inline-block;
background: #f8f8f8;
height: 15px;
padding: 14px 0px 20px;
margin: -4px;
}

nav ul li a{
text-decoration: none;
font-size: 13px;
color: #444;
}

nav ul li:first-child {
border-radius: 20px 0px 0px 20px;
}

nav ul li:last-child {
border-radius: 0px 20px 20px 0px;
}

Product-Website-Template.jpg1100×3336 817 KB

2

У ul браузером добавляются стили по умолчанию. Попробуйте убрать отступы у него.

3

короче я так понял у меня ширина не выставляется просто), затупил я, то есть ширина списка ставится, но элементы не растягиваются по нему, как сделать чтобы растягивались?)

4

Для этой цели подойдут флексбоксы. Или ещё вариант задать ширину элементов в %.

5

Вы не совсем корректно используете конструкцию <nav></nav>. В этот тег не нужно вкладывать список, он служит для навигации по сайту и в него вкладывают ссылки. Вот информация про nav. Исходя из этого можно убрать немного html и львиную долю вашего css.
Собственно html:
`

WEBSITE



HOME
PRODUCTS
VIDEOS
PRICING
COMPANY
SUPPORT
BLOG
CONTACT
`

Ну и CSS:

body { padding: 0px; margin: 0px; background: #e5e6e9; } /*вы убираете подчеркивание для всех ссылок одним правилом*/ a{ text-decoration: none; } header h1 { width: 180px; height: 40px; margin: 33px auto 0px; padding: 0px 10px 0px; border-radius: 10px; font: 37px Arial, sans-serif; background: lightcyan; text-align: center; } header h1 a { color: #2498f8; } /*Вот ваша ширина 940*/ nav { width: 940px; margin: 0 auto; /*центрирование nav*/ padding: 20px; border-radius: 20px; /*скругленные углы для блока nav - скругление для li это нечто*/ background: #f8f8f8; } nav a { margin-left: 60px; font: 13px Arial, sans-serif; color: #444; } nav a:first-child{ margin-left: 30px; }

6

спасибо, сейчас все попробую)

7

У вас получается по этому коду вертикальное меню, и ссылки не являются блоками, так ведь?) Я же задаю inline-block(меню горизонтальное) для li и получается что радиусы закруглений должны быть у li а не у nav , блок nav вообще не отображается никак в браузере.

8

Да, но на прикрепленном вами макете как раз таки скругление углов для всего блока, а элементы меню при наведении просто меняют фоновый цвет.

9

вообщем растянул блоки с ссылками по всему блоку nav при помощи процентов, скругления сделал у nav), просто думал что скругление у li будет красивее выглядеть при наведении на него), спасибо что просветили вообщем по мелочам=)

10

Я наверное поспешил и не понял вас сначала правильно до конца.
Думаю вот так было вам нужно: https://jsfiddle.net/u2qs1acy/

11

Вообщем сделал все вот так через nav): но теперь при наведении на li цвет не задается одновременно для фона и цвета ссылки, только при наведении на саму ссылку оба цвета соответствуют.
nav {

width: 940px;
margin: 36px auto 0px;

}

nav li {
display:inline-block;
font-size: 13px;
padding: 20px 0px;
background: #f8f8f8;
width: 12.5%;
text-align: center;
margin-left: -4px;
color: #444;
}

nav li:first-child{
border-radius: 20px 0 0 20px;
margin-left: 0px;
}
nav li:last-child{
border-radius: 0 20px 20px 0;
}

nav li:hover {
background: #484b4d;
color: white;
}

12

Решилось сделав ссылки блоками и перекинув им паддинги с пунктов меню, правда пришлось еще закругления и ссылкам сделать))