Jump to content
  • Sign Up
  • 0

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


Mozzie
 Share

Question

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

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

 

http://jsfiddle.net/sehwhhcu/

 

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

Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

 

добавьте 

.static {    overflow:hidden;}

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

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

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

Link to comment
Share on other sites

  • 0
.static:after, .static:before{content: "";display: table;}.static:after{clear: both;}

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

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

 

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

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

 

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

Link to comment
Share on other sites

  • 0
.static:after, .static:before{content: "";display: table;}.static:after{clear: both;}

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

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

 

 

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

Link to comment
Share on other sites

  • 0

 

добавьте 

.static {    overflow:hidden;}

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

Link to comment
Share on other sites

  • 0

 

 

добавьте 

.static {    overflow:hidden;}

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

 

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

 

.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
Link to comment
Share on other sites

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

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

 

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

Link to comment
Share on other sites

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

 

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

 

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

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • andryha2008
      By andryha2008
      Доброго времени суток!
      Моё имя Андрей. Я представитель сообщества авторов (копирайтинг, рерайтинг). Я хочу обратиться к веб-разработчикам, SEO-оптимизаторам и людям других профессий, работа которых заключается в разработке, поддержке, оптимизации сайтов, онлайн проектов и пр.
       В моей команде есть как начинающие копирайтеры, так и люди с более 10-ти летним опытом. Соответственно они пишут уникальные тексты на разные тематики и по разным ценам. Также делают качественный рерайт. Владельцы сайтов, проектов постоянно нуждаются в контенте. Я могу этот контент предоставить.
      Все мои авторы пишут качественные и уникальные тексты. Здесь важно понимать, что если стоимость текста более низкая, то и качество соответственно тоже. Но каждый текст перед отправкой к заказчику дополнительно проверяется на уникальность и ошибки как орфографические, так и пунктуационные которые сразу же и исправляются. 
      У меня есть предложение. Вы как разработчики web ресурсов, проектов, оптимизаторы  проектов, работаете с заказчиками, создаёте для них проекты, которые постоянно нуждаются в контенте. А посему если вы будете рекомендовать мои услуги вашим заказчикам, и я с ними буду сотрудничать, то и вы сможете получать от меня свой процент от заказа.
      В этой несложной схеме выгода очевидна для всех:
      Заказчик получает желаемый контент не за все деньги мира Вы получаете свой процент от заказа Я распределяю заказы среди своих авторов и тоже зарабатываю Авторы работают и получают свою честно заработанную зарплату Теперь более подробно пройдёмся по пунктам:
      1.Цена для заказчика может колебаться в диапазоне 1$-3$ за 1000 знаков. Заказчику не нужно самостоятельно искать копирайтеров, рерайтеров. Ему не придётся больше долго и нудно искать необходимые ему текста на текстовых биржах и покупать кота в мешке (ведь бывают ситуации, когда приобретённый контент оказывается не такого качества, на который рассчитывал заказчик). Мои авторы пишут на разные темы, недолго и ни в коем случае не срывают сроков выполнения заказа. Ведь если у одного исполнителя «взорвётся микроволновка» или «утонет домашний питомец» то его сразу заменяет другой. И заказ будет выполнен вовремя. Более того, самостоятельный поиск, покупка контента, общение с авторами, вечный поиск нужных статьей на биржах, как правило, отнимают много времени. И так же, после того как заказчик найдет себе исполнителя, далеко не факт что техническое задание будет строго соблюдено.
       Я же предлагаю взять на себя эти все заботы. Таким образом заказчик экономит много времени, которые он будет использовать на другие, более важные дела, например, на развитие, оптимизацию, и рекламу своих проектов. Согласитесь, заказчику должно понравится это предложение.
      2.Вы, приводя мне заказчика, получаете свой процент от заказа, который может колебаться от 5% до 20% стоимости в зависимости от количества и объёмов заказов, которые требуются вашему заказчику. То есть вы просто рекомендуете меня и после того как заказчик проверит контент и произведёт оплату мне, вы просто получаете дополнительный доход, хоть и не такой большой, как от вашей основного вида деятельности. Можно сделать даже вечный процент (когда заказчик, которому вы порекомендовали меня будет делать заказы у меня без вашего ведома, свой процент вы всё равно будете получать от меня прямиком на карту). Все деньги, проценты, обороты, будут складываться в базу данных. Я работаю честно. Никого не забуду и не обижу. Это же и в моих интересах.
      3.Альтруистов в этом мире становится всё меньше и меньше. И я не альтруист. Я тоже хочу зарабатывать, выполняя роль посредника на контенте.
      4.Теперь автору не нужно самостоятельно «вылавливать» одиночные заказы на биржах, постоянно участвовать в тендерах чтобы получить долгожданный заказ, тратить много времени на поиск заказа, а после выполнения, искать следующий. Ведь половину рабочего времени копирайтер тратит именно на это, вместо того чтобы делать то, что он умеет: писать. В этом случае я обеспечиваю авторов постоянным потоком заказов, и они «с головой» погружаются в работу и работают, не переживая о поиске заказов. Многие копирайтеры предпочитают работать именно через посредников, поскольку за то время, что они потратят на поиск заказов они смогут неплохо заработать, если это же время потратить на работу.
      Если эта схема полностью белая и абсолютно всем выгодная, то почему бы вам не попробовать поработать со мной описанным выше методом?
       Связаться со мной можно по почте: [email protected]
      Спасибо за внимание и понимание. С уважением, Андрей
    • San4ous
      By San4ous
      Привет, подскажите пожалуйста, как мне сделать рамку вокруг изображения, между которыми можно вставить текст (как подпись к картинке), т.е как в Википедии. Если что, работаю в Sulime text html
    • Kristi
      By Kristi
      Подскажите можно увеличить расстояние между текстом и картинкой в маркированном списке. Конкретно для маркированного списка? 

    • gars
      By gars
      Проблема в следующем верстаю макет с PSD шаблона. Использую HTML и CSS. 
      Прописал по порядку блоки Header. nav. main. в коде html. Добавил картинку и ссылки в блок header. открыл браузер что бы отобразить результат. 
      и вижу. что блок main наехал на блок header.
      Вопрос: почему так получилось. Ведь одно из свойств блочных тегов - они начинаются с новой строки и занимают всю доступную ширину. (main. игнорирует свойство и не начинается с новой строки).  как решить и почему произошло?     Заранее благодарю всех за помощь
      Скрин прикрепляю.   
      HTML
      <body> <header> <div class="logo"> <img src="..\matereal\images\logo.png" alt="logotip" class="logo__img"> </div> <nav> <a href="" class="nav" >home</a> <a href="" class="nav" >compane</a> <a href="" class="nav" >servise</a> <a href="" class="nav" >clients</a> <a href="" class="nav" >contacts</a> </nav> </header> <main> <div> <img src="" class="slaider" alt="slaider"> <p class="slaider__text__h1">веб-разработке\практика</p> <p class="slaider__text__h2"></p> </div> </main> <footer> </footer> CSS
      body { margin: 0; } header { margin: 0; border-top: 3px solid black; } .logo { margin:60,0,60,60; float: left; width: 49%; } nav { float: right; margin: 60,60,60,0; width: 51%; }  

    • Gora
      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 форма должны быть связаны.
      Благодарю за внимание, Всего самого лучшего вам.
  • Обсуждения

    • Switch74
      .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; } Здесь и делаете стили для изменения нажатого таба если я правильно понял
    • Switch74
      все файлы должны быть в одной папке некоторые ссылки ссылаются на локальный компьютер - этого не должно быть некоторые маленькие картинки грузят очень большие файлы перепутанные ссылки - это скорее всего ваша ошибка
    • Иван Евгеньевич
      Здравствуйте! Уважаемые форумчане! Я начинающий начинать) прошу помощи,  есть макет сайта , хочу чтоб на главной странице были вкладки которые бы переключались по нажатию кнопки. но основной вопрос в том как сделать их разными. пример приведу в фото. Хочу как на фото сделать но незнаю как( а так же код выглядит таким образом      <div class="tabs">              <input type="radio" name="tab-btn" id="tab-btn-1" value="">              <label for="tab-btn-1">Свадьба</label>              <input type="radio" name="tab-btn" id="tab-btn-2" value="">              <label for="tab-btn-2">Мужу</label>              <input type="radio" name="tab-btn" id="tab-btn-3" value="">              <label for="tab-btn-3">Жене</label>              <input type="radio" name="tab-btn" id="tab-btn-4" value="">              <label for="tab-btn-4">Партнеру</label>              <input type="radio" name="tab-btn" id="tab-btn-5" value="">              <label for="tab-btn-5">Коллекции</label>              <input type="radio" name="tab-btn" id="tab-btn-6" value="">              <label for="tab-btn-6">Редкость</label>                            <div id="content-1">                <img src="images/Kolca1.png" alt="Кольца" class="kolca">                <p class="kolca11">Кольца</p>              </div>              <div id="content-2">                Содержимое 2              </div>              <div id="content-3">                Содержимое 3              </div>              <div id="content-4">                Содержимое 4              </div>              <div id="content-5">                Содержимое 5              </div>              <div id="content-6">                Содержимое 6              </div>     </div>   CSS code .tabs {   top: 1100px;   position: absolute;   left: 600px;   font-size: 50px; } .tabs>input[type="radio"] {   display: none; }   .tabs>div {   /* скрыть контент по умолчанию */   display: none;   border: 1px solid #e0e0e0;   padding: 10px 15px;   font-size: 16px; }   /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ #tab-btn-1:checked~#content-1, #tab-btn-2:checked~#content-2, #tab-btn-3:checked~#content-3, #tab-btn-4:checked~#content-4, #tab-btn-5:checked~#content-5, #tab-btn-6:checked~#content-6{   display: block; }   .tabs>label {   display: inline-block;   text-align: center;   vertical-align: middle;   user-select: none;   background-color: #f5f5f5;   border: 1px solid #e0e0e0;   padding: 2px 8px;   font-size: 16px;   line-height: 1.5;   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;   cursor: pointer;   position: relative;   top: 1px;     font-family: 'Gilroy';   font-style: normal;   font-weight: 500;   font-size: 18px;   line-height: 21px;   text-align: center;   letter-spacing: 0.1em;   text-transform: uppercase; }   .tabs>label:not(:first-of-type) {   border-left: none; }   .tabs>input[type="radio"]:checked+label {   background-color: #fff;   border-bottom: 1px solid #fff; }  
    • Наташа
      Сегодня index.html неожиданно начал загружаться, но некорректно. Ссылки на веб-страницы не работают, но я думаю, что я сама указала неправильный путь к файлам, сегодня буду это исправлять. Ещё почему-то отображаются не все иллюстрации, а те что отображаются - все перепутаны. Пробовала открывать иллюстрации на самом сервере, но и там почему-то название картинки одно, а картинка совсем другая. Адрес сайта http://j90365fr.beget.tech/  
    • Switch74
      адрес сайта можно по какому адресу грузится css?  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy