Перейти к содержимому

Форум ZiSMO.biz


Купить ссылку здесь
Фотография

РАЗМЕСТИТЬ ШАПКУ СВЕРХУ HTML CSS

Форум ZiSMO.biz
html css шапка шапка сайта
5
Сообщений в теме: 5

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 8ч 13м
0

Здравствуйте. Имеем следующий код:

 

HTML 

 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>TEST.COM   Тест</title>
<link href="source/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="container">


<nav>
<a href="#">
<img src="source/img/logo.png" alt="#">
</a>
<a href="#">Главная</a>
<a href="#">Контакты</a>
<a href="#">Поддержка</a>
</nav>




</div>
</body>
</html>

CSS

body{
font-family: 'Yanone Kaffeesatz', sans-serif;
} 


* {
  box-sizing: border-box;
}
/* 360-28-31 */


.container{
  max-width: 960px;
  margin: 3rem auto;
}


nav{
  padding: 0 1rem;
  background-color: silver;
  display: flex;
  flex-wrap: wrap;
  height: 3.5rem;
  align-items: center;
}


nav > a{
  display: inline-block;
  color: black;
  cursor: pointer;
  text-decoration: none;
  padding: 0 1rem;
  margin-right: .5rem;
}


nav > a:last-of-type{
  margin-right: 0;
}

Дело в том, что шапка располагается не с верху и растянута до обоих краёв, а по середине. Как мне можно это исправить?

 

 

 


    • 0
  • Наверх

Поделиться этим:

OFFLINE Отправлено

Dinver
Постоянный
  • Онлайн:37д 7ч 31м
30

 

Здравствуйте. Имеем следующий код:

 

HTML 

 


 
 

CSS


 
 

Дело в том, что шапка располагается не с верху и растянута до обоих краёв, а по середине. Как мне можно это исправить?

 

 

 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>TEST.COM   Тест</title>
<link href="source/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<nav>
<a href="#">
<img src="source/img/logo.png" alt="#">
</a>
<a href="#">Главная</a>
<a href="#">Контакты</a>
<a href="#">Поддержка</a>
</nav>
</header>
</body>
</html>
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
margin: 0;
} 


* {
  box-sizing: border-box;
}
/* 360-28-31 */


.container{
  max-width: 960px;
  margin: 3rem auto;
}

header {
background-color: silver;
display: flex;
justify-content: center;
}

nav{
width: 960px;
padding: 0 1rem;
display: flex;
flex-wrap: wrap;
height: 3.5rem;
align-items: center;
}
nav > a{   display: inline-block;   color: black;   cursor: pointer;   text-decoration: none;   padding: 0 1rem;   margin-right: .5rem; } nav > a:last-of-type{   margin-right: 0; } 

d23f3b80c7aafc50d8c3ca3510fe79e1-full.pn

 

Если правильно понял конечно.


Сообщение отредактировал Dinver: 13 01 2019 - 12:03

    • 1
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 8ч 13м
0
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>TEST.COM   Тест</title>
<link href="source/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<nav>
<a href="#">
<img src="source/img/logo.png" alt="#">
</a>
<a href="#">Главная</a>
<a href="#">Контакты</a>
<a href="#">Поддержка</a>
</nav>
</header>
</body>
</html>
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
margin: 0;
} 


* {
  box-sizing: border-box;
}
/* 360-28-31 */


.container{
  max-width: 960px;
  margin: 3rem auto;
}

header {
background-color: silver;
display: flex;
justify-content: center;
}

nav{
width: 960px;
padding: 0 1rem;
display: flex;
flex-wrap: wrap;
height: 3.5rem;
align-items: center;
}
nav > a{   display: inline-block;   color: black;   cursor: pointer;   text-decoration: none;   padding: 0 1rem;   margin-right: .5rem; } nav > a:last-of-type{   margin-right: 0; } 

Cпасибо большое!

 

Если правильно понял конечно.

 


    • 0
  • Наверх

Рекламный пост

OFFLINE Отправлено

Pleorin
VIP
  • Онлайн:16д 18ч 51м
62

*
Популярное сообщение!

1)  sms-online.pro - новый, динамически развивающийся, сайт по SMS активациям почти любого сервиса!

Наш сервис полностью автоматизирован
Мы можем похвастаться не только высокой скоростью работы сайта, но и скоростью предоставления SMS сообщений.

Большой выбор стран!

0857741a94ee60ff651ae6730881f767.gif

 

Канал в Telegram:@smsonlinepro
Поддержка в Telegram: @Pleorin
Почта: support@sms-online.pro

 

2) opt-vk.ru - наш магазин АККАУНТОВ и ПРOКСИ по оптовым ценам

Индивидуальные предложения каждому!

Канал в Telegram@optvkru


Сообщение отредактировал Pleorin: 01 07 2019 - 10:34

http://sms-online.pro  - Лучший сайт по приему SMS от любого сервиса!  http://opt-vk.ru - Аккаунты VK.COM ПРOКСИ по оптовой ЦЕНЕ

    • 26
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 8ч 13м
0
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>TEST.COM   Тест</title>
<link href="source/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<header>
<nav>
<a href="#">
<img src="source/img/logo.png" alt="#">
</a>
<a href="#">Главная</a>
<a href="#">Контакты</a>
<a href="#">Поддержка</a>
</nav>
</header>
</body>
</html>
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
margin: 0;
} 


* {
  box-sizing: border-box;
}
/* 360-28-31 */


.container{
  max-width: 960px;
  margin: 3rem auto;
}

header {
background-color: silver;
display: flex;
justify-content: center;
}

nav{
width: 960px;
padding: 0 1rem;
display: flex;
flex-wrap: wrap;
height: 3.5rem;
align-items: center;
}
nav > a{   display: inline-block;   color: black;   cursor: pointer;   text-decoration: none;   padding: 0 1rem;   margin-right: .5rem; } nav > a:last-of-type{   margin-right: 0; } 

d23f3b80c7aafc50d8c3ca3510fe79e1-full.pn

 

А не подскажите как сделать так, чтобы лого было без отступа слева?


    • 0
  • Наверх

OFFLINE Отправлено

Dinver
Постоянный
  • Онлайн:37д 7ч 31м
30

 

 

А не подскажите как сделать так, чтобы лого было без отступа слева?

nav{
padding: 0 1rem;
display: flex;
flex-wrap: wrap;
height: 3.5rem;
align-items: center;
}

Сообщение отредактировал Dinver: 13 01 2019 - 12:21

    • 1
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 8ч 13м
0
nav{
padding: 0 1rem;
display: flex;
flex-wrap: wrap;
height: 3.5rem;
align-items: center;
}

Благодарю.


    • 0
  • Наверх