-
Similar Content
-
By Алеся
Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
<div class="banner">
<div class="container background-image">
<div class="banner_text"></div>
</div>
</div>
CSS:
.background-image {
background-image: url('/img/new_oranges.jpg');
background-size: cover;
height: 200px;
}
-
By Masya
Здравствуйте, я новичок в сайтостроении и у меня возникла одна проблема при адаптации страницы, она состоит в том ,что в max-width ,при заданной ширине, не хочет работать изменение отступов (padding и margin), хотя flex-direction: column; работает. Жуткое ощущение глупой ошибки ,которую не могу найти. Заранее спасибо за помощь.
Ниже HTML и CSS код:
<header>
<div class="header">
<div class="wrap">
<div class="logo header_left">
<a href="#">
<img src="images/logo.png" alt="Логотип">
</a>
</div>
<div class="header_right">
<div id="topmenu">
<p>
<a href="#">About</a>
<span>/</span>
<a href="#">Blog</a>
<span>/</span>
<a href="#">Contact</a>
<span>/</span>
</p>
</div>
<div id="social">
<a class="twitter" href="#"></a>
<a class="vimeo" href="#"></a>
<a class="facebook" href="#"></a>
<a class="instagram" href="#"></a>
<a class="dribbble" href="#"></a>
<a class="reddit" href="#"></a>
</div>
</div>
</div>
</div>
</header>
——————————————————————————————————————————————————--
#container {
margin: 0 auto;
}
#container .header {
border-bottom: 1px solid #bfbfbf;
box-shadow: 0 0 3px #dbdbdb;
padding-top: 6px;
}
#container .header .wrap {
display: flex;
justify-content: space-between;
padding: 0;
}
@media (max-width: 650px) {
.header .wrap {
flex-direction: column;
padding: 0 3px;
margin-bottom: 5px;
}
.header #socials {
margin-left: 5px;
}
.header #socials a:last-child {
margin-right: 2px;;
}
}
#container .header .header_left {
align-self: center;
}
#container .header .header_right {
display: flex;
justify-content: space-between;
}
#container #topmenu {
color: #8e8e8e;
padding-top: 6px;
}
#container #topmenu a {
color: #8e8e8e;
text-decoration: none;
}
#container #topmenu a:hover {
color: #dd5555;
}
#container #social {
display: flex;
margin-left: 20px;
margin-right: 50px;
}
#social a {
margin-top: 9px;
margin: 8px 10px;
}
.twitter {
background: url("../images/twitter_un.png") no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
}
.twitter:hover {
background: url("../images/twitter.png") no-repeat;
height: 11px;
width: 13px;
}
.dribbble {
background: url("../images/dribbble_un.png") no-repeat;
height: 13px;
width: 13px;
cursor: pointer;
}
.dribbble:hover {
background: url("../images/dribbble.png") no-repeat;
height: 13px;
width: 13px;
}
.vimeo {
background: url("../images/vimeo_un.png") no-repeat;
height: 12px;
width: 13px;
cursor: pointer;
}
.vimeo:hover {
background: url("../images/vimeo.png") no-repeat;
height: 12px;
width: 13px;
}
.facebook {
background: url("../images/facebook_un.png") no-repeat;
height: 13px;
width: 7px;
cursor: pointer;
}
.facebook:hover {
background: url("../images/facebook.png") no-repeat;
height: 13px;
width: 7px;
}
.instagram {
background: url("../images/instagram_un.png") no-repeat;
height: 12px;
width: 12px;
cursor: pointer;
}
.instagram:hover {
background: url("../images/instagram.png") no-repeat;
height: 12px;
width: 12px;
}
.reddit {
background: url("../images/reddit_un.png") no-repeat;
height: 11px;
width: 13px;
cursor: pointer;
}
.reddit:hover {
background: url("../images/reddit.png") no-repeat;
height: 11px;
width: 13px;
}
-
By den_alex_96
Здравствуйте. Вопрос по следующей вёрстке:
<!DOCTYPE html>
<html lang="ru">
<head>
<style>
.left{
float:left;
background:red;
}
.no_float
{
background:green;
text-align:center;
font-size:30px;
}
</style>
<meta charset="utf-8" />
<title>Документ без названия</title>
</head>
<body>
<div class="left">
float:leftrvrcrvrvr
</div>
<div class="no_float">
hidbibd
</div>
</body>
</html>
Почему текст в блоке с классом no_float не выравнивается по центру, хотя в css это прописывается?
-
By Alarr
Коллеги, может это я слишком часто натыкаюсь на такое, но почему-то все дизайнеры, поголовно, делают psd темплейт для мобильной версии сайта шириной в 900px, или 700 или 800.
Почемууу? Ширина айфона 320, андроида 360, я обычно на такие цифры равняюсь. Ну ладно, можно допустить, что есть более широкие мобильные разрешения, но не делать же темплейт мобильной версии шириной в 900px!!!???
Почему они так поступают и что с этим делать?
Спасибо
-
By Goodman-77
Здравствуйте!
Пожалуйста, помогите решить проблему.
Никак не могу прижать (оранжевый) float элемент с классом .text, к нижней границе (желтого) родителя с классом .main
Пример: http://codepen.io/Econavi/pen/bgBXLp
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Question
S1lencer
Доброго времени суток. Столкнулся с такой проблемой! https://jsfiddle.net/ysrg47Lh/, когда я делаю ширину левого и правого сайдбара в процентах то у меня все получается и блоки плавают как нужно, но стоит мне задать минимальную ширину левого и правого блока как правый блок смещается в низ под контент.
В итоге я не могу сделать так что бы левый и правый сайдбар был фиксированной ширины а контент принимал размер в зависимости от экрана и при этом не скидывал правый сайдбар под себя.
Link to comment
Share on other sites
2 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.