rustamXx
-
Posts
8 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by rustamXx
-
-
5 часов назад, Igor Schnaider сказал:
Если высота
.tob-bar
фиксированная, то можете просто использоватьcalc
, например:.banner { height: calc(100% - 75px); }
Если плавающая, то тут куча разных способов. Посмотрите holy grail layout.
Большое спасибо помогло
-
Возникала такая проблема блок banner выходит за пределы родителя header(он должен занимать весь экран) Подскажите как сделать так чтобы картинка в блоке banner занимала оставшуюся часть экрана и не вылазила за пределы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="asecs/css/style.css">
<title>Five Stars Room</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<header>
<div class="container">
<div class="top-bar">
<h1>Logo</h1>
</div>
</div>
<div class="banner">
</div>
</header></body>
</html>body{
margin: 0;
font-family: Pt Sans;font-size: 15px;
line-height: 1.6;
color: #333;
}html{
box-sizing: border-box;
}
*,
*:before,
*:after{
box-sizing: inherit;
}h1, h2, h3, h4, h5 ,h6{
margin: 0;
}/* header */
header{
height: 100vh;
}
.container{
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.top-bar{
height: 75px;
background-color: #2c3e50;
}.banner{
width: 100%;
height: 100%;
background: url(../imgs/1.jpg) top no-repeat;
-webkid-background-size: cover;
background-size: cover;
} -
-
-
Как вставить картинку ? должно получиться как на нижней картинке
вот мой код
<!DOCTYPE html>
<html>
<head>
<title>Испытание 2: слайдер</title>
<meta charset="utf-8">
</head>
<body>
<div class="conteiner">
<div class="content">
<h1>Долго, дорого, скрупулезно</h1>
<p>Математически выверенный дизайн для вашего сайта или мобильного приложения.</p>
</div>
<div class="knopka">
Узнать больше
</div>
</div>
<div class="img"></div>
</body>
</html>CSS
html,body{
margin:0;
padding:0;
}
body{
width:500px;
height:300px;
font-size:16px;
font-family:"Tahoma", sans-serif;
line-height:20px;
color:black;
background:#eeeeee;
}
.content{
margin-left: 20px;
margin-top: 50px;
width: 220px;
}
h1{
font-size: 25px;
}.knopka{
border: 1px solid #fb565a;
width: 200px;
height: 40px;
border-radius: 4px;
line-height: 40px;
margin: 20px;
text-align: center;
color: white;
background-color: #fb565a;
text-transform: uppercase;
}
.img{
background-image: url(/assets/ifmo/slide-bg.png);
}и как можно сделать нижней слайдер ?
-
9 часов назад, AlexZaw сказал:
Уберите или уменьшите line-height у li и уменьшите высоту у ссылок.
делал так, к сожалению не помогает
-
Подскажите как мне сделать подменю как на нижнем скрине( мой вариант верхний) там расстояния между строками меньше чем на моём
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Испытание: многоуровневое меню</title>
</head>
<body>
<ul class="main-menu">
<li class="active">
<a href="/courses">Курсы</a>
<ul>
<li><a href="/courses/4">Знакомство</a></li>
<li><a href="/courses/42">Селекторы</a></li>
<li><a href="/courses/45">Позиционирование</a></li>
</ul>
</li>
<li><a href="/demos">Демонстрации</a></li>
<li><a href="/public_profiles">Участники</a></li>
<li><a href="/achievments">Достижения</a></li>
</ul>
</body>
</html>html, body {
margin: 0;
padding: 0;
}body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}
ul{
margin: 0;
padding: 0;
}
.active > a{
background-color: #1ABC9C;
text-decoration: none;
padding-left: 15px;
line-height: 40px;
color: #FFFFFF;
border-bottom: 2px solid #2C3E50;
}
.main-menu li li {
padding-left: 15px;
line-height: 40px;
background-color: #FFFFFF;
width: 190px;
}
.main-menu > li {
background-color: #2980B9;
width: 200px;
line-height: 40px;
border-bottom: 2px solid #2C3E50;
}
.main-menu > li > a{
color: #FFFFFF;
padding-left: 15px
}
.main-menu li li a{
color: #2980B9
}
.main-menu a{
display: block;
height: 40px;
width: 190px;
}.main-menu > li > a{
text-decoration: none;
}
Как правильно выставить отступы (Вопрос от новичка)
in HTML Coding
Posted
подскажите что не так? отступы ставлю как на макете, а текст прижимается к картинке
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="asecs/css/style.css">
<title>Five Stars Room</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
<header>
<div class="container">
<div class="top-bar">
<div class="header-inner">
<div class="top-logo" >Logo</div>
<nav class="nav">
<a class="link-nav" href="#">Home</a>
<a class="link-nav" href="#">About</a>
<a class="link-nav" href="#">Team</a>
<a class="link-nav" href="#">Portfollo</a>
<a class="link-nav" href="#">Contact</a>
</nav>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<h1 class="intro-title">We Build Awesome Wireframe</h1>
<h2 class="top-title">A Template by Your Company</h2>
</div>
</div>
</header>
body{
margin: 0;
font-family: Pt Sans;
font-size: 15px;
line-height: 1.6;
color: #333;
}
html{
box-sizing: border-box;
}
*,
*:before,
*:after{
box-sizing: inherit;
}
h1, h2, h3, h4, h5 ,h6{
margin: 0;
}
/* header */
header{
height: 100vh;
}
.container{
width: 100%;
max-width: 1600px;
margin: 0 auto;
}
.top-bar{
height: 75px;
background-color: #2c3e50;
}
.banner{
width: 100%;
height: calc(100% - 75px);
background: url(../imgs/1.jpg) top no-repeat;
-webkid-background-size: cover;
background-size: cover;
}
/* header-inner */
.header-inner{
width: 100%;
max-width: 1170px;
margin: 0 auto;
height: 75px;
display: flex;
justify-content: space-between;
align-items: center;
}
.top-logo{
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
}
.nav{
font-size: 15px;
}
.link-nav{
display: inline-block;
vertical-align: top;
margin: 0 10px;
text-decoration: none;
color: #7e95ae;
transition: 0.2s color;
}
.link-nav:hover{
color: #fff;
}
/* title */
.intro-title{
font-size: 45px;
font-weight: 100;
color: #fff;
text-align: center;
padding-top: 57px;
}
.top-title{
font-size: 25px;
color: #fff;
text-align: center;
padding-top: 37px;
}
/* banner */