помогите разобраться с div

  • Автор темы Автор темы adaptive
  • Дата начала Дата начала
Статус
Закрыто для дальнейших ответов.
A

adaptive

Участник
Топикстартер
Сообщения
3
Реакции
0
Привет всем!
В общем такая проблемма.
есть css:
Код: 
#my_text{
color:#CC3300;
  background-color:#333300;
  height:auto;}
и некий html:
Код: 
<div id="my_text">
suitable for blogs and websites with lots of content. 
Useful 3 column design
<img src="http://www.koshki-sobaki.ru/pics/guy1.jpg" alt="котик" align="left"  />
 </div>
фото выходит из области div.кто-то это может объяснить? ,
и как с этим бороться?
 
Ответ: помогите разобраться с div

Не вижу причин, по которым картинка должна вылезать. Видимо косяк где-то в другой части стиля. Попробуй действовать методом исключения - удаляй части стиля строк по 10, так постепенно выйдешь на косяк и тогда уже будешь знать как с ним бороться.
 
Ответ: помогите разобраться с div

В том то и дело что причин нету , а она выходит.
Впишите этот код и увидите.background не покрывает картинку.
 
Ответ: помогите разобраться с div

Если центрировать, то покрывает. Что-то тут непонятное.
 
Ответ: помогите разобраться с div

В CSS больше ничего по картинкам нет?
Не может этот имидж наследовать от кого-нибудь некий параметр, приводящий к сабжу?
 
Ответ: помогите разобраться с div

Код: 
#my_text{
color:#CC3300;
background-color:#333300;
height:auto;
display:table;
}
 
Ответ: помогите разобраться с div

DCat спасибо , то что нужно.
 
Ответ: помогите разобраться с div

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

Во-вторых не очень понятно зачем использовать стили, если картинка позиционируется архаичным атрибутом align. Разумеется что этот атрибут смешивается с атрибутами стиля совершенно непредсказумым образом. Используя только стили и то легко напортачить - а если пихать атрибуты в код, то вообще никогда не поймешь в чем дело.

Поведение картинки свидетельствует о том, что она не в дивовом потоке. То есть этот алигн интерпрентируется как float или как абсолютное позиционирование (скорее всего). А position:absolute однозначно выводит элемент из потока. Поэтому ваш див автоматически настраивается только на ширину текса, а картинка оставаясь дочерним элементом не растягивает его. Зато текст тянет на все 100% по ширине.

Решение. Выкинуть алигн, сделать суб-стиль для img пустив его плавать слева, а чтобы при этом див растягивался по высоте, применить магический способ: width: 100%;

В итоге текст будет вверху, под ним будет пикча - любая и сколько угодно.

Вот код:

Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>suitable for blogs and websites</title>
<style type="text/css">
.my_text {
	color: #CC3300;
	background-color: #333300;
	width: 100%;
}
.my_text img {
	float: left;
}
</style>
</head>

<body>

<div class="my_text">
	suitable for blogs and websites with lots of content. Useful 3 column design
	<img src="http://www.koshki-sobaki.ru/pics/guy1.jpg" alt="котик"/>
</div>

</body>

</html>
 
Ответ: помогите разобраться с div

Zest... а если картинки надо выравнивать по правому краю...
по поводу IE и TABLE - совершенно верно... поэтому есть вот такое решение:
Код: 
#my_text{
	color:#CC3300;
	background-color:#333300;
	height:auto;

	display: block;
	overflow: hidden;
}
 
Ответ: помогите разобраться с div

Ну и что это даст? В смысле вы сами-то применили свой рецепт?

В этом случае сначала текст будет идти, а следом за ним в одной строке - пикча, потому что img - инлайновый элемент. Никакого overflow возникнуть не может, поскольку div'у не заданы размеры. (высота:авто - это вообще бред укуренного стрептококка. Высота всегда авто пока вы не написали что-то типа 100px.) Див, конечно, растянется на ширину этих двух элементов - текста и пикчи. А автору хочется чтобы сначала шел текст, а затем под ним картинка - без <br> - и все это охватывалось div'ом. В его оригинальном коде все работает, за исключением того, что див охватывает только текст - поскольку пикча с атрибутом алигн:лефт выводится из потока. Можно просто добавить магические 100% ширину диву и сразу все станет как нужно. Но оставлять алигн:лефт - моветон.

В данном случае див работает как контейнер группы элементов. Его ширина будет определятся тем контейнером, в который он сам будет помещен. То есть 100% ширины будут означать 100% возможной ширины родительского контейнера.

Таким образом данная группа элементов получается инкапсулирована: ее можно вставлять в любое место кода. Но атрибут оверфлоу: хидден - надо добавлять к родительскому контейнеру если вдруг пикча отпрыска начнет вылезать из своих пределов. Тут есть уловка: грузить пикчу не img, фоном в этот самый див, отключать рипит и задавать отступ сверху для текста позиционированием фона в единицах em. Тогда эта пикча никогда не переполнит родительский див.

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

Но если все-таки, то есть и другое решение той же самой задачи. Можно растянуть див на текст и пикчу, если взять и объявить ее блочным элементом. Тогда она просто автоматически перенесется на следующую строку. И станет возможным выравнивать содержание дива аргументом text-align:

Код: 
.my_text {
	color: #CC3300;
	background-color: #333300;
	text-align:right ;
}
.my_text img {
display: block ;
}
 
Ответ: помогите разобраться с div

Я только одного не могу понять: почему нельзя добавить <br> после текста, чтобы пикча оказалась под ним и без всяких извращений растянула див как следует?
 
Ответ: помогите разобраться с div

Я понял. DCat повелся на терминологию автора ничего не проверяя. Так все наоборот: это не картинка, цитирую - выходит из области div, - это div не натягивается на картинку. Хрестоматийный случай, когда вы суете в один див три других - для левой, центральной и правой колонок - с атрибутом float. И хотите чтобы их родитель растянулся на самый высокий из отпрысков, чтобы отодвинул собой див подвала. А он не хочет. Потому что флоат выводит элемент из потока. Родительский див получается пустой и поэтому не растягивается по высоте. Достаточно добавить атрибут width:100% и вуаля.

Судя по цитате в том доке - автор это и делает. Есть старый способ - добавить внутрь родительского дива после всех "колонок" еще один, маленький, невидимый с атрибутом clear:both. Но зачем добавлять думми-элементы, если есть кошерный способ заставить бровзер считать див-с-дизайном добавив к нему атрибут ширины.
 
Ответ: помогите разобраться с div

если это блок "контена", как часто бывает, кстати, то никто не будет извращаться с добавлением DIV'ов – просто текст и просто картинки с алиганами...
Кроме этого можно сделать вот так:
Код: 
<span style="display:block; clear: both;">
, если уж хочется расчистку устроить...
а еще есть br с параметром clear="all", что еще проще и короче...
 
Ответ: помогите разобраться с div

> DCat повелся на терминологию автора ничего не проверяя

Может быть... правда, не совсем понимаю, о чем речь, начиная с "терминологию"...

По-моему, автору нужно было добиться того, чтобы каждый последующий за ЭТИМ DIV не налазил на предыдущий, чего не достигается с его CSS, но достигается частично с display:table (это когда у меня из головы вылетело что IE криво с ним работает). Вот код:
Код: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>none</title>
<style>
#my_text{
	color:#CC3300; 	background-color:#333300; height:auto;

/* Открываем закомментированную часть кода и все начинает работать правильно */
/*	display: block;
	overflow: hidden;       */
}
</style>
</head>
<body>
<div id="my_text">
suitable for blogs and websites with lots of content. 
Useful 3 column design
<img src="http://www.koshki-sobaki.ru/pics/guy1.jpg" alt="котик" align="left"  />
 </div>
 <div id="my_text">
suitable for blogs and websites with lots of content. 
Useful 3 column design
<img src="http://www.koshki-sobaki.ru/pics/guy1.jpg" alt="котик" align="left"  />
 </div>
</body>
</html>
картинка с align="" просто ведет себя непорядочно, когда оказывается в блочных элементах... даже в том же P... если в P будет текста "по высоте" меньше чем картинки, если так можно сказать, то картинка, всенепременнейше залезеть в следующий P (или DIV) и сдвинет в нем текст.
 
Ответ: помогите разобраться с div

Кстати, бывает аналогичная задача по модулю, но с обратным знаком: надо заставить div плавать в строке. Устанавливаете атрибут: display: inline. Разумеется можно применять не только к дивам, но и к, например, спискам, получая инлайновое представление элемента <ul><li>
 
Ответ: помогите разобраться с div

чтобы каждый последующий за ЭТИМ DIV не налазил на предыдущий,
Нажмите, чтобы раскрыть...
Он и не будет "налазить". Див не будет налазить. Можете проверить - скопипайтить это код несколько раз и посмотреть.

картинка с align="" просто ведет себя непорядочно
Нажмите, чтобы раскрыть...
Неужели русские на самом деле документацию не читают, или верстают до сих пор в единственно-кошерном нотепаде ничего не зная о doctype?

Алигн элемента не имеет смысла. Смысл имеет только алигн контейнера. Поэтому W3C предал анафеме алигны элементов. Можно, конечно, забить и делать дизигн для квирк-моды, и это даже будет полезно для раскрутки заказчика на дополнительные деньги за кроссбровзерность сайта.

Но правильный путь - избегать кроссбровзерности придерживаясь строгого синтаксиса. То есть работать в стрикт-моде и искать баги в коде, а не в бровзере. У меня опыт веб-дизайна - ровно 1 месяц и ровно 1 сайт. Но за это время уже удалось понять что если в ишаке одно, а в опере другое - то значит где-то ошибка в коде. Я ее нахожу, исправляю и становится одинаково везде.

Что такое алигн элемента? Это рекурсия - сначала надо определить родителя, его размеры, а затем поставить себя на нужное место. То есть идет движение вспять потока. Нормальное, прямое движение потока подразумевает свойство алигн у родителя - для всех его отпрысков.

Поэтому картинка с алигном и ведет себя непорядочно - потому что она в обратном порядке идет.

Обратимся к графическим приложениям. Алигн есть у параграфа. У обычного текста алигн означает выравнивание относительно СЕБЯ. Выравниваются строки. Давайте перенесем это свойство на картинку: что выравнивать в картинке относительно ее САМОЕ?

Почему же в хтмле должно быть по-другому?
 
Ответ: помогите разобраться с div

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

Вот так правильно?:
 

Вложения

  • divwierd.gif
    divwierd.gif
    62.1 КБ · Просм.: 888
Ответ: помогите разобраться с div

Я вообще не пойму с чего вы решили что в диве возьмется переполнение? Совершенно же ясно что этот устаревший атрибут "алигн" выкидывает ее из потока. В результате картинка становится привязанной к родительскому диву, но оказывается ВНЕ его. Никакого переполнения быть не может, кроме того, пока не задан размер. Например width:40%; Height вообще можно устанавливать только в фиксированные величины - в пикселы, в емы, в пункты. Проценты не имеют смысла.

Лично у меня ощущение что вы вообще не понимаете о чем речь...

Я вам даже могу показать что нет никакого алигна в этом контексте, смотрите: я хочу добавить атрибут после атрибута alt. Вы видите в списке атрибутов align?

Так почему же все равно берете и ВПИСЫВАЕТЕ его туда?
 

Вложения

  • align.gif
    align.gif
    7.7 КБ · Просм.: 1 076
Ответ: помогите разобраться с div

Специально для нас люди накопали дайджест того, что делать нельзя:

http://www.zvon.org/xxl/xhtmlReference/Output/comparison.html

Вы там хотели бр-ом зачистить флоаты, да?

Attribute clear is forbidden on br.
Нажмите, чтобы раскрыть...

Думми-дивы с зачисткой встречаются повсеместно.

---

Тут ведь все просто. Либо мы придерживаемся рекомендаций, либо сношаеся с глюками без всякого контроля ошибок. В результате сайт будет является неким состоянием кода сложившимся более-менее удачно в данных обстоятельствах. Чуть-чуть изменяется эти обстоятельства и сайт рассыпется.
 
Ответ: помогите разобраться с div

http://www.w3.org/TR/html401/index/attributes.html

в частности по IMG:
http://www.w3.org/TR/html401/struct/objects.html#edef-IMG

align применяется для визуального позиционирования объекта...
text-align для позиционирования объектов ВНУТРИ блока...

Судя по Вашей теории, float:left|right|left, который применяется непосредственно к объекту (по сути аналог align) - ошибка, которую нужно срочно исправить, и заменить всё на text-align...
А как же быть с картинками, которые выравниваются по правому краю, в то время когда текст по левому? а... ну да! точно! DIV c float:right... подумаешь, пару строк лишнего кода... жаль только Float:right работает не так как align, поэтому отформатировать текст нормально не удастся... хотя, нафик нужны эти картинки справа?! =)

Кстати, попробуйте как-нибудь картинку без align вставить в параграф =)

P.S. Может быть после месяца опыта и одного сайта, еще неизвестно какого (сложной системы, или какого-нибудь простенького хомяка), и сохраняется вера в стандарты... после года приходит понимание того что производители, в лице их браузеров, возможно, и стремятся к соблюдению стандартов, но, ни один из них не поддерживает их так, чтобы можно было написать код по стандартам "вслепую" и не беспокоиться о том что где-то что-то поедет. Где-то придется извращаться, а где-то нет...

Это у Вас 6я версия ИЕ? (которая на стандарты какала с высокой колокольни)
вот так правильно:
 

Вложения

  • temp1.gif
    temp1.gif
    101.6 КБ · Просм.: 745
Статус
Закрыто для дальнейших ответов.
Верх Низ