Как исключить налезание текста или заставить слои "тянуться"?

yurigraphics · October 25, 2007

Проблема в следующем: страница сверстана на слоях (css), слои располагаются один за другим с обтеканием - примерно как на примерах верстки слоями в учебнике на этом замечательном сайте. Так вот текст в верхнем слое при большом его объеме или увеличении в браузере размера шрифта налезает на текст, находящийся в слое расположенном ниже (по вертикали). То есть текст не растягивает слой по вертикали, вернее растягивает, но не отодвигает ниже следующий слой, а просто накладывает текст поверх него. Игры с добавлением полос прокрутки категорически не канают - внешне это будет погодить на фрэймы.

Я понимаю, что мне скажут: верстай таблицу и вс? будет тянуться по содержимому без наложений, но в ч?м же тогда преимущество слоев и для чего я огород городил?

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

maddogrts · October 25, 2007

Есть ))))), в em поставь )) (ширину или высоту слоя)

например

#content {width: 10em} и будет все тянуться

yurigraphics · October 25, 2007

maddogrts said:
Есть ))))), в em поставь )) (ширину или высоту слоя)
например
#content {width: 10em} и будет все тянуться

не работает.

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

maddogrts · October 25, 2007

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

yurigraphics · October 25, 2007

height: 10em - это просто механически раздвигает слой поверх следующего слоя никак не сдвигая его, а мне нужен сдвиг слоя.

вот страничка:

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

<head>


</head>
<body>
<div id="wrapper">

 <div id="news_block_main">
 some text here some text here some text here some text here some text here some text here 
 </div>
 <div id="ad_banner_336x280"><img src="banner_336x280.jpg" width="336" height="280" border="0" /></div>
 <div id="tray">
 <div id="column_1">some text here some text here some text here some text here some text here some text here</div>
 <div id="column_2">some text here some text here some text here some text here some text here some text here</div>
 </div>
 <div id="column_3">some text here some text here some text here some text here some text here some text here</div>
</div> 
</body>
</html>

а вот стили:

body {
 width:100%; 
 height:100%;
 margin-top: 0px;
 margin-bottom: 0px;
 padding: 0px;
 margin: 0px;
 font-family: arial, helvetica, sans-serif;
 font-size: 80%;
 text-align:center;
 color: #000000;
 visibility: visible;

}

#wrapper {
 width: 980px;
 height:100%;
 background: #ffffff;
 border-right: 1px solid #5a5a52;
 border-left: 1px solid #5a5a52;
 margin-right: auto;
 margin-left: auto;
 position: relative;
}



#ad_banner_336x280 {
 width: 336px;
 background: #ffffff;
 padding: 10px;
 margin-left: 619px;
 position: relative;

}



#news_block_main {
 width: 599px;
 background: #ffffff;
 padding: 15px;
 text-align:left;
 left: 0px;
 float: left;
 position: absolute;
}


#column_1 { 
 width: 296px;
 padding: 15px;
 left: 0px;
 text-align:left;
 float: left;
 position: absolute;
}

#column_2 { 
 width: 296px;
 padding: 15px;
 text-align:left;
 position: relative;
 margin-left: 326px;
}

#column_3 {
 width: 296px;
 padding: 15px;
 text-align:left;
 position: relative;
 margin-left: 654px;
}


#tray { 
 width: 654px;
 left: 0px;
 text-align:left;
 float: left;
 position: absolute;
}

maddogrts · October 25, 2007

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

<head>
 <style type="text/css" media="screen">
 body {
 width:100%; 
 height:100%;
 padding: 0px;
 margin: 0px;
 font-family: arial, helvetica, sans-serif;
 font-size: 80%;
 text-align:center;
 color: #000000;
 background: green;
}

#wrapper {
 width: 980px;
 height:100%;
 background: blue;
 border-right: 1px solid #5a5a52;
 border-left: 1px solid #5a5a52;
 margin: auto;
 position: relative;
}

#ad_banner_336x280 {
 width: 336px;
 height: 280px;
 background: red;
 padding: 10px;
 right: 0px;
 float: right;
}

#news_block_main {
 width: 594px;
 background: yellow;
 padding: 15px;
 text-align:left;
 float: left;
}


#column_1 { 
 width: 296px;
 padding: 15px;
 left: 0px;
 text-align:left;
 float: left;
 position: absolute;
 background: white;
}

#column_2 { 
 width: 296px;
 padding: 15px;
 text-align:left;
 position: relative;
 margin-left: 326px;
 background: #999;
}

#column_3 {
 width: 296px;
 padding: 15px;
 text-align:left;
 position: relative;
 margin-left: 654px;
 background: brown;
}


#tray { 
 width: 654px;
 left: 0px;
 text-align:left;
 float: left;
 position: absolute;
 background: #f1f1f1;
}
.clear {
clear: both;
}
 </style>
</head>
<body>
<div id="wrapper">
 <div id="news_block_main">some text here some text here some te some text here some text here</div>
 <div id="ad_banner_336x280"><img src="banner_336x280.jpg" width="336" height="280" border="0" /></div>
 <br class="clear" />
 <div id="tray">
 <div id="column_1">some text here some texresome text here some text here some text here some text here some text here some text ere</div>
 <div id="column_2">some text here some text here some text here some text here some text here some text here</div>
 </div>
 <div id="column_3">some text here some text here some text here some text here some text here some text here</div>
</div> 
</body>
</html>

плюс у тебя и все остальные солумбы лезут не туда (это из за абсолютного опзиционирования) position: absolute; меняй на флоат, либо позиционируй абсолютно в относительно позиционированном элементе примом чтобы абсолютно позиционированный элемент был меньше чем относительный.

__________________________________________________

добаляй всегда полностью :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Это я для примера

yurigraphics · October 25, 2007

О! Сработало - теперь слои тянутся на размер содержимого! Большое спасибо!

Только теперь в Firefox и Safari появился глюк: пропало расположение по горизонтали слоев news_block_main и ad_banner_336x280 - они сбрыкнули и расположились один под другим по вертикали, причем news_block_main встал по центру родительского слоя, а баннер у правого края. Я думаю что это из-за замены прежнего margin-left: 619px; на float: right.

И еще одно опасение: не будет ли проблем из-за замены doctype на strict вместо transitional? На странице могут быть и куски html с прямыми вставками текста.

maddogrts · October 26, 2007

Quote
О! Сработало - теперь слои тянутся на размер содержимого! Большое спасибо!
Только теперь в Firefox и Safari появился глюк: пропало расположение по горизонтали слоев news_block_main и ad_banner_336x280 - они сбрыкнули и расположились один под другим по вертикали, причем news_block_main встал по центру родительского слоя, а баннер у правого края. Я думаю что это из-за замены прежнего margin-left: 619px; на float: right.
И еще одно опасение: не будет ли проблем из-за замены doctype на strict вместо transitional? На странице могут быть и куски html с прямыми вставками текста.

Спаботало хорошо ).

плавующие блоки во всех браузерах немного подглючиваят из за того что все они (браузеры) по разному считают ширину и высоту )) Но не надо отчаиваться. Почитай про плавующие блоки. И их реализацию. Да если ты пользуешся плавающими блоками то потребность в margin-left: 619px отпадает.

http://designformasters.info/posts/css-flo...y-and-practice/

Quote
На странице могут быть и куски html с прямыми вставками текста.

Ну от этого ничего не изменится ))))). А повесил я замечиние не для того что бы ты на стрикт переходил я для того чтобы писал что положенно а не то что ты повесил (уж не знаю был ли это просто проблный вариант

Quote
quot;-//W3C//DTD HTML 4.01 Transitional//EN">

,так не пишут даже для transitional. Не нравиться стрикт меняй на transitional.

Quote
Transitional (?переходный?) ? это особенно распространенный тип, на нем написано большинство существующих страниц и именно ему посвящена основная масса учебников и справочников по HTML;
Strict (?строгий?) отличается от переходного тем, что в нем недопустимы тэги и элементы, отвечающие за внешний вид, представление документа. Например, в строгом типе нет тэгов FONT и U, атрибутов bgcolor и alink;
Frameset (?фреймовый?), наоборот, еще либеральнее переходного, так как допускает все то же, что и переходный, а также поддерживает фреймы.

Dimitry Wolotko · October 26, 2007

Проблемы с версткой.

yurigraphics · October 27, 2007

Пробовал по всякому - нет решения! Слои растягиваются по содержимому только если нет позиционирования (position: absolute), но в этом случае их невозможно расположить в одну линию по горизонтали.

Похоже придется вернуться к старым надежным таблицам...

maddogrts · October 29, 2007

Ты не внимательный ), я же дал тебе ссылку , если бы ты ее прочитал ты бы знал как это сделать !

"но в этом случае их невозможно расположить в одну линию по горизонтали."

yurigraphics · November 3, 2007

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

yopopt · November 3, 2007

yurigraphics said:
я посмотрел эти ссылки, там было много материалов для размышлений, а не готовых рецептов за которыми все и ходят на форумы можно конечно и дальше продолжать мудохаться с этими слоями и через пару недель добиться того, что в таблицах делается за пару минут - вот я и думаю стоит ли продолжать мудохаться?

Да, точно. Займитесь чем-нибудь другим.

Dimitry Wolotko · November 3, 2007

yurigraphics, следите пожалуйста за языком. Пока что устное замечание.

Sign In

Как исключить налезание текста или заставить слои "тянуться"?

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information