Search the Community
Showing results for tags 'width'.
Found 12 results
-
Размещение фоновой картинки, заключенной в div, на всю ширину вьюпорта
Алеся posted a question in HTML Coding
Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в 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; } -
Доброго времени суток. Столкнулся с такой проблемой! https://jsfiddle.net/ysrg47Lh/, когда я делаю ширину левого и правого сайдбара в процентах то у меня все получается и блоки плавают как нужно, но стоит мне задать минимальную ширину левого и правого блока как правый блок смещается в низ под контент. В итоге я не могу сделать так что бы левый и правый сайдбар был фиксированной ширины а контент принимал размер в зависимости от экрана и при этом не скидывал правый сайдбар под себя.
-
Коллеги, может это я слишком часто натыкаюсь на такое, но почему-то все дизайнеры, поголовно, делают psd темплейт для мобильной версии сайта шириной в 900px, или 700 или 800. Почемууу? Ширина айфона 320, андроида 360, я обычно на такие цифры равняюсь. Ну ладно, можно допустить, что есть более широкие мобильные разрешения, но не делать же темплейт мобильной версии шириной в 900px!!!??? Почему они так поступают и что с этим делать? Спасибо
-
Не могу решить одну проблему. Как сделать когда браузер увеличивается или уменьшается размер(ширина и высота) изображения не менялся. Как бы он фиксированный. Пример http://mahno.com.ua/en/ (первый блок). У меня с шириной всё нормально, проблема с высотой. Мой пример с проблемой http://davronv4.businesscatalyst.com
-
Здравствуйте. Не совсем понимаю, как работает min-width. 1) http://jsfiddle.net/vso3L62k/16/в этом примере width=50%, min-width= 400px. Мы наблюдаем, что при уменьшении окна ширина блока уменьшается, до тех пор пока не станет 400px. 2) Если мы ставим width diva не 50%, а 1000px. min-width делаем 200px. То почему при уменьшении окна браузера размер блока не изменяется, а появляется ползунок?
-
Где не спроси, везде на вопрос "почему нельзя использовать табличную верстку" ответят, мол с блоками html чище, да и вообще, что нельзя сделать используя блоки? Вопрос, есть к примеру вот такой код: div { width: 600px }span, input { display: inline-block }<div> <span class="lable">Имя</span> <input type="text" value=""> <br /> <span class="lable">Фамилия</span> <input type="text" value=""></div>Элемент span может менять свое содержимое, соответственно и собственную ширину, следовательно, что бы две строки с элементами span и input имели одинаковую ширину необходимо задать поведение для input. С одной стороны, если мы зададим для input display: block, он замечательно занимает свободное пространство, но так как блочный элемент не может быть на одной строке с другими, он соскакивает. А если мы используем display: inline-block, он отлично сидит как строчный, но уже не заполняет свободное место. Как быть? http://jsfiddle.net/okn0w4hp/
-
В шапке у меня прописан вьюпорт <meta name="viewport" content="width=device-width, initial-scale=1">в css у меня прописано свойство body{ background: coral;}@media screen and (min-width: 480px){ body{ background: green; }}Но, смена фона происходит не на 480 пикселе, а на 463px. В хроме все в порядке. Может кто сталкивался, подскажите в чем причина? я хочу, чтобы изменения происходили четко после 480px
-
Не могу найти причину, почему #r_side исчез, а #content вылез на всю страницу. jb-style.com.Но это произошло после добавления таблицы внизу
-
У меня есть один блок, во всех браузерах он отображается нормально, но в Mozilla нет. Проблема оказалась в box-sizing. Прочитав на этом сайте об этом тебе я обнаружил что начиная с Mozilla 1.0+ этот тег не воспринимается. Но что мне тогда делать? Ведь блок вылазит за свои рамки! Я пробовал -moz-box-sizing: border-box; он начинает видеть этот тег но вообще никак не реагирует на него. Как быть?
-
<div style="width: 300px; margin: 0; padding: 0; background: #00f5aa;"> <div style="padding: 0px 10px 0px 10px; margin: 0px 0px 0px 0px;"> <input name="tb_password" type="password" id="Password1" style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"> </div></div>Почему ширина поля ввода получается больше 280? <div style="width: 300px; margin: 0; padding: 0; background: #b6ff00;"> <div style="padding: 0px 10px 0px 10px; margin: 0px 0px 0px 0px;"> <p style="width: 100%; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;border:4px solid black;">text text text text text text text text text text text text text text text text text text</p> </div></div>Так тоже больше. если border задать 0px, то ширина получатеся ожидаемая - 280px Как задать отступы\ширину, чтобы внутренние элементы полностью помещались внутри вместе с рамкой?
-
много гуглил но так и не нашел годного ответа на свой вопрос подскажите пожалуйста. есть шапка <header> <a></a> <div></div> <nav></nav> </header> и css header { height:300px; } Нужно что бы шапка растягивалась по всей ширине, но контент в ней(a, div, nav) выравнивался по горизонтали по центру. Стандартный: margin: 0 auto; не действует, если не задано width. Как выровнять весь контент шапки по центру?
-
Привет всем, уже месяца 2 я занимаюсь версткой и постоянно сталкиваюсь с одной интересной проблемой. Связана она с размещением заднего фон на весь экран. Допустим, имеется блок header, у которого есть задний фон, который должен размещаться на всей ширине экрана пользователя. Но при увеличении масштаба, если прокрутить горизонтальную полосу прокрутки правее, то заднего фона там нет. Вот код http://jsfiddle.net/JscDz/1/ Вот скриншот при масштабе 200% http://s1.ipicture.r...21/og4B1GTR.png Данные способы не работают: 1. left: 0 и right: 0 для блока header 2. width: 100% для блока header Ошибка сохраняется если прописать к заднему фону цвет или же картинку, которой затем поставить repeat-y Помогите исправить это
