ReSQL.ru
     
powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Картинки лентой (таблицы или divs?)
25 сообщений из 149, страница 1 из 6
  1  все
Картинки лентой (таблицы или divs?)
    #40089443
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
В продолжение java-топика.

Улучшаю стили и внешний вид. Дизайнерская задача - без ТЗ. Для себя потому-что.
Разматываю картинки по горизонтали. С набивкой по ширине. Пока - на таблицах.

Вадя - спс. Помогло. Стало лучше. Но еще не идеально. В некоторых таблицах
где мало картинок - они ровняются по центру а мне нужна плотная печать слева.
...
Рейтинг: 0 / 0
08.08.2021, 15:41
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089444
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
Текущие стили

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
body {
  background-color: #5E2B89;
}

table, th, td {
  border: none;
}

img {  display: block;}
h1 {
  color: #EEE3CE;
  text-align: left;
  font-family: verdana;
  font-size: 20px;
}

ul {
  color: #EEE3CE;
  font-family: verdana;
  font-size: 15px;
}

li {
  color: #EEE3CE;
  font-family: verdana;
  font-size: 20px;
}

a {
  color: #EEE3CE;
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>
<h1>Hellsing</h1>
<table width=640 cellspacing="0" cellpadding="0">
 <tr>
<td>   <img id = "43a0be44-03b4-4625-a3ab-988a521801b7" src="Hellsing-Wallpapers_1-mini.jpg"  style="background-color:#522D28;"  width=85 height=64 alt="Hellsing-Wallpapers_1" >
<td>   <img id = "8d1c86de-f6ea-499c-8685-e79f8f05d4ae" src="bakagami02_sxga-mini.jpg"  style="background-color:#410C0C;"  width=85 height=64 alt="bakagami02_sxga" >
<td>   <img id = "f91b3f02-0fd8-4770-939a-313f76deee22" src="kamehouse-mini.jpg"  style="background-color:#361B0B;"  width=71 height=64 alt="kamehouse" >
<td>   <img id = "fe2c13ff-a149-4a73-bafd-f15724b15d68" src="Hellsing-Wallpapers_10-mini.jpg"  style="background-color:#5C2B29;"  width=85 height=64 alt="Hellsing-Wallpapers_10" >
<td>   <img id = "3752cafb-07dc-4093-966b-119557d60bcf" src="Hellsing-Wallpapers_100-mini.jpg"  style="background-color:#7A3517;"  width=102 height=64 alt="Hellsing-Wallpapers_100" >
<td>   <img id = "4b717edd-bf28-45da-8482-7b030cc5a6b2" src="Hellsing-Wallpapers_11-mini.jpg"  style="background-color:#520000;"  width=85 height=64 alt="Hellsing-Wallpapers_11" >
<td>   <img id = "0c8efb2c-325f-4c8d-bc96-cc3e9b44fee3" src="Hellsing-Wallpapers_12-mini.jpg"  style="background-color:#191616;"  width=85 height=64 alt="Hellsing-Wallpapers_12" >
</tr>
</table>
<table width=640 cellspacing="0" cellpadding="0">
 <tr>
<td>   <img id = "135f95b8-3c66-4194-b243-21872e1f1d5e" src="Hellsing-Wallpapers_13-mini.jpg"  style="background-color:#312523;"  width=85 height=64 alt="Hellsing-Wallpapers_13" >
<td>   <img id = "72b629a0-5242-46bf-a82b-01bf496ef7ed" src="Hellsing-Wallpapers_14-mini.jpg"  style="background-color:#473D39;"  width=85 height=64 alt="Hellsing-Wallpapers_14" >
<td>   <img id = "727a62b2-4e4e-4bb3-9725-06b5d5add05d" src="Hellsing-Wallpapers_15-mini.jpg"  style="background-color:#1D0F0B;"  width=85 height=64 alt="Hellsing-Wallpapers_15" >
<td>   <img id = "1e7cb36e-0bd8-43c9-ac6b-59a112d142c5" src="Hellsing-Wallpapers_16-mini.jpg"  style="background-color:#3C1414;"  width=85 height=64 alt="Hellsing-Wallpapers_16" >
<td>   <img id = "c517a222-4aa7-4933-8389-054a3e574ef5" src="Hellsing-Wallpapers_17-mini.jpg"  style="background-color:#232224;"  width=102 height=64 alt="Hellsing-Wallpapers_17" >
<td>   <img id = "090f1571-34c7-41e4-92e6-58617c46efd9" src="Hellsing-Wallpapers_18-mini.jpg"  style="background-color:#291A12;"  width=85 height=64 alt="Hellsing-Wallpapers_18" >
<td>   <img id = "d77c935e-9e56-44ea-b5ce-eb9f9d99d579" src="Hellsing-Wallpapers_19-mini.jpg"  style="background-color:#3C372B;"  width=85 height=64 alt="Hellsing-Wallpapers_19" >
<td>   <img id = "abe4dc9d-36cc-46a1-adb9-55d835626f50" src="Hellsing-Wallpapers_2-mini.jpg"  style="background-color:#BB8787;"  width=85 height=64 alt="Hellsing-Wallpapers_2" >
</tr>



Размер скрина в 640 пикселов я задаю при запуске генерации индекса изначально. Тоесть я как-бы должен знать
размер целевого браузера. Это - не гибко. Пока еще не смотрел как это будет выглядеть на смартфоне
но буду ровняться именно под него.
...
Рейтинг: 0 / 0
08.08.2021, 15:43
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089447
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
https://purecss.io/ сейчас проверяю.
...
Рейтинг: 0 / 0
08.08.2021, 15:45
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089449
PetroNotC Sharp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PetroNotC Sharp
Участник
mayton,
дизайн под что?
Если это фотки а не альбомы то и покажи пример фоток. Они в большинстве перемешаны вертик/горизонт ориентация.
Будет совсем по другому смотрется. И понадобятся границы 2 пикселы по краям фоток. И черный фон. Это профессионально для фоток.
...
Рейтинг: 0 / 0
08.08.2021, 15:50
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089450
PetroNotC Sharp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PetroNotC Sharp
Участник
mayton
а мне нужна плотная печать слева.

-1
...
Рейтинг: 0 / 0
08.08.2021, 15:51
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089451
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mayton,

ты читай внимательно советы
нафиг тебе какие-то сложности?
я дал вариант 22356778
без таблиц, и про повороте смартфона будет тоже нормально
только ширину дива убрать , либо сделать 96%, чтоб скролить было удобно
...
Рейтинг: 0 / 0
08.08.2021, 15:53
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089453
PetroNotC Sharp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PetroNotC Sharp
Участник
mayton,
по коду много лишнего. Зачем лишнее загружать на клиента?
Код: html
1.
<img id = "135f95b8-3c66-4194-b243-21872e1f1d5e" src="Hellsing-Wallpapers_13-mini.jpg"  style="background-color:#312523;"  width=85 height=64 alt="Hellsing-Wallpapers_13" >
...
Рейтинг: 0 / 0
08.08.2021, 15:54
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089454
PetroNotC Sharp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PetroNotC Sharp
Участник
вадя,
+1
Че автор вторую неделю усложняет, не пойму)
...
Рейтинг: 0 / 0
08.08.2021, 15:55
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089455
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
PetroNotC Sharp
mayton,
дизайн под что?
Если это фотки а не альбомы то и покажи пример фоток. Они в большинстве перемешаны вертик/горизонт ориентация.
Будет совсем по другому смотрется. И понадобятся границы 2 пикселы по краям фоток. И черный фон. Это профессионально для фоток.

Оригиналы не могу показать т.к. это личное. И пока тренируюсь на вариативных коллекциях картинок
которые когда-то качал с fishki.net и прочих развлекательных ресурсов.

Оригиналы перемешаны в ориентации т.к. я конечно снимал фотиком вертикально и горизонтально.

Фоны и бордюры я сделаю просто параметром к утилите-генератору. И каждый сможет задать себе
любой.

P.S. Да. Фиолетовый цвет выглядит по уе6а..ски.
...
Рейтинг: 0 / 0
08.08.2021, 15:56
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089456
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mayton
Но еще не идеально. В некоторых таблицах
где мало картинок - они ровняются по центру а мне нужна плотная печать слева.
дак зачем задаешь ширину таблицы?
mayton
Тоесть я как-бы должен знать
размер целевого браузера
задлянафига?
...
Рейтинг: 0 / 0
08.08.2021, 15:56
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089457
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
PetroNotC Sharp
mayton,
по коду много лишнего. Зачем лишнее загружать на клиента?
Код: html
1.
<img id = "135f95b8-3c66-4194-b243-21872e1f1d5e" src="Hellsing-Wallpapers_13-mini.jpg"  style="background-color:#312523;"  width=85 height=64 alt="Hellsing-Wallpapers_13" >


id - fixed.

Уже убрал.
...
Рейтинг: 0 / 0
08.08.2021, 15:57
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089458
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
PetroNotC Sharp
Че автор вторую неделю усложняет, не пойму)
я вот не пойму - на отвечать на вопросы - это так заразно от Стаса?
...
Рейтинг: 0 / 0
08.08.2021, 15:58
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089459
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mayton,

у тебя каждая строка фоток несёт какой-то смысл?
...
Рейтинг: 0 / 0
08.08.2021, 16:02
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089462
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
вадя
mayton,

у тебя каждая строка фоток несёт какой-то смысл?

Нет. А какая альтернатива?

Я ровняю все картинки под одну высоту. И печатаю их плотно. Вариант Петро в квадратах - тоже норм
вариант. Но я пока не пойму чем плох вариант с разными пропорциями? Трудно?
...
Рейтинг: 0 / 0
08.08.2021, 16:09
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089465
PetroNotC Sharp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PetroNotC Sharp
Участник
mayton
PetroNotC Sharp
mayton,
по коду много лишнего. Зачем лишнее загружать на клиента?
Код: html
1.
<img id = "135f95b8-3c66-4194-b243-21872e1f1d5e" src="Hellsing-Wallpapers_13-mini.jpg"  style="background-color:#312523;"  width=85 height=64 alt="Hellsing-Wallpapers_13" >



id - fixed.

Уже убрал.

Стас, что с остальными тегами? И по русски разговаривай.
...
Рейтинг: 0 / 0
08.08.2021, 16:14
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089467
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mayton
Я ровняю все картинки под одну высоту. И печатаю их плотно. Вариант Петро в квадратах - тоже норм
вариант. Но я пока не пойму чем плох вариант с разными пропорциями? Трудно?
ты мой последний вариант пробовал?
mayton
Нет. А какая альтернатива?
я предложил вариант - для смартфона - будет автоматом заполнение по ширине и для горизонтальног и для вертикального
...
Рейтинг: 0 / 0
08.08.2021, 16:25
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089468
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mayton,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
          
            img{
                display: block;
                height:  64px;
                margin-right: 1px;
                margin-bottom: 1px; 
            }
            div{
                display: flex;
                flex-wrap: wrap;
                width: 95%;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="pic/x01.JPG" alt=""/>
            <img src="pic/x02.JPG" alt=""/>
            <img src="pic/x03.JPG" alt=""/>
            <img src="pic/x04.JPG" alt=""/>
            <img src="pic/x05.JPG" alt=""/>
            <img src="pic/x01.JPG" alt=""/>
            <img src="pic/x02.JPG" alt=""/>
            <img src="pic/x03.JPG" alt=""/>
            <img src="pic/x04.JPG" alt=""/>
            <img src="pic/x05.JPG" alt=""/>
        </div>
    </body>
</html>
...
Рейтинг: 0 / 0
08.08.2021, 16:27
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089478
бабушкин зайчик
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
бабушкин зайчик
Гость
либо все ячейки таблицы по ширине самой широкой картинки (т.е. банально вообще НЕ трогай width, она сама подгонит)
(на самом деле, можно даже на <ul> сделать - это ещё проще)
либо дивами, но тогда будет вот как у тебя, только гемора меньше

А вот зачем каждый пак картинок в отдельную таблицу пихать - загадка... А потом жаловаться, что криво
...
Рейтинг: 0 / 0
08.08.2021, 17:11
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089481
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
Щас пробую Вадин вариант с дивами.
...
Рейтинг: 0 / 0
08.08.2021, 17:19
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089483
PetroNotC Sharp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PetroNotC Sharp
Участник
mayton
Щас пробую Вадин вариант с дивами.
тебе про div вроде с первого поста все говорили.
...
Рейтинг: 0 / 0
08.08.2021, 17:24
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089485
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
Не успеваю так быстро.
...
Рейтинг: 0 / 0
08.08.2021, 17:39
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089491
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
Вадин вариант.

Вот как-то так. Насколько я понимаю картинки должны были в ширину заполнять пространство. Как текст.

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!DOCTYPE html>

<html>
    <head>
        <title>[title is here]</title>
        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
          
            img{
                display: block;
                height:  64px;
                margin-right: 1px;
                margin-bottom: 1px; 
            }
            div{
                display: flex;
                flex-wrap: wrap;
                width: 95%;
            }
        </style>
    </head>
    <body>
<h1>Hellsing</h1>
<img src="Hellsing-Wallpapers_1-mini.jpg" alt=""/>
<img src="bakagami02_sxga-mini.jpg" alt=""/>
<img src="kamehouse-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_10-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_100-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_11-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_12-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_13-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_14-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_15-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_16-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_17-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_18-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_19-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_2-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_20-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_21-mini.jpg" alt=""/>
<img src="Hellsing-Wallpapers_22-mini.jpg" alt=""/>


...
Рейтинг: 0 / 0
08.08.2021, 17:54
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089492
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
mayton,

а где див?
...
Рейтинг: 0 / 0
08.08.2021, 17:58
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089495
Фотография mayton
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mayton
Участник
Чорт.
...
Рейтинг: 0 / 0
08.08.2021, 18:00
| Ответить | Цитировать | Написать  
Картинки лентой (таблицы или divs?)
    #40089496
PetroNotC Sharp
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
PetroNotC Sharp
Участник
mayton,

Пятый раз прошу - добавь вертикальных фоток!
...
Рейтинг: 0 / 0
08.08.2021, 18:01
| Ответить | Цитировать | Написать  
25 сообщений из 149, страница 1 из 6
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Картинки лентой (таблицы или divs?)
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=40089462&tid=1443200]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 175ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 66ms
get tp. blocked users:
 2ms
others: 238ms
total:  526ms
созд. / загр.: 526ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]