|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
27.10.2011, 19:18 | #1 |
Пользователь
Регистрация: 27.10.2011
Сообщений: 22
|
Как выровнить 2 блока по разному в ячейки таблицы??
Подскажите начинающему верстальщику!)
Имеется таблица в каждой ячейки есть фотография и описание к ней (ФИО), надо сделать так чтобы фото отображалась по центру а описание к ней по нижнему краю ячейки через css. Добавлял к фото и тексту стиль blok потом пытался выровнять по разному но ни как нечего не получилось! может есть другой способ подскажите пож! Получается так : А надо так html код таблицы <table id="tableclub" class="tableclub"> <tr> <td> <a href="/upload/chronicle/teacher_2.gif" rel="fancygroup"> <img src="../img/teacher_2.gif" /> <a/></a> <a href="/upload/chronicle/teacher_2.gif" rel="fancygroup"></a><a href="/club/chronicle_teacher/26?teacher_id=2"><span>Ванюрихин П.Н</span></a></td> <td valign="bottom"><a href="/upload/chronicle/teacher_3.gif" rel="fancygroup"> <img src="../img/teacher_3.gif" /></a> <a href="/club/chronicle_teacher/26?teacher_id=3"><span>Челяева А.П.</span></a></td> <td> <a href="/upload/chronicle/teacher_4.gif" rel="fancygroup"> <img src="../img/teacher_4.gif" /> <a/></a> <a href="/upload/chronicle/teacher_4.gif" rel="fancygroup"></a><span><a href="/club/chronicle_teacher/26?teacher_id=4">Куклев Н.З.</a></span></td> <td> <a href="/upload/chronicle/teacher_5.gif" rel="fancygroup"> <img src="../img/teacher_5.gif" /> <a/></a><a href="/upload/chronicle/teacher_5.gif" rel="fancygroup"></a><a href="/club/chronicle_teacher/26?teacher_id=5"></a> <span><a href="/upload/chronicle/teacher_5.gif" rel="fancygroup">Голубев П.В.</a></span></td> </tr> </table> CSS код #tableclub span { display: block; text-align:center; padding-bottom: 20px; vertical-align:bottom; } #tableclub td { width:160px; min-height:30px; height:auto; vertical-align:middle; } #tableclub { border:0px; margin: 0 auto; font-family:tahoma,arial,sans-serif; table-layout: fixed; font-size:13px; color:#069; /* [disabled]max-width: 605px; */ } #tableclub img { width:150px; height:auto; margin: auto; border:0; display:block; vertical-align:middle; } #tableclub a { font-size:13px; color:#069; } |
27.10.2011, 20:38 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Сделай подписи в следующей строке.
Либо vertical-align:bottom, а картинки фоном по центру ячейки
Alar, верни репу!
|
27.10.2011, 21:06 | #3 |
Пользователь
Регистрация: 27.10.2011
Сообщений: 22
|
Подробнее можешь написать а то чет я не догнал!?)
|
27.10.2011, 21:21 | #4 |
Форумчанин
Регистрация: 08.07.2010
Сообщений: 679
|
Код:
|
28.10.2011, 11:55 | #5 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
1.
Код:
+ Поисковики словят картинку - Две отдельные ссылки. - Неудобство заполнения серверным скриптом 2. Код:
- Немасштабируемая картинка (для css2) - Чтобы "повесить ссылку на картинку" ссылку к подписи придется обрамлять свойствами display:block; плюс несколько в нагрузку в зависимости от браузеров. Либо через js-скрипт на клик по ячейке. п.с. Вариант by Cronos20 тоже интересный) однако не уверен насчет "height:100%" и между картинкой и подписью возможно придется поставить "<br>".
Alar, верни репу!
Последний раз редактировалось Naive; 28.10.2011 в 12:07. |
28.10.2011, 13:28 | #6 |
Форумчанин
Регистрация: 08.07.2010
Сообщений: 679
|
Смысл моего варианта не в height а в абсолютном позиционировании !
|
28.10.2011, 18:16 | #7 |
Пользователь
Регистрация: 27.10.2011
Сообщений: 22
|
Спасибо всем за ответ сделал через 1 вариант!
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
как выровнить div внутри другого div'a по вертикали по центру | Arassir | HTML и CSS | 4 | 12.03.2011 20:01 |
Как выровнить ширину SELECTов в HTML | Tvv7-7-7 | HTML и CSS | 4 | 09.02.2011 17:14 |
Как изменить все ячейки таблицы на 5%? | strofi | Microsoft Office Excel | 3 | 07.09.2010 13:16 |
Как прописать путь к ячейки таблицы в VBA | Pro100Andrey | Microsoft Office Access | 2 | 19.05.2010 19:59 |
Как залить часть ячейки таблицы? | Stilet | JavaScript, Ajax | 4 | 12.08.2009 14:39 |