y
какого они относительно страницы распологаются то
Я не совсем разобрался с кодом, где там хедер и где блок который ведёт себя не так
Size: a a a
2021 February 02
G
Я не совсем разобрался с кодом, где там хедер и где блок который ведёт себя не так
секунду
y
И перестань дергать ширину body, создай контейнер для него задавай ширину в зависимости от ширины устройства
Контейнер внутри body, так сказать обёртка для содержимого а то вдруг Бади обернешь дивом каким нибудь))
G
Контейнер внутри body, так сказать обёртка для содержимого а то вдруг Бади обернешь дивом каким нибудь))
аххах, окей
G
налазит последний див
G
на предыдущий
y
<div class="top-menu">
<ul>
<li><a href="Link">ГЛАВНАЯ</a></li>
<li><a href="Link">МЕДИА-ЦЕНТР</a></li>
<li><a href="Link">В2В КАТАЛОГ</a></li>
<li><a href="Link">СВЯЗЬ С ОГВ</a></li>
<li><a href="Link">ОБУЧЕНИЕ</a></li>
<li><a href="Link">ВХОД</a></li>
<li class="icon1"></li>
<li class="icon2"></li>
<li class="icon3"></li>
</ul>
</div>
</div>
<div class="link-block2">
<ul>
<li><a href="Link">Деятельность</a></li>
<li><a href="Link">Мероприятия</a></li>
<li><a href="Link">История Союза</a></li>
<li><a href="Link">Обращение</a></li>
<li><a href="Link">Вступить в Союз</a></li>
</ul>
</div>
<ul>
<li><a href="Link">ГЛАВНАЯ</a></li>
<li><a href="Link">МЕДИА-ЦЕНТР</a></li>
<li><a href="Link">В2В КАТАЛОГ</a></li>
<li><a href="Link">СВЯЗЬ С ОГВ</a></li>
<li><a href="Link">ОБУЧЕНИЕ</a></li>
<li><a href="Link">ВХОД</a></li>
<li class="icon1"></li>
<li class="icon2"></li>
<li class="icon3"></li>
</ul>
</div>
</div>
<div class="link-block2">
<ul>
<li><a href="Link">Деятельность</a></li>
<li><a href="Link">Мероприятия</a></li>
<li><a href="Link">История Союза</a></li>
<li><a href="Link">Обращение</a></li>
<li><a href="Link">Вступить в Союз</a></li>
</ul>
</div>
Линк блок 2 на топ меню?
G
Линк блок 2 на топ меню?
именно
G
я понимаю, что проблема к ксс, но я уже часа 2 сижу листаю каждый сайт, перепробовал кучу всего и ничего не работает
G
по любому проблема в каком-то одном условии в ксс
G
я что-то или забыл указать, или я не знаю
y
body {
max-width: 1200px;
padding: 0 15px 0 15px;
}
li {
list-style-type: none;
}
a {
list-style-type: none;
text-decoration: none;
}
.email {
display: flex;
vertical-align: middle;
float: right;
color: white;
padding-right: 15px;
}
.LogoSPS {
display: block;
float: left;
width: 300px;
height: auto;
padding-bottom: 30px
}
.top-block {
box-sizing: border-box;
position: absolute;
display: block;
width: 100%;
height: auto;
align-items: center;
padding: 20px 150px 20px 150px;
}
.link-block {
box-sizing: border-box;
display: block;
width: auto;
height: 40px;
float: right;
background-color: #0055b7;
align-items: center;
}
.link-block li {
display: inline;
padding-left: 18px;
}
.top-menu {
position: relative;
display: block;
width: auto;
height: auto;
background: white;
}
.top-menu a {
text-decoration: none;
color: black;
}
.link-block2 {
display: flex;
background-color: blue
}
.link-block2 li {
display: inline;
list-style-type: none;
}
.link-block2 a {
color: whie;
}
.block2 {
display: flex;
max-width: 1200px;
padding: 0 15px 0 15px;
}
li {
list-style-type: none;
}
a {
list-style-type: none;
text-decoration: none;
}
.email {
display: flex;
vertical-align: middle;
float: right;
color: white;
padding-right: 15px;
}
.LogoSPS {
display: block;
float: left;
width: 300px;
height: auto;
padding-bottom: 30px
}
.top-block {
box-sizing: border-box;
position: absolute;
display: block;
width: 100%;
height: auto;
align-items: center;
padding: 20px 150px 20px 150px;
}
.link-block {
box-sizing: border-box;
display: block;
width: auto;
height: 40px;
float: right;
background-color: #0055b7;
align-items: center;
}
.link-block li {
display: inline;
padding-left: 18px;
}
.top-menu {
position: relative;
display: block;
width: auto;
height: auto;
background: white;
}
.top-menu a {
text-decoration: none;
color: black;
}
.link-block2 {
display: flex;
background-color: blue
}
.link-block2 li {
display: inline;
list-style-type: none;
}
.link-block2 a {
color: whie;
}
.block2 {
display: flex;
div итак имеет свойство display block, перезаписывать нет смысла, старайся не пользоваться флоатами, но код сейчас скопирую в кодепен, там посмотрю что не так
G
спасибо большое толлько погоди
G
хтмл тебе не весь скинул
G
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/carousel.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="top-block"><img src="Images/LogoSPS.png" class="LogoSPS" width="300px">
</div>
<div class="link-block">
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li class="email"> ✉ support@ciyashop.com</li>
</ul>
<div class="top-menu">
<ul>
<li><a href="Link">ГЛАВНАЯ</a></li>
<li><a href="Link">МЕДИА-ЦЕНТР</a></li>
<li><a href="Link">В2В КАТАЛОГ</a></li>
<li><a href="Link">СВЯЗЬ С ОГВ</a></li>
<li><a href="Link">ОБУЧЕНИЕ</a></li>
<li><a href="Link">ВХОД</a></li>
<li class="icon1"></li>
<li class="icon2"></li>
<li class="icon3"></li>
</ul>
</div>
</div>
<div class="link-block2">
<ul>
<li><a href="Link">Деятельность</a></li>
<li><a href="Link">Мероприятия</a></li>
<li><a href="Link">История Союза</a></li>
<li><a href="Link">Обращение</a></li>
<li><a href="Link">Вступить в Союз</a></li>
</ul>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/carousel.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
<div class="top-block"><img src="Images/LogoSPS.png" class="LogoSPS" width="300px">
</div>
<div class="link-block">
<ul>
<li>#</li>
<li>#</li>
<li>#</li>
<li>#</li>
<li class="email"> ✉ support@ciyashop.com</li>
</ul>
<div class="top-menu">
<ul>
<li><a href="Link">ГЛАВНАЯ</a></li>
<li><a href="Link">МЕДИА-ЦЕНТР</a></li>
<li><a href="Link">В2В КАТАЛОГ</a></li>
<li><a href="Link">СВЯЗЬ С ОГВ</a></li>
<li><a href="Link">ОБУЧЕНИЕ</a></li>
<li><a href="Link">ВХОД</a></li>
<li class="icon1"></li>
<li class="icon2"></li>
<li class="icon3"></li>
</ul>
</div>
</div>
<div class="link-block2">
<ul>
<li><a href="Link">Деятельность</a></li>
<li><a href="Link">Мероприятия</a></li>
<li><a href="Link">История Союза</a></li>
<li><a href="Link">Обращение</a></li>
<li><a href="Link">Вступить в Союз</a></li>
</ul>
</div>
</body>
</html>
y
НЧ
по любому проблема в каком-то одном условии в ксс
Проблема в том что у хедера стоит position absolut
НЧ
Никита Чеботов
Проблема в том что у хедера стоит position absolut
top-block {
box-sizing: border-box;
position: absolute;
display: block;
width: 100%;
height: auto;
align-items: center;
padding: 20px 150px 20px 150px;
}
Это ведь он?
для эксперемента поставь тут position: inherit
box-sizing: border-box;
position: absolute;
display: block;
width: 100%;
height: auto;
align-items: center;
padding: 20px 150px 20px 150px;
}
Это ведь он?
для эксперемента поставь тут position: inherit
G
окей, попробу.
k
Кто-нибудь может подредактировать svg? Нужно точно также сделать как на странице facebook.
https://codepen.io/kontaktid/pen/RwoPYEM
https://codepen.io/kontaktid/pen/RwoPYEM