1 Востаннє редагувалося Kasper (29.11.2016 21:47:38)

Тема: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

Привіт всім. Така проблема...
Добавив в базу статтю, тільки текст чомусь відображається некоректно. Текст який заключений в тегу p зсовується вгору, вище свого предназначеного місця, через що тег h2 відображається в середині тегу p
Cторінка для вызуального перегляду: http://house-build.org/index.php?showInf=14
код самою статті:

  <img src="img/1/4/2332423.jpg" style="width:80%; margin: 20px 0px 20px 0px;"><p>Я думаю не нужно задавать себе вопрос с какой целью ставят забор для дома, так как ответ нам всем известен. Но  несмотря на то что он предназначен для нашей защити, а не для показа всем окружающим какой он стильный нам это не безразлично. Нам хочется что б он не только защищал нас от вором и прочего мусора, нам хочется что б он хороши выглядел. Сейчас вы узнаете какие существуют заборы, с чего они сделаны, а также тх недостатки и преимущества.</p>
<h2>Виды ограждений: </h2>
<ul>
    <li class="Point">Заборы из камня или бетона</li>
    <li class="Point">Деревянные заборы</li>
    <li class="Point">Металлические заборы</li>
    <li class="Point">Кованые заборы</li>
    <li class="Point">Кирпичные заборы</li>
    <li class="Point">а также другие...</li>
</ul>
<p>Несмотря на главное их предназначение, я думаю вы не с тех людей которые готовы поставить двометровый забор только для того что б отгородится от внешнего мира. Так как спустя некоторое время вам будет тоскливо сидеть за ним и прятаться. Вот поэтому  такой забор мы даже рассматривать не будем.</p>
<img src="img/1/4/zabor-chastnij2.jpg" style="width:30%; margin: 0px 20px 20px 0px; float: left;"><p>В последнее время набирает популярности комбинированный забор, комбинированный это тот что сделан с не только дерева, метала или с другого материала, а он включает в себя разные их виды. Для наглядности привожу пример.</p>
<h2>Каменный забор. Недостатки и преимущества.</h2>
<img src="img/1/4/thumb_585.jpg" style="width:30%; margin: 0px 20px 20px 0px; float: left;"><p>Если говорить о каменных заборах то противных никто плохого сказать не может, так как они самые лучшие по надежности. Каменный забор прослужит вам почти вечность, это долго стойкий материал для забора. И он прекрасно вписывается почти в любой дизайн. Но не каждый может себе такой позволить потому что он хочет больших вложений и рук специалистов для его постройки, это есть <b>минус каменного забора</b>.</p>
<h2>Деревянный забор, его плюсы и минусы.</h2>
<img src="img/1/4/014.jpg" style="width:30%; margin: 0px 20px 20px 0px; float: left;"><p>Плюсов данного вида забора очень много, та как главный материал дерево (штакетник, бревно, брус, плаха), то форму забора можно сделать любую, все зависит от вашей фантазии, также вы можете покрасить его в цвет который подходит к вашему интерьеру дома или участка, цена также может вас порадовать, она в несколько раз меньше чем заборы из других материалов. <b>Минус</b> только один, долговечность такого забора приблизительно 10-15 лет.</p>
<h2>Металичиские/Кованые заборы, их плюсы и минусы.</h2>
<img src="img/1/4/485-370x278.jpg" style="width:30%; margin: 0px 20px 20px 0px; float: left;"><p>Металлические заборы славятся своею надежностью и долговечностью. Цена кованых заборов немного высокая. А если вы еще хотите что б на нем были очень красивые вырезы то цена будет еще больше расти. На встречу им идут заборы из сварных блоков, они не так дороги, а надежность и долговечность сохраняется, вот только их вид немного тускнеет в сравнении с коваными.</p>
<h2>Кирпичные заборы. В чем их преимущества?</h2>
<img src="img/1/4/zabor-kirpich-gluhoy.jpg" style="width:30%; margin: 0px 20px 20px 0px; float: left;">
<p>Большинство людей предпочитаю возводить забор вокруг своего дома из кирпича или камня. Преимущество камня мы уже рассмотрели, теперь сравним с кирпичом. Кирпичные заборы почти также прочны как и каменные, а их износостойкость материала не в чем не хуже. На возведение такого забора нужно много времени и сил, а также специалиста-каменщика который сделает качественную укладку . Цена немного дешевле если сравнивать с каменными заборами, другими словами можно сказать что это бюджетный вариант.</p>

<h2> Фото и видео различных заборов для частного дома</h2>
<div id='fotoGalery'>
  <div class='elFotoGalary'><img src='img/1/4/zabor-chastnij3.jpg'></div>
  <div class='elFotoGalary'><img src='img/1/4/zabor_v_dom_012.jpg'></div>
  <div class='elFotoGalary'><img src='img/1/4/zabor_v_dom_026.jpg'></div>
  <div class='elFotoGalary'><img src='img/1/4/zabor-chastnij10.jpg'></div>
  <div class='elFotoGalary'><img src='img/1/4/zabor-chastnij14.jpg'></div>
  <div class='elFotoGalary'><img src='img/1/4/zabor-chastnij15.jpg'></div>
<div>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/UlZl1tWKcz0" frameborder="0" allowfullscreen></iframe>

хто знає, чому так відбувається?

Post's attachments

XUz7lCm2sfY.jpg 284.77 kb, 146 downloads since 2016-11-29 

Подякували: 221VOLT1

2

Re: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

треба в дів брати і все ок)

3

Re: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

додайте

clear: both;

в h2

Подякували: 221VOLT, Kasper2

4

Re: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

а.. нє, нічого не змінилося

5

Re: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

    overflow: auto; 

вирішення проблеми)

6

Re: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

Прихований текст

Металичиские  - це пять!!)))

Подякували: Kasper1

7 Востаннє редагувалося Monolith (01.12.2016 16:47:58)

Re: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

По-перше раджу виносити стилі в окремий файл. Повірте - так набагато легше буде підтримувати код.
По-друге користуєтеся "Інструментами розробника" чи як вони там називаються. Загалом натискайте F12(Chrome) у інших браузерах погугліть. І все! Наводите на проблемний елемент і вибачите його відступи, де, шо він. Загалом так знайти проблему набагато легше.
А в цій ситуації

overflow: hidden

або просто додайте після float-елементу ще один блок, якому задайте

clear: left/right/both; /* На вибір */
Подякували: 221VOLT1

8

Re: Чому текст заключений в тегу p з'їзджає і включає в себе тег h2

http://xiper.net/collect/html-and-css-t … s/clearfix

Подякували: 221VOLT1