Нужна помощь по верстке

vaneeeeek · 25.05.2011

Итак привет всем.Вот такой вот вопрос,только можете объяснить это ПОПОНЯТНЕЕ,или дать ССЫЛКИ.Так вот у меня есть сайт нужно в него вставить
(в любую часть)10 картинок ,которые расположены в столбик.ПО ДВЕ КАРТИНКИ В КАЖДОЙ СТРОЧКЕ.Вот так вот может нарисую.Типо того:а и ещё чтобы над каждой картинкой был заголовок

http://s009.radikal.ru/i309/1105/71/2b470aff96dc.jpg ну вот типо того

или вот это ,которое мне больше нравится.Вот ссылка http://i037.radikal.ru/1105/d1/db29f05fa3f4.jpg Помогите пожалуйста.

motek · 25.05.2011

vaneeeeek сказал(а):
Итак привет всем.Вот такой вот вопрос,только можете объяснить это ПОПОНЯТНЕЕ,или дать ССЫЛКИ.Так вот у меня есть сайт нужно в него вставить
(в любую часть)10 картинок ,которые расположены в столбик.ПО ДВЕ КАРТИНКИ В КАЖДОЙ СТРОЧКЕ.Вот так вот может нарисую.Типо того:а и ещё чтобы над каждой картинкой был заголовок

http://s009.radikal.ru/i309/1105/71/2b470aff96dc.jpg ну вот типо того

или вот это ,которое мне больше нравится.Вот ссылка http://i037.radikal.ru/1105/d1/db29f05fa3f4.jpg Помогите пожалуйста.

Самый простой вариант - если картинки известной ширины - помести их в <div> и задай ему ширину,исходя из размера картинок
а самим картинкам задай позиционирование налево и обнули все остальное:

Код:

<!DOCTYPE html>
<html>
	<head>
		<title>бокс для картинок</title>
		<meta charset="UTF-8"/>
		<style type="text/css">
			div#box
			{
				display:block;
				margin: 50px auto 0px auto;
				width: 300px;
			}
			img
			{
				border: 0px solid #ffffff;
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				height: 100px;
				width: 100px;
				float:left;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/>
			<img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/>
			<img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/>
			<img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/>
			<img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/>
			<img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/>
		</div>

	</body>
</html>

Snickers · 26.05.2011

что вы так таблиц боитесь? табличные данные никто не отменял, как и поддержку тега таблицы.

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

то он просто ищет себе неприятностей на попу и больше ничего.

вот оба варианта того что требуется и все без всяких ограничений

Код:

                <table>
                        <tr>
                            <td>фото 1</td><td>фото 2</td><td>фото 3</td>
                        </tr>
                        <tr>
                            <td><img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/></td><td><img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/></td><td><img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/></td>
                        </tr>
                </table>
                <table>
                        <tr>
                            <td>фото 1</td><td>фото 2</td>
                        </tr>
                        <tr>
                            <td>фото 3</td><td>фото 4</td>
                        </tr>
                            <td><img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/></td><td><img src="http://3wforums.ru/public/style_images/master/avatar-def.png" alt="" title=""/></td>
                        </tr>
                </table>

vaneeeeek · 26.05.2011

Спасибо очень помогли.А вот что бы Наводишь курсор на мелкую картинку появляется большая.я пробовал такое делать,но большая картинка отображается только наполовину .А и как сделать ,чтобы всё это роботало даже при отключении джава скрипт.

а и ещё нужен поиск по сайту, может скажете ,где про это можно почитать.Главное поиск должен быть не от гугла и яндекса

Clavinessa · 26.05.2011

а и ещё

Почитайте
Много занятного найдете.

кто то сказал что выводить табличные данные таблицей не круто

Код:

avatar-def.png

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

Нужна помощь по верстке

vaneeeeek

Active Member

motek

злой как @

Snickers

Быдлокодер

vaneeeeek

Active Member

Clavinessa

Well-Known Member

Онлайн статистика

Статистика форума

Новые пользователи

Поделиться этой страницей