From the heights of my overconsciousness... ([info]zdenka) wrote,
@ 2008-07-08 00:29:00
Previous Entry  Add to memories!  Tell a Friend  Next Entry
HTML
Я вот сайты никогда на ХТМЛ не писала и кроме "а хреф" тэгов не знаю, но теперь жизнь заставила. Поэтому вопрос: я сделала такую вот галерею превьюшек при помощи (TABLE), (TR), (TD), ну и так далее:

5,06 КБ

Но если мне понадобится проапдейтить ее так, как показано на рис.2, то это ж мне придется каждую строку каждый раз переписывать!

6,35 КБ

Нету ли какого простого способа, чтобы в галерее все картинки выстраивались в три столбца вне зависимости от перестановки слагаемых?

P.S. Я пишу руками в notepade и специальные программы качать не хочу.

(16 comments) - (Post a new comment)


[info]danielad
2008-07-07 10:54 pm UTC (link)
если картинки всегда одинакового размера, то на фиг таблицу.

можно всё вставить в один DIV, ну или, если угодно, в одну табличную ячейку и подобрать ширину так, чтобы туда влезало ровно три столбца :) а элементы с картинками уже сортировать как угодно.

(Reply to this) (Thread)

[info]ozozo
2008-07-07 10:58 pm UTC (link)
гениально! )

(Reply to this) (Parent)

[info]zdenka
2008-07-07 11:00 pm UTC (link)
Одинакового.
А что такое DIV?

(Reply to this) (Parent)

[info]zdenka
2008-07-07 11:03 pm UTC (link)
Про одну ячейку поняла! А расстояния между картинками как мне в таком случае установить в 20, например, пикселей?

(Reply to this) (Parent)(Thread)

[info]danielad
2008-07-07 11:17 pm UTC (link)
ну по-хорошему, надо прописать соответствующий стиль.

в заголовке страницы что-нибудь типа:

<head>
<style type="text/css">
<!--
#MyID {
width:300px; 
}

#MyID img {
margin:20px;
}
-->
</style>

</head>


А в теле страницы что-нибудь типа...

<div id="MyID">

<img src="mypic01" />
<img src="mypic02" />
<img src="mypic03" />
<img src="mypic04" />
<img src="mypic05" />

</div


значения в пикселях, понятное дело, должны соответствовать желаемым / необходимым.

margin:20px;

устанавливает отступ в 20 пикселей со всех сторон. если надо отдельно - то по принципу "top-right-bottom-left" можно написать:

margin: 20px 0px 0px 10px;

(Reply to this) (Parent)(Thread)

[info]zdenka
2008-07-07 11:27 pm UTC (link)
Спасибо большое! Все поняла!

(Reply to this) (Parent)
Пример, часть 1
[info]cema
2008-07-07 11:36 pm UTC (link)
Если все размеры всегда одинаковые, то и расстояние между картинками всегда сохранится.

div это название для "блока", т.е. элемента документа html, имеющего блокову структуру. Подробности не суть; просто: элемент документа. Он не обладает содержанием, но имеет геометрические параметры. Такие элементы, как картинки, которые имеют содержание, и при этом записаны в html внутри него, будут помещаться в рамки этих параметров. (Я упрощаю для ясности.) Т.е. div тут служит в качестве несущего элемента.

Проще посмотреть на пример. Сперва будут семь картинок шириной по 92 пикселя каждая, плюс расстояние между картинками в ширину 5 пикселей (в высоту тоже 5 пикселей). Получаются ряды картинок: три, три, одна. Потом добавим картинку той же ширины и с теми же расстояниями от соседей. Получаются: три, три, две.

Я ещё покрасил фон розовым, чтобы было видно, где кончается этото самый div. И сделал его чуть более широким, чем точь-в-точь сумма всех ширин. Главное, чтобы не более узким. И отформатировал так, как мне кажется более удобным. Ну один раз это сделал, а потом, чтобы добавить новую картинку (или убрать лишнюю старую), нужно просто взять соответствующий элемент <img ... > в коде и либо выкинуть его из кода, либо вставить новый такой же img перед ним (или после него) и поменять src; всё.

Короче, сейчас будут картинки (в следующем комментарии).

(Reply to this) (Parent)
Пример, часть 2
[info]cema
2008-07-07 11:36 pm UTC (link)
Картинка раз, код:


Картинка раз, изображение:



Картинка два, код:


Картинка два, изображение:



Не знаю, стало ли понятнее.

(Reply to this) (Parent)(Thread)
Re: Пример, часть 2
[info]zdenka
2008-07-07 11:38 pm UTC (link)
спасибо! все понятно!

(Reply to this) (Parent)(Thread)
Re: Пример, часть 2
[info]cema
2008-07-07 11:39 pm UTC (link)
Ага, я уже увидел, что кое-кто меня опередил. :-)

(Reply to this) (Parent)

[info]ozozo
2008-07-07 10:56 pm UTC (link)
только тр перенести надо будет, это не очень сложно. тд остаются как есть.

(Reply to this) (Thread)

[info]zdenka
2008-07-07 11:32 pm UTC (link)
когда их много станет - затрахаешься.

(Reply to this) (Parent)(Thread)

[info]cema
2008-07-07 11:38 pm UTC (link)
Верно.

С таблицами и другая проблема: их содержание обычно не рисуется, пока вся таблица не загрузится. Если она длинная, то это бывает неудобно.

(Reply to this) (Parent)(Thread)

[info]zdenka
2008-07-07 11:39 pm UTC (link)
об этом я даже не знала!

(Reply to this) (Parent)

[info]thinkerordunce
2008-07-22 07:21 am UTC (link)
Чтобы не писать в notepad'e лучше использовать Notepad++, так как у него есть автозаполнение и подсветка синтаксиса, что особенно удобно!!!)

(Reply to this) (Thread)

[info]thinkerordunce
2008-07-22 07:21 am UTC (link)
ах да, это опенсорс...)

(Reply to this) (Parent)

(16 comments) - (Post a new comment)

Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…