текст выходит за рамки блока в фф.

nickflip · December 2, 2008

в фф текст нагло вылезает снизу блока и ползет прям по всем элементам.. )

в ие 6 все норм.

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

хочется, чтобы было как в ие 6, добавляешь текст, и блок автоматически расширяется, сдвигая футер ниже и текст не вылезает.

kalyaka-malyaka · December 2, 2008

дайте ссылку на страницу или код

nickflip · December 2, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> greenzona </title>

<style>

html{

height: 100%;

}

body{

margin: 0px;

padding: 0px;

border: 0px;

background: rgb(231,231,231);

height:auto !important;

height:100%;

min-height:100%;

}

#content{

width: 1004px;

height: 65%;

border: 3px solid red;

background: url('foncont.png') no-repeat;

}

#leftcontent{

float: left;

display: inline;

width: 245px;

height: auto;

border: 0px solid blue;

}

#centercontent{

float: left;

display: inline;

width: 510px;

height: auto;

border: 0px solid blue;

}

#rightcontent{

float: left;

display: inline;

width: 240px;

height: auto;

border: 0px solid blue;

}

#bottomcont{

width: 1004px;

height: 260px;

border: 2px solid blue;

background: url('nizfon.png') no-repeat;

}

#conttext{

text-align: left;

font-family: "Tahoma", arial, sana-serif;

font-color: rgb(255,255,255);

font-size: 11px;

padding-left: 20px;

margin-top: 0px;

padding-right: 60px;

line-height: 17px;

}

#news{

float: left;

border: 2px solid black;

width: 755px;

height: auto;

margin-top: -80px;

}

#freshnews{

font-family: "Tahoma", arial, sana-serif;

font-size: 18px;

border: 0px;

margin: 0px;

padding: 0px;

margin-top: 43px;

margin-left: 95px;

}

#newstext{

float: right;

font-family: "Tahoma", arial, sana-serif;

font-size: 11px;

text-align: left;

line-height: 17px;

margin-left: 260px;

}

#freshnewsbg{

float: left;

display: inline;

border: 0px solid black;

width: 240px;

height: 79px;

background: url('listiknews.png') no-repeat;

margin-left: 155px;

}

#des{

float: left;

display: inline;

font-family: "Tahoma", arial, sana-serif;

font-size: 11px;

text-align: left;

margin-left: 60px;

margin-top: 20px;

}

</style>

</head>

<body>

<br />

<p class="svyaz"><b>Клиентская служба:</b><br />

Тел.:(495)544-55-66<br />

Факс:(495)514-09-57<br />

E-Mail: <a href=# class="green">hosting@hc.ru</a>

</div>

<p id="conttext"><font id="oktext">О компании</font><br /><br />

Двенадцатый год для компании ознаменован рядом серьезных перемен, направленных на принципиальн новый уровень предоставления услуг. Оптимизированые в бизнесе и не имеющие аналогов на рынке сервисы. Для оказания услуг физического хостинга реалиизован инновационный проект Telehouse Caravan, высокотехнологичная площадка для размещения ИТ-инфраструктуры заказчика.

</p>

<button id="gorazdel1"><p id="but1text">Перейти в раздел</p></button>

</div>

</div>

<div id="freshnewsbg"><p id="freshnews">Свежие новости</p></div><br />

текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст

<button id="gorazdel2"><p id="but2text">Перейти в раздел</p></button>

</div>

<a href=# class="topnavig">О компании</a> <a href=# class="topnavig">Хостинг</a> <a href=# class="topnavig">Серверы</a> <a href=# class="topnavig">Домены</a> <a href=# class="topnavig">Новости</a> <a href=# class="topnavig">Документация</a> <a href=# class="topnavig">FAQ</a> <a href=# class="topnavig">Заказ</a> <a href=# class="topnavig">Контакты</a>

<input id="inpniz" /> <span style="margin-left: 15px;" /> <a href=# class="green">Найти</a>

</div>

</div>

</center>

</body>

</html>

урезал как мог, боялся суть потерять..

вот для наглядности..

http://img.sknt.ru/2501/ab1d84567b.png

Edited December 2, 2008 by nickflip

s0rr0w · December 3, 2008

Копать в сторону float.

Контейнер <div id="content"> пуст, хотя в коде и находятся какие-то теги.

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

Срочно читать, на что влияет overflow, а особенно как он влияет на float элементы внутри данного контейнера.

Searcher · December 3, 2008

Изучайте свойства и их отображение в разных броузерах.

Если вы отсюда уберете height

#freshnewsbg{
float: left;
display: inline;
border: 0px solid black;
width: 240px;
height: 79px;
background: url('listiknews.png') no-repeat;
margin-left: 155px;
}

то блок автоматом будет растягиваться по содержимому

s0rr0w · December 3, 2008

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

Изучайте внимательнее код. То, что вы написали - затычка а не решение.

nickflip · December 3, 2008

Searcher : "Изучайте свойства и их отображение в разных броузерах."

спасибо, надо будет как-нибудь попробовать )

Searcher : "Если вы отсюда уберете height то блок автоматом будет растягиваться по содержимому"

по содержимому, но не по background же.

s0rr0w: "Копать в сторону float. Контейнер <div id="content"> пуст, хотя в коде и находятся какие-то теги."

хм, про флоат покапаю.. я когда рамку делал вокруг <div id="content">, тоже заметил, что в фф рамка пуста, пока ей не задать конкретное значение height.

Edited December 3, 2008 by nickflip

kalyaka-malyaka · December 3, 2008

у вас ошибки есть.

</script /> - это неправильно. правильно </script>

два открывающих <body> подряд

что касается текста и блока. если я правильно поняла, что вам нужно (не уверена, честно говоря):

1. между <div id="rightcontent"></div> и <div id="news"></div> добавьте <div class="clear"></div>. и в таблицу стилей:

.clear {
clear:both;
height:1px;
font-size:1px;
}

2. из #content уберите height: 65%;. если вам нужно прибить футер к низу, то это надо делать по-человечески. погуглите, в инете множество советов.

3. из #news уберите margin-top: -80px;

4. в #bottomcont добавьте clear:both;

nickflip · December 3, 2008

каляка-маляка :

сделал все, как вы написали..

http://img.sknt.ru/2501/2bbee3bc15.jpg

s0rr0w · December 3, 2008

хм, про флоат покапаю.. я когда рамку делал вокруг <div id="content">, тоже заметил, что в фф рамка пуста, пока ей не задать конкретное значение height.

А вы не подумали о том, что неспроста рамка пуста? Напрягите извилины, поищите в гугле информацию про float-элементы (уверен, что ее больше чем "масса"), и решите "проблему". Если за вас это сделает народ, то в вашей голове ничего не останется из полезного.

kalyaka-malyaka · December 3, 2008

каляка-маляка :
сделал все, как вы написали..
http://img.sknt.ru/2501/2bbee3bc15.jpg

и в чем проблема?

хотела ссылку на страницу попросить. увидела вашу адресную строку, и больше вопросов нет. но первый вопрос остается.

nickflip · December 3, 2008

s0rr0w:

как раз таки об этом то я и подумал. и долго думал, почему рамка пустая, но к результату так и не пришел (

каляка-маляка :

ну как бы вам сказать в чем проблема )

так, как на этой картинке НЕ должно быть. это неправильно и это есть проблема )

http://img.sknt.ru/2501/53be097416.jpg

s0rr0w · December 3, 2008

s0rr0w:
как раз таки об этом то я и подумал. и долго думал, почему рамка пустая, но к результату так и не пришел (

Намного легче думается и куда быстрее можно придти к решению, если почитать спецификацию.

kalyaka-malyaka · December 3, 2008

каляка-маляка :
ну как бы вам сказать в чем проблема )
так, как на этой картинке НЕ должно быть. это неправильно и это есть проблема )
http://img.sknt.ru/2501/53be097416.jpg

тяжело в деревне без нагана...

выложите куда-нибудь ВСЮ СТРАНИЦУ. с картинками, css и html. не код сюда скопируйте с приложенной картинкой, а дайте на страницу ссылку. я не знаю почему у вас не получается.

я скопировала ваш код и внесла в него изменения, которые дала вам. все отлично.

http://floomby.ru/content/fTby9Za90y/

что вы делаете, я не знаю, а вы только картинки показываете. мы ж тут не телепаты.

nickflip · December 3, 2008

буду вам очень признателен, если поможете разобраться..

http://www.sharemania.ru/0197185

kalyaka-malyaka · December 3, 2008

ха!

в коде, который вы выкладывали тут:

#news{

float: left;

border: 2px solid black;

width: 755px;

height: auto;

margin-top: -80px;

}

у вас на странице:

#news{

float: left;

border: 2px solid black;

width: 755px;

height: 500px;

}

а я бы еще долго-долго теоретизировала, почему же у меня нормально, а у вас не получается.

верните auto, и будет этой страничке счастье.

nickflip · December 3, 2008

О, женщина, проси чего хочешь )

благодарю за помощь в решении проблемы.

если не сложно, то объясни что ты сделала ? свойства цсс я видел. понятнее будет, если ты напишешь словами.

дядька s0rr0w:

ваша рекомендация, чтобы я ртфм, не пройдет мимо )

можно было бы и оставить решение моей проблемы на этом, но я же хочу понять, почему контейнер <div id="content"></div> до того, как каляка-маляка добавила некоторый код, не растягивался под содержимое. теперь некоторая часть все таки "залезла" в <div id="content">, но не вся. вот для наглядности. код 100% такой, как предложила каляка-маляка. только часть которая выше "Свежие новости" входит в <div id="content"> полноценно, а то, что ниже "Свежих новостей", нет.

#content{

width: 1004px;

background: url('foncont.png') no-repeat;

border: 10px solid red;

}

http://img.sknt.ru/2501/004681bc74.jpg

s0rr0w · December 4, 2008

ваша рекомендация, чтобы я ртфм, не пройдет мимо )

Она уже прошла мимо. Если бы вы не надеялись на чужую голову, то сделали бы решение в три щелчка.

overflow: hidden решает!

s0rr0w · December 4, 2008

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

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

nickflip · December 4, 2008

не понял.. и где мне надо было применить этот хидден ? в id="content" ?

Edited December 4, 2008 by nickflip

s0rr0w · December 4, 2008

не понял.. и где мне надо было применить этот хидден ? в id="content" ?

Подумайте, поэкспериментируйте... Ответ у вас под самым носом.

kalyaka-malyaka · December 4, 2008

хорошо, я объясню. хотя "все уже украдено до нас", разжевано, и не на одном сайте.

1. свойство clear:both в диве, стоящем после флоатов, как бы отчеркивет эти флоаты. говорит, что уже никто никуда не плывет. отменяет обтекание. это не дает нижестоящему блоку налезать на строку с флоатами. если надо просто "отчеркнуть" ряд флоатов, а следом пойдет еще ряд флоатов, я использую тот класс, что вам дала - с высотой 1px. если после ряда флоатов пойдет простой блок без флоата (как у вас - bottomcont), то clear:both надо сказать прямо ему.

2. нормальные браузеры на жестко заданную высоту реагируют так, как написано - эту высоту блюдут. а вот содержимое может вылезать за пределы блока. только ie тянет блок вниз, если содержимое превышает заданную высоту. поэтому высоту в вашем случае указывать не надо было вообще.

если нужно, чтобы у дива была минимальная высота, но при этом он и вниз тянулся, если что, используйте min-height. но! ie min-height не понимает. поэтому класс должен выглядеть так:

.classname {min-height: 100px; height: auto;}
* html .classname {height:100px;}

min-height: 100px - минимальная высота элемента

height: auto; - высота зависит от размеров содержимого элемента

* html - хак для ie6. другие браузеры то, что написано в свойствах этого класса, не заметят. т. е. только ie6 увидит, что высота элемента задана жестко. но он растянет высоту, если содержимое превысит 100px.

Searcher · December 4, 2008

Я же сразу и сказал, что надо убрать height. Это тоже самое что и height:auto.

А заметив: "Изучайте свойства и их отображение в разных броузерах" и имел ввиду разное понимание IE и других броузеров свойства высоты блока.

kalyaka-malyaka · December 4, 2008

Я же сразу и сказал...

nickflip · December 4, 2008

s0rr0w :

без кода каляки-маляки overflow: hidden; в id="content" ничего не менял.

дак я так и не понял, каким образом свойство "overflow: hidden;" блока id="content" сделало так, что теперь в этот блок влезает все и полноценно.

ведь даже если просто перевести это свойство на русский язык, то "при переполнении блока то, что вышло за его пределы - скрыть".

Scrum · December 4, 2008

а есть psd ? для интереса (своего) хочу заверстать.

Sign In

текст выходит за рамки блока в фф.

Question

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information