Sign in to follow this  
Mozzie

Респонсивность фона в блоке с текстом

Recommended Posts

Здравствуйте уважаемые форумчане, почти доделал проект и начал приводить его в адаптивности и понял что вёрстка блока сделана не правильно так как имеется разный текста и фиксировать высоту блока будет не правильно.

В вёрстке не эксперт и надеюсь на вашу подсказку, заранее спасибо.

 

http://jsfiddle.net/sehwhhcu/

 

Я понимаю что на class="static" можно задать высоту и тем самым продлить фон, но я бы хотел что бы фон растягивался с учетом текста и что бы я не указывал под каждое расширение экрана высоту блока. 

Share this post


Link to post
Share on other sites

 

добавьте 

.static {    overflow:hidden;}

Спасибо огромное, залез в htmlbook и увидел следующее:

hidden - Отображается только область внутри элемента, остальное будет скрыто.

Очень жаль но если бы я даже наткнулся на это описание я всё равно бы не понял что его можно было бы так применить :( Еще и возник вопрос что будет скрыто?

Share this post


Link to post
Share on other sites
.static:after, .static:before{content: "";display: table;}.static:after{clear: both;}

Вот так вот будет... 

Можно сюда глянуть еще...

 

а я вот не думаю что будет лучше...

В случае если элемент уже имеет псевдоэлемент after таким clearfix'ом можно перебить стили.

 

Правильнее поступать по ситуации, а не клепать везде одно и тоже =).

Share this post


Link to post
Share on other sites
.static:after, .static:before{content: "";display: table;}.static:after{clear: both;}

Вот так вот будет... 

Можно сюда глянуть еще...

 

 

Спасибо, я сколько гуглил на подобные статьи не натыкался есть соображение как мне нужно было составить поисковой запрос?

Share this post


Link to post
Share on other sites
Спасибо, я сколько гуглил на подобные статьи не натыкался есть соображение как мне нужно было составить поисковой запрос?

css+clearfix

Share this post


Link to post
Share on other sites

 

добавьте 

.static {    overflow:hidden;}

То что родитель схлопывается если дочерний блок с float я знал, а вот то что это решается добавлением overflow:hidden родителю стало для меня большим сюрпризом. В этом есть хоть какое-то подобие логики господа? Или бубен таки обязательный инструмент в арсенале верстальщика?

Share this post


Link to post
Share on other sites

 

 

добавьте 

.static {    overflow:hidden;}

То что родитель схлопывается если дочерний блок с float я знал, а вот то что это решается добавлением overflow:hidden родителю стало для меня большим сюрпризом. В этом есть хоть какое-то подобие логики господа? Или бубен таки обязательный инструмент в арсенале верстальщика?

 

элементам с overflow не равным visible создается новый контекст для форматирования.

Share this post


Link to post
Share on other sites
элементам с overflow не равным visible создается новый контекст для форматирования

Понятно, придется видимо читать спецификацию, чтобы хоть что-то понимать о том как это вообще работает. Не получится на халяву по "гайдам" освоить верстку(

Share this post


Link to post
Share on other sites

 

.static:after, .static:before{

content: "";

display: table;

}

.static:after{

clear: both;

}

Вот так вот будет... 

Можно сюда глянуть еще...

 

а я вот не думаю что будет лучше...

В случае если элемент уже имеет псевдоэлемент after таким clearfix'ом можно перебить стили.

 

Правильнее поступать по ситуации, а не клепать везде одно и тоже =).

 

 

 

А если сделать так http://jsfiddle.net/wakera18/ добавить clear перед закрытием static? или же убрать эту лишнюю строчку и сделать так http://jsfiddle.net/56mms7wy/ (добавил класс clr к статику).

Вашим решением я полностью доволен но clear не так редко приходится использовать что лучше из этих двух вариантов я вижу вы мастер-джедай в этом деле.

Edited by Mozzie

Share this post


Link to post
Share on other sites
Вашим решением я полностью доволен но clear не так редко приходится использовать что лучше из этих двух вариантов я вижу вы мастер-джедай в этом деле.

никакой я не джедай.

 

А что лучше, я думаю лучше использовать тот способ который в конкретном случае подходит больше с вашей точки зрения. В конце концов если потом у вас возникнут проблемы вы всегда можете изменить код. Два этих способа не соперники, а скорее варианты решения одной и той же задачи.

Share this post


Link to post
Share on other sites
Понятно, придется видимо читать спецификацию, чтобы хоть что-то понимать о том как это вообще работает. Не получится на халяву по "гайдам" освоить верстку(

 

плавающие блоки находятся вне потока и родитель содержащий такие блоки не выделяет под них место. overflow:hidden же заставляет родительский блок работать по другому и выделять место под плавающих потомков.

 

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Gora
      Доброго времени суток, при написании одного из макетов встала проблема, нужно связать форму input с кнопкой, то есть задав параметр ввода через pattern="[a-z]{1,26}".
      Нужно сделать так чтобы при неправельно заполнены форме кнопка было не активной.
      <h2>Введіть Ключ</h2> <input id="key" class="form-control" pattern="[a-z]{1,26}" value="key" placeholder="Писати сюди"> <h2>Введіть слово</h2> <input id="slov" class="form-control" pattern="[a-z]{1,26}" value="hello" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Закодувати" onclick="zakoduvaty5(this);" type="submit"> <h2>Закодоване слово</h2> <input class="form-control" id="zakodslov" readonly> <h2>Введіть код</h2> <input id="zakodslovo" class="form-control" pattern="[0-9 ]{1,50}" placeholder="Писати сюди"> <input class="btn btn-block btn-success" value="Розкодувати" onclick="rozkoduvaty5(this);" type="submit"> <h2>Розкодоване слово</h2> <input class="form-control" id="rez" readonly>
      примерно так это должно выглядеть, чуть не забыл 1 и 2 форма должны быть связаны.
      Благодарю за внимание, Всего самого лучшего вам.
    • By digenis
      Проблема заключается в том что мне нужно чтобы изображение было на левом краю до конца блочного элемента, а список чтобы был справа и также до конца блочного элемента. Это все в заголовке.  https://jsfiddle.net/Lyguc520/3/

  • Member Statistics

    46,701
    Total Members
    3,128
    Most Online
    VovkaKrut
    Newest Member
    VovkaKrut
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.