Jump to content
  • 0

Горизонтальная\вертикальная прокрутка изображений


sol
 Share

Question

Друзья помогите пожалуйста, искал в сети решение - внятно ответа не нашел

Ситуация:

есть горизонтальный список изображений с прокруткой + центральное увеличенное изображение, как править код что бы горизонтальный список стал вертикальным

Бьюсь над этой проблемой не первую неделю, если кто знает подскажите пожалуйста

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
Друзья помогите пожалуйста, искал в сети решение - внятно ответа не нашел

Ситуация:

есть горизонтальный список изображений с прокруткой + центральное увеличенное изображение, как править код что бы горизонтальный список стал вертикальным

Бьюсь над этой проблемой не первую неделю, если кто знает подскажите пожалуйста

И будешь биться до конца своей жизни, пока не выложишь код.

Link to comment
Share on other sites

  • 0
И будешь биться до конца своей жизни, пока не выложишь код.

:rolleyes: забыл......

Вот оригинал:

<body>

<div id="navigation">

<table>

<tr class="textnavigation">

<td class="previous"><span class="previous"><a href="photo2.html" title="Previous Photograph"><< Previous</a></span></td>

<td class="index" colspan="3"><span class="index"><a href="index.html" title="Return to Index">Index</a></span></td>

<td class="next"><span class="next"><a href="photo4.html" title="Next Photograph">Next >></a></span></td>

</tr>

<tr>

<td class="thumbcell"><a href="photo.html"><img src="photo_small.jpg" title="Модель 1" alt="photo_small.jpg" /></a></td>

<td class="thumbcell"><a href="photo2.html"><img src="photo2_small.jpg" title="Модель 2" alt="photo2_small.jpg" /></a></td>

<td class="thumbcell selected"><img src="photo3_small.jpg" title="Модель 3" alt="photo3_small.jpg" /></td>

<td class="thumbcell"><a href="photo4.html"><img src="photo4_small.jpg" title="Модель 4 " alt="photo4_small.jpg" /></a></td>

<td class="thumbcell"><a href="photo5.html"><img src="photo5_small.jpg" title="Модель 5" alt="photo5_small.jpg" /></a></td>

</tr>

</table>

</div>

<h1 class="title">Модель 3</h1>

<div id="photograph">

<img src="photo3.jpg" title="Модель 3" alt="photo3.jpg" />

</div>

<p class="caption">Полное описание модели 3</p>

</body>

Вот что получилось:

<body>

<div id="navigation">

<table>

<tr>

<td class="thumbcell"></td>

</tr>

<tr>

<td class="thumbcell"></td>

</tr>

<tr>

<td class="thumbcell selected"><img src="photo_small.jpg" title="Модель 1" alt="photo_small.jpg" /></td>

</tr>

<tr>

<td class="thumbcell"><a href="photo2.html"><img src="photo2_small.jpg" title="Модель 2" alt="photo2_small.jpg" /></a></td>

</tr>

<tr>

<td class="thumbcell"><a href="photo3.html"><img src="photo3_small.jpg" title="Модель 3" alt="photo3_small.jpg" /></a></td>

</tr>

</table>

</div>

<h1 class="title">Модель 1</h1>

<div id="photograph">

<img src="photo.jpg" title="Модель 1" alt="photo.jpg" />

</div>

<p class="caption">Полное описание модели 1</p>

<p class="footnote">Photo album created with <a href="http://www.ornj.net/">Web Album Generator</a></p>

</body>

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

Link to comment
Share on other sites

  • 0

SelenIT, спасибо что откликнулся. Интересно это как без таблицы, все при помощи CSS?

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy