Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Картинки разной высоты в ряд, Чтобы центры их были на одной линии 
V
    Опции темы
Gleb
Дата 26.2.2008, 12:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 56
Регистрация: 11.6.2005

Репутация: нет
Всего: 1



Собственно сабж. Пробовал и в DIVе и в ячейке, никак не получается. На сколько я понял, в моих попытках брался центр большей картинки и вся строка распологалась по этому значению, а меньшая картинка была выровнена по нижнему краю большей.
PM MAIL   Вверх
bars80080
Дата 26.2.2008, 12:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Код

<style>
td { background: #ff0000; width: 100px; height: 100px; text-align: center; vertical-align: middle; }
</style>
<table><tr>
<td><img src="00fon00.png" width="10" height="10" /></td>
<td><img src="00fon00.png" width="10" height="20" /></td>
</tr></table>


что-то такое...
PM MAIL WWW   Вверх
Gleb
Дата 26.2.2008, 13:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 56
Регистрация: 11.6.2005

Репутация: нет
Всего: 1



Код

<html>
<head>
    <title>Untitled</title>
    
    <style>
    td { background: #ff0000; width: 400px; height: 400px; text-align: center; vertical-align: middle; }
    </style>
</head>

<body>
<table>
<tr>
<td>
<img src="bigimg/1.jpg" alt="" align="" border="0">
<img src="smallimg/1.jpg" alt="" align="" border="0">
</td>
</tr>
</table>

</body>
</html>


Вот что получилось:
user posted image
PM MAIL   Вверх
bars80080
Дата 26.2.2008, 14:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Код

<html>
<head>
    <title>Untitled</title>
    
    <style>
    td { background: #ff0000; width: 400px; height: 400px; text-align: center; vertical-align: middle; }
    </style>
</head>

<body>
<table>
<tr><td><img src="00fon00.png" border="0"></td>
<td><img src="00fon00.png" border="0"></td></tr>
</table>

</body>
</html>

работа над ошибками:
каждая картинка в отдельной ячейке таблицы, а не в одной
PM MAIL WWW   Вверх
NDenis
Дата 26.2.2008, 14:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8



Код

img {vertical-align:middle;}

а так?
PS:
Цитата

<img src="bigimg/1.jpg" alt="" align="" border="0">

align="" - убрать, это в стилях указывается
PM MAIL   Вверх
Gleb
Дата 27.2.2008, 14:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 56
Регистрация: 11.6.2005

Репутация: нет
Всего: 1



bars80080, спасибо, с таблицами все работает.
Все это нужно для превьюшек фотоальбома: несколько уменьшенных копий в ряд, с небольшим увеличением при наведении курсора. Соответственно, чтобы все это отображалось красиво, ряд превьюшек должен быть по середине блока, тогда увеличенная фотография растолкает остальные в разные стороны.

Только вот никак у меня не получается сделать это с применением разметки DIVами без таблиц. Помогите пожалуйста.
PM MAIL   Вверх
mishaSL
Дата 27.2.2008, 15:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54



Gleb, в div-ах не работает vertical-align, придется расчитывать margin-ы и проставлять их на картинки.
Или как-нибудь вот так извращаться: http://www.jakpsatweb.cz/css/css-vertical-...r-solution.html



--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
ilyaILF
Дата 27.2.2008, 15:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6



А разве так не работает:
Код

<div style="background-color: pink;">
    <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
    <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />
    <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
    <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />    
</div>
, причем и с Доктайпом и без. IMG- строковый элемент, DIV - блочный. Надо у всех тегов <IMG /> задавать стиль vertical-align: middle;
PM MAIL   Вверх
mishaSL
Дата 27.2.2008, 15:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1046
Регистрация: 10.1.2007
Где: Санкт-Петербург

Репутация: 8
Всего: 54



ilyaILF, а если div должен быть больше по высоте, чем картинка? smile 


--------------------
Лучший способ научиться программированию - это посмотреть как это делают другие...
PM MAIL   Вверх
ilyaILF
Дата 27.2.2008, 16:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 70
Регистрация: 8.11.2006

Репутация: 6
Всего: 6



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

<div style="background-color: pink; height: 473.5px;">
    <div style="position: relative; top: 50%; left: auto; margin-top: -100px; height: 200px;">
        <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
        <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />
        <img style="vertical-align: middle;" height="50" width="50" src="small.jpg" />
        <img style="vertical-align: middle;" height="200" width="200" src="big.jpg" />    
    </div>
</div>
Высота самого старшего DIV-а в этом случае уже значения иметь не будет, поэтому я и поставил произвольную величину - 473,5px, заведомо ошибочную smile
PM MAIL   Вверх
Gleb
Дата 27.2.2008, 21:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 56
Регистрация: 11.6.2005

Репутация: нет
Всего: 1



В общем сделал по примеру ilyaILF. Правда в его примере не учитывается то, что большой превьюшка становится при наведении на нее курсора, и при этом вся центровка начинает сбиваться.
Выкрутился, вставив в блок невидимую картинку с высотой равной увеличенной превьюшке.
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0753 ]   [ Использовано запросов: 20 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.