Search the Community

здравствуйте помогите пожалуйста нужно чтобы описание появилось справа картинки а кода добавляю float:right вот что получается ссылка на код http://codepen.io/lybrook/pen/neCkv/

здравствуйте хочу сделать так чтобы текст отображалась всегда здесь но когда увеличиваю зоом в браузере вот что получается хочу чтобы при любом расширение текст было бы там

Доброго времени суток. Есть css меню, из ряда разделов, последний - форма поиска. При маштабировании (уменьшении масштаба) блок с формой поиска уезжает. Старница с проблемой: http://www.kino.sumy.ua/ , ширина страницы 1024px. Скриншот №1, без масштабирования Скринфот №2, тоже меню при масшатабировании.

Всем привет. Ребят помогите с версткой, прилагаю образец, результат, код. Как надо - У меня получилось так - проблемы - 1) 1 и 2, 3 и 4, 5 и 6 блоки (блоки категорий) должны находится на одной высоте по отношению к друг другу 2) "подкатегории" должны прилипать друг к другу 3) лишний отступ код: <div class="category_list"> <div class="category"><div class="title">Дизайн-студия</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Айдентика:</a><span>разработка логотипов, фирменных стилей, бренд-буков</span></div></div> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Дизайн наружной рекламы:</a><span>выставочные стенды, вывески, вывески, баннеры, широкоформат, световые короба, комплексное оформление</span></div></div> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Дизайн полиграфии:</a><span>листовки, флаеры, визитки, плакаты, афиши, буклеты, каталоги</span></div></div> </div></div> <div class="category"><div class="title">Размещение рекламы</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc">Нет привязанных подкатегорий.</div></div> </div></div> <div class="category"><div class="title">Полиграфия</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc">Нет привязанных подкатегорий.</div></div> </div></div> <div class="category"><div class="title">Фото-видео</div><div class="subcategory_list"> <div class="subcategory"><div class="bullit"><img src="img/bullit.png" alt=""></div><div class="subcategory_desc"><a>Предметная фотосъемка:</a><span>художественная фотосъемка, съемка продукции для каталогов и сайтов</span></div></div> </div></div> </div>

Делаю верстку с резиновыми колонками и фиксированными отступами между ними. .col {margin-left: 10px;margin-right: 10px;}Через float колонки находятся в одном ряду. Если задать margin, при ресайзе окна колонки не обтекаются и переносятся. Подумал для этого использовать бордеры, вот так: border-left: solid 10px transparent;border-right: solid 10px transparent;Можно так?

Помогите, пожалуйста, сверстать без JS следующую конструкцию: Всё, что я перепробовал, давало различные проблемы: выталкивание зелёного блока за пределы таблицы, растягивание цветных блоков на всю высоту экрана или скучивание в центре ячейки в одном из браузеров. UPD. Вот пример, как всё должно быть (двигаем границу окошка и смотрим на растягивание красного блока) В примере использован JavaScript, а я ищу возможность обойтись без него.

Здравствуйте. Вот уже несколько лет верстаю разной степени сложности страницы и изучаю различные приемы и методы. Но до сих пор не нашел для себя действительно удобного, идеального метода выравнивания блочных элементов по горизонтали. О чем, собственно, речь. Есть какой-то макет с кучей элементов. И некоторые элементы надо расположить на одной линии по горизонтали, вписав в какой-нибудь фиксированный контейнер. Итак, какие есть способы сверстать такой "макет"? 1. Старые добрые таблицы. Думаю, не нужно объяснять, что "таблицы для табличных данных", и вообще, поддерживать более-менее сложный макет, сверстанный таблицами — очень муторно. 2. Способ классический. Использовать float: left/right. Код: <!doctype html> <html> <head> <title>Способ классический: float</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; float:left; text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Плюсы: кроссбраузерно. Минусы: если нужно вставить элемент ниже, то нужно применять clear:both. А когда макет действительно сложный, становится слишком много усложнений - конструкция превращается в монструозную. если высота элементов не фиксированная, то в достаточно типичных макетах случаются разные неприятности (http://habrahabr.ru/post/117109/ - 3 абзац) 3. "Все правильные ребята уже давно прочитали статью в блоге Мозиллы" (с) Сергей Чикуёнок. Речь о display: inline-block, конечно же. Способ почти идеальный. Если честно, я предпочитаю именно его, но тут есть свои заморочки. Блок, отмеченный как inline-block, ведет себя как блочный, но если ему указать ширину, то спокойно встает в одну линию с другими элементами. Перепишу стили для примера выше (разметку не трогаю): <!doctype html> <html> <head> <title>Способ правильный: inline-block</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ display:inline-block; /* Это добавили */ text-align:center; } #block-1{ margin:0 16px 0 15px; width:99px; } #block-2{ margin-right:16px; width:59px; } #block-3{ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Взгляните на скриншот, что у нас получилось: (Я использую Firebug для подсветки элементов на странице) Обратите внимание на зеленые стрелки: первая указывает на зазор в 4 пикселя между inline-block-элементами. Вторая указывает на последствие - из-за этих зазоров уменьшилось расстояние до правой границы контейнера. А если бы контейнер был более узким, то элемент "3" был бы перенесен на следующую линию, несмотря на то, что ширина элементов не менялась. Как с этим бороться: 1. Достаточно "вытянуть" в одну строку html-код элементов 1-3 (зазор пропадет) 2. Либо прописывать font-size:0 для контейнера и font-size:%ваше значение% для блоков 1-3 3. Либо использовать для блоков 1-3 margin-right: -0.3em 4. Либо еще какой-нибудь костыль (полный список в комментариях здесь: http://chikuyonok.ru...vertical-align/) 5. Либо "подгонять" margin-ы между элементами. Итак, плюсы: довольно изящное решение, все максимально понятно Минусы: без вытягивания кода или использования костылей отображается браузерами не так, как хотелось бы. 4. Абсолютное позиционирование. Вся соль в использовании position:absolute. Перепишу все тот же несчастный пример (разметку снова не трогаем, меняется только CSS): <!doctype html> <html> <head> <title>Способ pixel-perfect: position:absolute</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; padding:40px 0; position:relative; /* Добавили */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ position:absolute; /* Добавили */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ left:15px; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ left:130px; /* Добавили */ width:59px; } #block-3{ left:205px; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> На этот раз, изменений больше. Способ работает совсем идеально. С точностью до пикселя. Плюсы: получено именно то, чего хотелось, и без костылей. Минусы: без калькулятора не обойтись - на любое изменение одного блока нужно менять и все остальные. элементы страницы ведут себя так, будто абсолютно позиционированных элементов на странице нет, и это иногда не очень классно. 5. Способ прогрессивный. Верстка по настоящей сетке с использованием display:grid. Снова поменяю пример: <!doctype html> <html> <head> <title>Способ прогрессивный: display:grid</title> <meta http-equiv='content-type' content='text/html; charset=utf-8'> <style> #container{ border:1px solid #c3c3c3; display:-ms-grid; /* Добавили */ -ms-grid-columns:15px 99px 16px 59px 16px 180px; /* Добавили */ padding:40px 0; /*position:relative; Убрали */ width:400px; } .block{ background:#c3c3c3; /*float:left; Это убрали */ /*display:inline-block; Это тоже убрали */ /*position:absolute; Убрали */ text-align:center; } #block-1{ /*margin:0 16px 0 15px; Убрали */ /*left:15px; Убрали */ -ms-grid-column:2; /* Добавили */ width:99px; } #block-2{ /*margin-right:16px; Убрали */ /*left:130px; Убрали */ -ms-grid-column:4; /* Добавили */ width:59px; } #block-3{ /*left:205px; Убрали */ -ms-grid-column:6; /* Добавили */ width:180px; } </style> </head> <body> <section id='container'> <div class='block' id='block-1'>1</div> <div class='block' id='block-2'>2</div> <div class='block' id='block-3'>3</div> </section> </body> </html> Вот он, способ моей мечты. Подробно можно почитать на Хабре (http://habrahabr.ru/...ft/blog/140715/). Если вкратце: описываем контейнер как сетку. Каждому элементу назначаем место в этой сетке. И все классно. Но есть существенные минусы: в чистом виде, без префиксов, не работает вообще ни в одном браузере (это еще не стандарт, только черновик) с префиксами работает только в IE 10 и выше Пока что этот способ - в мечтах. Можно, конечно, использовать JS-библиотеки, реализующие поддержку Grid в браузерах (например, http://ecsstender.org/), но это тоже не очень классное решение. Теперь, внимание, знатоки. Что используете вы? Есть ли изящные решения без замусоривания кода? Предлагаю обсудить данный вопрос.

Ребята, помогите решить проблему. Недавно начал интересоваться версткой и вопросы возникают чуть-ли не каждый день. Столкнулся с проблемой, которую не могу решить посредством поиска в Google. Суть проблемы: 1) Создаю div без фиксированной высоты. 2) Помещаю в него другие div с некоторым содержимым и задаю им свойство float: left 3) Родительский div при этом, что логично, игнорирует свои "внутренности" из-за вышеописанного свойства и его высота становится равна 0 4) Объекты, находящиеся ниже в разметке документа при этом начинают накладываться поверх div'a из п.1,3 Вопрос: можно ли каким-либо образом заставить родительский div регулировать свою высоту по содержимому, которому приписано свойство float? Спасибо!

Здравствуйте . Подскажите пожалуйста , почему разные браузеры реагируют на свойство float по разному? Вот есть два блока <div id = 'shapka'> <div id = 'firsttable'> <table> </table> </div> </div> <div id = 'tm' > <table> ...................................................................... </table> <div> задаем такой стиль #firsttable table { margin-top: 14px; float: right; text-align: center; width: 56%; } и что мы видем в фаирфокс а в chrome т.е фаирфоксу пофиг что firstable находится в div, а значит обтекание идет вокруг таблицы .Хром получается отображает правильно. И еще такой вопрос . почему при изменении масштаба страницы в chroome содержимое дочернего блока выходит за границы, несмотря на то что у родителя стоит border?

Здравствуйте. Возникла необходимость, сделать следующее: 3 колонки растянуты по ширине экране, реализуется это таким образом .column1 { float:left; width: 33%; } .column2 { float:left; width: 33%; } .column3 { float:left; width: 33%; } <div class="column1"> <p>There is one universal truth in website making: To make a websitet...</p> </div> <div class="column2"> <p> If you're like the vast majority of people thinking ...</p> </div> <div class="column3"> <p>There is one universal truth in website...</p> </div> Пример http://www.zvirec.co...l/primer20.html А теперь необходимо сделать, так, что бы при сжатии окна браузера по ширине, происходил перенос этих блоков. Т.е. необходимо, что бы блоки не налазили друг на друга при уменьшении ширины окна браузера. Как-то вот так .box1 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box2 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } .box3 { width:200px; height:200px; border:1px solid red; background-color:orange; float:left; } Пример http://www.zvirec.co...l/primer18.html Единственное что мне не нравится в последнем коде, это фиксированная ширина. Можно ли реализовать резиновые блоки, которые будут плавать когда будет сжиматься окно браузера?

Подскажите. Вопрос новичка. Догадываюсь, что наверняка так сделать нельзя. Если у элемента (картинка) есть float: right/left. Его можно прижать к нижней границе блока-родителя? Вот таким образом - http://itmag.es/3Jzv Нужно разместить ее в нижнем правом углу контейнера.

Мда )) Уже начал сходить с ума, пытаясь понять логику, по которой float-элемент игнорирует height и min-height в процентах. Оказалось дело в Firefox. Допустим, у нас есть float-блок, который находится в родителе. И нам нужно, чтобы даже при отсутствии контента (или малом количестве) у плавающего была бы какая-то минимальная заданная высота. Как бы логично и удобно использовать min-height, который берется от родителя. Но FF все обламывает. Понятно, что такую модель можно реализовать и по-другому. Но вопрос в том, что есть ли способ, не меняя подход, научить FF видеть эту высоту? Перед нажатием на "отправить" проверил в Хроме. Та же проблема. Тогда это уже интереснее. Кто может подсказать что-то на этот счет? Код онлайн Этот же код: <!doctype html> <html> <head> <meta charset="utf-8"> <title>float height:100% error</title> <style type="text/css"> html, body{ height:100%; } body{ margin:auto; } #main{ overflow:hidden; width:50%; min-height:70%; margin:auto; background:#ccf; } #left{ float:left; width:50%; min-height:100%; background:#ffc; } </style> </head> <body> <div id="main"> <div id="left">Плавающий блок</div> </div> </body> </html> У Оперы и даже jsfiddle.net все в порядке.