выравнивание картинок внутри контейнера div

[DMGaster]

Здраствуйте, что то я бился бился головой об стену, но в упор не вижу какую я ошибку сделал. В общем суть в следующем. Есть макет фотоальбома, выравнивание картинок друг относительно друга сделано по тупому с помощью таблицы. Внутри каждой ячейки таблицы находятся два вложенных друг в друга div'a, в последнем из них находится картинка. В итоге результат такой: http://www.artunion.cellbiol.ru/fotoalbum/...ery/album.shtml

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

Вот код shtml:

<!--#set var="title" value="Галерея." -->
<!--#include virtual="/ssi/header.html" -->
 <td valign="top"><div class="frame_out" id="border_top">
 <div class="text_article text">А...Б...В...Г...Д...Е...?...Ж...З...И...К...Л...М...Н...О...П...Р...С...Т...У...Ф...Х...Ц...Ч...Щ...Э...Ю...Я...</div>
 </div>
 <div class="frame_out"></div>
 <table width="100%" border="0" cellspacing="1" cellpadding="4" bgcolor="#5F604B" class="foto">
 <tr> 
 <td width="33%"><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка1

 автор </div></td>
 <td width="33%"><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка1

 автор </div></td>
 <td width="33%"><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка1

 автор </div></td>
 </tr>
 <tr> 
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка2

 автор </div></td>
 <td><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка5

 автор </div></td>
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка4

 автор </div></td>
 </tr>
 <tr> 
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка3

 автор </div></td>
 <td><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка6

 автор </div></td>
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка6

 автор </div></td>
 </tr>
 <tr> 
 <td><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка2

 автор </div></td>
 <td><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка5

 автор </div></td>
 <td><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка4

 автор </div></td>
 </tr>
 <tr> 
 <td><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка3

 автор </div></td>
 <td><div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка2

 автор </div></td>
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка6

 автор </div></td>
 </tr>
 <tr> 
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка5

 автор </div></td>
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/100x150.jpg"></div>
 картинка3

 автор </div></td>
 <td> <div class="thumb text_article"> 
 <div class="thumb_img"><img src="/pic/150x100.jpg"></div>
 картинка4

 автор </div></td>
 </tr>
 </table></td>
 <!--#include virtual="/ssi/footer.html" -->

И соответственно css

div.text {
	margin: 5px 5px 5px 5px;
	border: 1px solid #5F604B;
	background: #F1F5ED;
	padding: 10px 7px 5px 10px;
}
#gray_bgcolor {
	background: #E4E8E0;
}
div.frame_out {
	margin: 5px 0px 0px 0px;
	border: 1px solid #5F604B;
	background: #D3D2C4;
	padding: 0px 0px 0px 0px;
	clear: both;
}
#border_top { margin-top: 0px;
 }
div.thumb { 
	margin: 8px 20px 8px 20px;
	padding: 5px 5px 5px 5px;
	border: 1px solid #5F604B;
	width: 160px;
	background: #C6C5B8;
	/*float: left;*/
	text-align: left;
 }
div.thumb_img{
	margin: 2px 4px 2px 4px;
	padding: 0px 0px 0px 0px;
	clear: both;
	border: 1px solid #5F604B;
	width: auto;
}

Пожалуйста объясните в ч?м причина и как с этим бороться...

[Emm]

О... друг наш, так мы всю работу за вас переделаем, так не пойдет... в некотором случае тут все рассчитывают на долю...

.text_article {

font-size : 12px;

line-height : 20px;

text-align : justify;

vertical-align : top;

text-indent : 15px;

word-spacing : 2px;

}

[yopopt]

Отступ слева образуется в связи с применению к диву класса text_article в котором установлен text-indent:15px; Его нужно обнулить.

Ещ? можно избавиться от второго дива применив класс thumb_img непосредственно к рисунку.

[musulman]

Отступ слева образуется в связи с применению к диву класса text_article в котором установлен text-indent:15px; Его нужно обнулить.

А разве text-indent : 15px; применяеться не только к тексту ? Это я так для себя .

[yopopt]

Нет, text-indent применяется к блочным элементам и устанвливает отступ первой строки блока текста. А тег является строчным элементом. Потому обрабатывается как текст. Плюс к тому оно ещ? и наследуется.

[musulman]

большое спасибо за обьяснение

[DMGaster]

Emm, ну я это... нечаяно... Эххх, все мои ошибки из-за невнимательности... Но вс? равно спасибо, с каждой такой реш?нной ошибкой, я приобретаю небольшой expirience

Ещ? у меня такой вопрос, а выровнять по центру такую картинку не удасться. Неужель прид?тся подбирать значения margin

[yopopt]

А text-align:center уже отменили?

А если вертикально, то просто добавить ячейке vertical-align:middle;.

[DMGaster]

Хе, хе только что наш?л ответ на свой вопрос - достаточно во внешнем контейнере прописать align="center" и картинка выравнивается по центру!

Есть только одна маленькая проблема, не писать же мне этот align="center" во всех контейнерах всех картинок...

В css параметра как align - вообще не существует (есть text-aling - но он применяется только к тексту, нет вру - только что проверил - вс? работает) - вс? извиняйте, вопрос отпал.

*сообщение оставляю для галочки*

2yopopt

это сообщение я начал писать до того, как вы написали - но вс? равно спасибо

А если вертикально, то просто добавить ячейке vertical-align:middle;.

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

[DMGaster]

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

Удалось мне добиться такого результата:

Вроде бы вс? нормально, да! Но вот если текста достаточно мало, то

Становится печально

код shtml

<td valign="top"><div class="frame_out" id="border_top"><div class="text_article text"><img src="/pic/face/avdeev.jpg" alt="" class="foto"><h4 align="center">Имя Фамилия Отчество</h4>
(р.), график, член Союза художников России с 2006 г.
</div></div></td>

код css

div.text {
 margin: 5px 5px 5px 5px;
 border: 1px solid #5F604B;
 background: #F1F5ED;
 padding: 10px 7px 5px 10px;
}
div.frame_out {
 margin: 5px 0px 0px 0px;
 border: 1px solid #5F604B;
 background: #D3D2C4;
 padding: 0px 0px 0px 0px;
 clear: both;
}
#border_top { margin-top: 0px;
 }
/*div img {
 margin: 0px auto 0px auto;
 padding: 0px 0px 0px 0px;
 clear: both;
 border: 1px solid black;
 }*/
 img.foto {
 margin: 4px 10px 8px 4px;
 padding: 0px 0px 0px 0px;
 border: 1px solid black;
 float: left;
 }
.text_article {
 font-size : 12px;
 line-height : 20px;
 text-align : justify;
 vertical-align : top;
 text-indent : 20px;
 word-spacing : 2px;
}

я перепробовал самые разные варианты, но вс? одно: делаю в классе .foto - float: left; - получаю картину выше; делаю clear: both (или right или left) - получаю картинку и текст в контейнере div.text - но картинка вверху, а текст внизу...

Короче, прямо не знаю что делать. Если вариантов никаких нет, то вероятно прид?тся писать большие тексты...

[rash]

Гм... Не проверял, но можно попробовать установить обтекание (с любой стороны) для того блока, в котором находится текст и картинка - тогда он должен будет расшириться, чтобы вместить все.

Для IE, вероятно, придется явно указать высоту внешнего блока вроде 1% или 1px, потому что в таком случае он тоже расширяет блок, чтобы вместить все содержание (хоть это и ошибка, но ей можно воспользоваться).

[DMGaster]

попробовал, для div.text и div.frame_out поставил float: left получается такая картина

это в Опере, в IE нижний край внешнего блока прилипает к внутреннему блоку, даже если устанавливать height: 1px; (или 1%) для div.frame_out

Получилось почти хорошо, вот только как теперь его заставить растянуться на всю страницу как раньше?

[DMGaster]

Вс? други мои *булочка и молоко сделали сво? дело *

Решение было очень простое. Необходим вручную задать ширину контейнеров и вс? будет пучком. В мо?м случае конечный файл css выглядит как

div.text {
 margin: 5px 5px 5px 5px;
 border: 1px solid #5F604B;
 background: #F1F5ED;
 padding: 10px 7px 5px 10px;
 width: 635px;
 float: left;
}
div.textgray {
 margin: 5px 5px 5px 5px;
 border: 1px solid #5F604B;
 background: #E4E8E0;
 padding: 10px 7px 5px 10px;
 width: 635px;
 float: left;
}
div.frame_out {
 margin: 5px 0px 0px 0px;
 border: 1px solid #5F604B;
 background: #D3D2C4;
 padding: 0px 0px 0px 0px;
 float: left;
 width: 665px;
 }
#border_top { margin-top: 0px;
 }
div.thumb { 
 margin: 8px 20px 8px 20px;
 padding: 5px 5px 5px 5px;
 border: 1px solid #5F604B;
 width: 160px;
 background: #C6C5B8;
 text-align: center;
 }
.content {
 clear: both;
}
div img {
 margin: 0px auto 0px auto;
 padding: 0px 0px 0px 0px;
 clear: both;
 border: 1px solid black;
 }
 img.foto {
 margin: 4px 10px 8px 4px;
 padding: 0px 0px 0px 0px;
 border: 1px solid black;
 float: left;
 }

[DMGaster]

После небольшого полуторамесячного перерыва я снова вернулся к этой работе и глюк в IE так и остался нереш?нным

в IE нижний край внешнего блока прилипает к внутреннему блоку, даже если устанавливать height: 1px; (или 1%) для div.frame_out

Можете подсказать как сие исправить?

Вроде наш?л, сделал просто отдельный файл специально для ie и прописал там padding-bottom. Другого способа пока не наш?л...