Подрисуночная подпись - как сделать для нескольких картинок рядом?

Vlad97 · September 19, 2007

Прочел на это сайте статью про сабж:

Проверил все у себя на машине. Все работает классно, но...

Меня интересует одна штука: можно ли как-то сделать, чтобы картинки с подписямим располагались не только по вертикали, а и по горизонтали тоже?

Теги p и div предполагают непременный переход на новую строку, т.е в результате кода:

"Винни-Пух

Винни-Пух в гостях у Кролика

"Винни-Пух

Винни-Пух в гостях у Кролика

"Винни-Пух

Винни-Пух в гостях у Кролика

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

Можно так сделать или нет? Пока я знаю два варианта размещения картинок:

1. В таблице через тег table и прочие, тогда в каждой ячейке таблицы располагается картинка и подпись.

2. Просто перечислением тегов img один за другим:

"Винни-Пух

При этом способе при широком окне картинки стоят рядом, а при уменьшении размера окна - выстраиваются одна под другой. Но подписи к ним нельзя прикрепить, только atl-ы.

А нет ли какой-то фишки, которая позволяла бы соединить 1 и 2 - чтобы и картинки были с подписями, и происходила перестройка расположения картинок в зависимости от ширины окна?

Чтобы не было узкой таблицы в два ряда на широком окне, или широкой - в 4 ряда - на маленьком окне?

Vlad · September 19, 2007

Картинку в студию, что ты хочешь получить в итоге!

Vlad97 · September 19, 2007

вот пример:

http://may-may.narod.ru/

Как сделать, чтобы на этом сайте к каждой картинке была приклеена подпись?

Посмотрите сайт на полном экране и в маленьком окне, увидите разницу.

Fed · September 19, 2007

span можно к примеру засуньте вс? в таблицу или через margin.много варианта.киньте ваши наработки

Maslakoff · September 19, 2007

оффтоп: мама родная))) кошачий бизнес

Vlad97 · September 19, 2007

To Fed:

span не помогает

в таблицу засунуть - не решает вопрос. Вы читали то, что я спрашивал? Я сравниваю два способа - с таблицей и без. То есть таблица уже пробовалась.

А как делать через margin?

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

Vlad · September 20, 2007

Ты не понял. Не нужно приводить текущий результат, надо нарисовать, что ХОЧЕШЬ получить, а не что сейчас есть. Где должна располагаться подпись, какого размера рисунки, должна присутствовать рамка или нет? Ну почему клещами приходится вытягивать сведения, которые тебе нужны, а не мне!

Vlad97 · September 20, 2007

Должно быть ровно то же самое, что и сейчас на том сайте: http://may-may.narod.ru/

Единственная разница - под каждой картинкой должна быть подпись. Ну примерно такой вид, как в статье, но подпись не обязательно такая большая:

http://htmlbook.ru/images/0112_1.gif

Главное: при изменении размера окна подпись должна передвигаться вместе со "своей" картинкой, как приклееная к ней. Предоставить это для просмотра я не могу, я не знаю, как это сделать. Если бы знал, не просил бы совета. Рамка не нужна. Рисунки размером примерно 400х400 пикселей, хотя мне непонятно, при чем тут размер рисунка. Принцип важен, способ решения, а он, по-моему, от размера никак не зависит.

Maslakoff · September 20, 2007

Сделал специально для вас... понравиться или нет это уже ваше дело)))

<html>
<head>
 <title>Кошачий бизнес</title>

<style type="text/css">

* {
 font-family:Tahoma;
}

a.image {
 position:relative;
 display:block;
 float:left;
 padding:5px;
 margin-right:10px;
 margin-bottom:10px;
 width:200px;
 background:#CFCFCF;
 border:1px solid Silver;
 border-right:5px solid Silver;
}

a.image:hover {
 background:Silver;
}

.image img {
 display:block;
 margin-bottom:5px;
}

.image span {
 font-size:12px;
}

</style>

</head>
<body>

<a href="#" class="image"><img src="cat.gif" width="100" height="100" border="0"> <span>Котик номер один.. Какой красавчег!!!</span></a>
<a href="#" class="image"><img src="cat.gif" width="100" height="100" border="0"> <span>Котик номер один.. Какой красавчег!!!</span></a>
<a href="#" class="image"><img src="cat.gif" width="100" height="100" border="0"> <span>Котик номер один.. Какой красавчег!!!</span></a>
<a href="#" class="image"><img src="cat.gif" width="100" height="100" border="0"> <span>Котик номер один.. Какой красавчег!!!</span></a>
<a href="#" class="image"><img src="cat.gif" width="100" height="100" border="0"> <span>Котик номер один.. Какой красавчег!!!</span></a>

<div style="clear:both;"></div>

</body>
</html>

можно так же использовать просто

вместо , но и заменить a.image на просто .image

Vlad97 · September 20, 2007

Maslakoff, спасибо большое! Супер! Это именно то, о чем я спрашивал. Надписи - отпад!

Sign In

Подрисуночная подпись - как сделать для нескольких картинок рядом?

Question

Vlad97

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Vlad97

Link to comment

Share on other sites

Fed

Link to comment

Share on other sites

Maslakoff

Link to comment

Share on other sites

Vlad97

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Vlad97

Link to comment

Share on other sites

Maslakoff

Link to comment

Share on other sites

Vlad97

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information