растягивающийся Div @ DeForum.ru

Пожалуйста, помогите.
Как сделать чтобы div был по ширине текста и при последующем автоматическом добавлении текста он растягивался по ширине контента.
Спасибо.

.div {float: left; clear: both;}

но сдается мне, что вам нужно не совсем то, о чем вы спрашиваете…

karamba писал(а):

.div {float: left; clear: both;}

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

Shavkat, да ну?
вы попробовали то, что я написал?

karamba, Да, попробовал. Только у меня тип позиционирования absolut (забыл указать)

воооот, я так и предполагал:

Цитата:

сдается мне, что вам нужно не совсем то, о чем вы спрашиваете…

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

karamba писал(а):

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

Угу.
У меня и без clear'а ИЕ7 ФФ нормально отображают...

tentoys, «— береженого Бог бережет… — сказала монашка, надевая презерватив на морковку»
Кто знает, о чем Shavkat еще забыл сказать…

karamba,

tentoys, karamba, может я сам туплю, вот лучше сам франгмент выложу. Помогите пожалуйста, очень надо.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#vipadaet {
   position:absolute;
   left:305px;
   top:0px;
   height:25px;
   z-index:1;
   width: 200px;
}

#left {
   background: url(images/vipadaet_left.gif) no-repeat;
   height: 25px;
   width: 14px;
   float:left;
}
#center {
   background-image:url(images/vipadaet_center.gif);
   height: 25px;
   text-align: center;
}
#right {
   background-image:url(images/vipadaet_right.gif);
   height: 25px;
   width: 14px;
   float:right;
}
#center p {
   text-align: center;
   font-size: 10pt;
   margin: 0px;
   padding: 5px 0px 0px;
}
-->
</style>
</head>

<body>
<div id="vipadaet">
  
  <div id="center">
  <div id="left"></div>
  <div id="right"></div>
<p>Рады вас видеть, <a href="#">заходите</a></p></div>
</div>
</body>
</html>

Shavkat, а удалите у #выпадает, з-индекс и ширину.
Ну и #центр доавьте float / clear, как посоветовал karamba

Shavkat, честно? Я вообще не понял, что вы хотите сделать. Какой блок должен тянуться по тексту?

вот так нужно.
tentoys, если убираю ширину у #vipadaet, то он растягивается по ширине окна
karamba, нужно чтобы растягивался #центер, а #выпадает не имел жесткий размер ширины

как я и предполагал, вам нужно совсем не то, что вы спросили. Итак, нужен блок один #vipadaet, картинка-фон к нему и картинка-уголок.
Горизонтальные падинги блока равны ширине картинки-уголка, вертикальные — на ваше усмотрение.
Картинка-фон может быть какой угодно ширины и высоты, хоть 1000х1000. Главное, чтобы у нее был закруглен левый нижний угол тем же радиусом, что и у картинки-уголка.

Цитата:

если убираю ширину у #vipadaet, то он растягивается по ширине окна

вы это тоже проверили или вам так кажется? И какая у вас кстати версия оперы?

поправлено:

Код:

<html>
<style>
#vipadaet {
   position:absolute;
   padding: 5px 10px;
   background: url(ronded_left_bottom.gif) no-repeat left bottom;
   z-index: …;
}
#vipadaet img {
   display: block;
   position: absolute;
   right: 0;
   bottom: 0;
   width: 10px;
   height: 10px;
   border: 0;
   z-index: 1;
}
</style>
<body>
   <div id="vipadaet">
      Рады вас видеть, <a href="#">заходите</a>
      <img src="ronded_right_bottom.gif" alt="" />
   </div>
</body>
</html>

Чёрте что.… ничего не понимаю, какие слооооожности. Если требуется "рады вас видеть, заходите" по центру расположить, то почему не просто спаном? А закругления через nifty corners

Что ж сложного? Блок и две картинки.
Спан придется блоком объявить и получим максимальную ширину.
nifty corners не работают адекватно в ИЕ5.5 и ниже и мое решение не городит левый хтмл для закруглений. Не вижу выигрыша в куче кода и цсс-а перед двумя картинками в пару сотен байт.

karamba, че-то не получилось :frown:

tentoys писал(а):

А закругления через nifty corners

нужно чтобы вплоть до ie 5.1 отображалось

моск завис — пойду пить пиво, далее учить CSS :bye:

спасибо вам ребята

Shavkat, мой код рабочий. Дарю.
только я поздно понял, что картинку левого угла можно сделать такой же мелкой, как и правого и залить блок фоновым цветом. И в ИЕ есть однопиксельный гюк с картинкой у края блока , пришлось ее менять на еще один блок с фоном. Но код остался таким же прозрачным и неизбыточным.

karamba,

+3 спасибо

оффтопик:

вот как все просто бывает, а я ерунду придумал с центрлефтрайтами. По больше спать надо. Вот так.

собственно, ЧТД. Основные моменты сразу указали, но про float-clear для абзаца я не успел допетрить (старею?).
karamba, :beer:

DeДверь
Логин:
Пароль:
	Автологин