Как выравнивать внутри DIV с float

[lazybird]

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

HTML код простой.

<div id='photographs_index_div'>

<table id='photographs_index'>

<tr>

<td><a href='image.php?num=B07613'>

<div class='wrap0'>

<div class='wrap1'>

<div class='wrap2'>

<div class='wrap3'>

<img src='images/index/hpano/B07613.jpg' />

</div></div></div></div></a>

</td>

</tr>

</table>

</div>

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

CSS по ссылке следующий. В комментариях всякие решения проблем разных браузеров, что попались, но они, видимо, не влияют на проблему. Я вынесу сюда, чтоб не лазить в дебрях источника.

div#photographs_index_div { /* We need this div to work around a bug in IE */

padding-top: 30px;

padding-bottom: 20px; /* padding-bottom: 10px; будет добавлен строкой в TD */

padding-left: 30px;

padding-right: 30px;

}

table#photographs_index {

width: 100%;

}

#photographs_index td {

padding-top: 0px;

padding-bottom: 10px; /* вот эти 10 на стоку */

text-align: center;

background-color: #309; /* вот выделение цветом для видимости */

}

#photographs_index img {

}

.wrap0 {

}

.wrap1 {

display: block;

background: url(images/shadow.gif) no-repeat right bottom;

float: left;

}

.wrap2 {

display: block;

background: url(images/corner_bl.gif) no-repeat left bottom;

background-position: -15px 100%;

}

.wrap3 {

display: block;

padding: 0 12px 12px 0;

background: url(images/corner_tr.gif) no-repeat right top;

background-position: 100% -15px;

}

.wrap3 img {

display: block;

vertical-align: middle; /* We need this to work around a bug in Opera -- check this again */

}

Вот синим выделено содержимое TD. Внутри него все прижато влево из-за кода для тени. А как сделать так, чтобы все внутри синего TD было выравненно по-центру? Я пробовал добавить еще один слой-DIV сверху (wrap0) -- но ичего не выходит, поэтому он пока пуст.

Ссылка без синего выделения для наглядности.

Edited August 22, 2009 by lazybird

[mishka]

Вы выравнивали картинки свойством text-align:center; это работает для инлайновых елементов. Вы запихнули в тег <a> теги <div>. Ссылка это инлайновый елемент а див это блочный элемент, так нельзя делать. Есть инлайновый елемент <span> (аналог блочному диву). В вашем случае тег <a> лучше всунуть внутрь дивов, чтобы ссылка была только на картинке, на тени чтобы ее небыло. Вы в цсс прописываете блокам (<div>) свойство display:block зачем? Это и так блочный елемент.

Долго не ковырялся в коде... так навскидку: попробуйте блоку

.wrap0{float:left; position:relative; left:50%;}
.wrap1{float:left; position:relative; left:-50%;}

[lazybird]

Спасибо, сработало, супер. Правда еще пришлось чуть подвинуть вправо, ибо центрировалось целиком с тенью, но выглядит хорошо. Порядок с элементами навел, спасибо за науку.

Есть еще вопрос, правда чуть другой, но про выравнивание. Или скорее даже идеологический.

Вот ссылка на страницу-проблему. Весь код с CSS вынесен внутрь.

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

Я перефразирую еще раз. Несколько элементов подряд, не обязательно таблица, просто в данном случае сделано таблицей. Крайние должны быть прижаты к краям (т.е. у меня есть фиксированная ширина всей конструкции) а между всеми элементами должно быть одинаковое расстояние -- чисто элементов при этом может быть разное.

Сейчас все регулируется padding: 0 7px -- что подбирается экспериментально и подходит не для всех страниц. Т.е. морда выглядит хорошо, а вот это криво -- ширина навигации меньше.

Важно чтобы между элементами было одинаковое расстояние.

[mishka]

В последнем случае может помочь table{width:100%}. Тоесть таблица принимает ширину страницы, а и ячецки в ней тоже растянутся. Это немного сгладит вид, но нерешит вопроса по поводу прижать крайние елементы к краям...

Ну и задачку вы поставили себе

Как это сделать с помощью css даже и незнаю... но стало интересно попытаюсь чтонибудь сделать (хоть и сомневаюсь что получится), и подождем, может кто подскажет

[lavr-ik]

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

Покопайтесь здесь

[mishka]

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

Покопайтесь здесь

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

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

Так что ждем гуру, который разрулит вопрос

[lazybird]

Я пока ездил придумал решение, вроде бы работает, правда кое-чего другого поправить надо. Надо между столбцами наставить еще пустых, у которых width=500px или еще какое дикое число. Тогда они все (пустые) становятся одинаковой ширины. А вот 100% не работает -- только первый становится максимально широким, так что приходится писать фигню. Но работает.

А кто знает, как заставить не переносить строку из нескольких слов? Т.е. если среди этих TD есть многословный, то оно переносится и становится высоким. ,)

[psywalker]

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

[mishka]

Да тут рисунка и ненадо, все становится понятно если перейти по ссылкам, предоставленным автором, ну и почитать то что он пишет

Edited August 24, 2009 by mishka2

[psywalker]

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

[lazybird]

Ну код не в спец-контейнере из-за дремучести моей -- просто не знал, видел где-то, но забыл. Проблему решил и примеры удалил, просто вчера вроде писал что все в порядке, но видимо пост не дошел. Всем спасибо!

Но один вопрос имеется. Код тут не нужен. ,)

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

[mishka]

td{white-spacing:nowrap}

[Searcher]

не задавайте таблице ширину