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

Форум ZiSMO.biz


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

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

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

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 6ч 50м
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
Постоянный
  • Онлайн:30д 18ч 35м
21

 

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

 

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д 6ч 50м
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 Отправлено

foxyman007
Premium plus
  • Онлайн:4д 18ч 57м
12

Я думаю это вам подойдет))

 

http://soc-sender.ru/users/create - регистрация

http://soc-sender.ru/ - презентация


Сообщение отредактировал foxyman007: 02 03 2019 - 14:52

Сервисы для ЛС в ВК почти без банов https://zismo.biz/to...-bez-banov-kli/

    • 4
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 6ч 50м
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
Постоянный
  • Онлайн:30д 18ч 35м
21

 

 

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

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д 6ч 50м
0
nav{
padding: 0 1rem;
display: flex;
flex-wrap: wrap;
height: 3.5rem;
align-items: center;
}

Благодарю.


    • 0
  • Наверх