Container и как с ним бороться
193
30 августа 2018, 15:20
Добрый день уважаемые коллеги.
Возник такой вопрос, есть значит меню nav оно должно располагаться на всю ширину экрана, а после nav должен быть контейнер 1170px, но, нужно это сделать так, чтобы в nav был контейнер и до меня не доходит как это сделать.
Плюс еще надо выровнять список по центру вертикаль и горизонталь, и чтобы при наведении был тот эффект что сейчас есть, но только на всю высоту nav.
Единственные вещи которые меня тормозят это меню, оно должно быть фиксировано, чтобы всё было выровнено.
А так же ссылка 1 и 5 должны быть по разные стороны nav, прошу вас, помогите пожалуйста!
* {
margin: 0;padding: 0;
}
body {
background: #272727;
font-family: 'PT Sans', sans-serif;
font-size: 18px;
}
nav {
height: 100px;
width: 100%;
background: #f9f9f9;
}
ul {
list-style: none;
}
li {
display: inline-block;
}
a {
padding: 20px;
color: purple;
text-transform: uppercase;
}
a:hover {
background: #272727;
color: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>
</body>
</html>Answer 1
* {
margin: 0;
padding: 0;
height: 7000px;
}
body {
background: #272727;
font-family: 'PT Sans', sans-serif;
font-size: 18px;
}
nav {
margin: 0;
padding: 0;
position:fixed;
top:0;
height: 100px;
width: 100%;
background: #f9f9f9;
}
.menu{
position: relative;
width: 100%;
height: 100%;
}
.menu > ul {
display: flex;
justify-content: space-around;
}
ul {
position: absolute;
width: 100%;
text-align: center;
list-style: none;
height: 100%;
}
li {
display: inline-block;
height: 100%;
line-height: 100px;
}
a {
display: block;
padding: 0 20px;
height: 100%;
color: purple;
text-transform: uppercase;
}
a:hover {
background: #272727;
color: red;
}
h2{
margin-top: 200px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<nav>
<div class="menu">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</div>
</nav>
<h2>
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен.
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен.
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен.
Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.
По своей сути рыбатекст является альтернативой традиционному lorem ipsum, который вызывает у некторых людей недоумение при попытках прочитать рыбу текст. В отличии от lorem ipsum, текст рыба на русском языке наполнит любой макет непонятным смыслом и придаст неповторимый колорит советских времен.
</h2>
</body>
</html>
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49912 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31901 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25875 visits
- Как через css изменить цвет png изображения? 11721 visits
- Blob video url download 11267 visits
- Php curl запрос через прокси с авторизацией 10665 visits
- Работа с captcha vk api 9470 visits
© "hostciti.net" 21.12.2025 | 17:19