Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Картинки лентой (таблицы или divs?) / 25 сообщений из 149, страница 1 из 6
  1  все
08.08.2021, 15:41
    #40089443
mayton
mayton
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
В продолжение java-топика.

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

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

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

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

ты читай внимательно советы
нафиг тебе какие-то сложности?
я дал вариант 22356778
без таблиц, и про повороте смартфона будет тоже нормально
только ширину дива убрать , либо сделать 96%, чтоб скролить было удобно
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2021, 15:54
    #40089453
PetroNotC Sharp
PetroNotC Sharp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
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:55
    #40089454
PetroNotC Sharp
PetroNotC Sharp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
вадя,
+1
Че автор вторую неделю усложняет, не пойму)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2021, 15:56
    #40089455
mayton
mayton
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
PetroNotC Sharp
mayton,
дизайн под что?
Если это фотки а не альбомы то и покажи пример фоток. Они в большинстве перемешаны вертик/горизонт ориентация.
Будет совсем по другому смотрется. И понадобятся границы 2 пикселы по краям фоток. И черный фон. Это профессионально для фоток.

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

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

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

P.S. Да. Фиолетовый цвет выглядит по уе6а..ски.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2021, 15:56
    #40089456
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
mayton
Но еще не идеально. В некоторых таблицах
где мало картинок - они ровняются по центру а мне нужна плотная печать слева.
дак зачем задаешь ширину таблицы?
mayton
Тоесть я как-бы должен знать
размер целевого браузера
задлянафига?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2021, 15:57
    #40089457
mayton
mayton
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
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:58
    #40089458
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
PetroNotC Sharp
Че автор вторую неделю усложняет, не пойму)
я вот не пойму - на отвечать на вопросы - это так заразно от Стаса?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2021, 16:02
    #40089459
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
mayton,

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

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

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

Я ровняю все картинки под одну высоту. И печатаю их плотно. Вариант Петро в квадратах - тоже норм
вариант. Но я пока не пойму чем плох вариант с разными пропорциями? Трудно?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2021, 16:14
    #40089465
PetroNotC Sharp
PetroNotC Sharp
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
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:25
    #40089467
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
mayton
Я ровняю все картинки под одну высоту. И печатаю их плотно. Вариант Петро в квадратах - тоже норм
вариант. Но я пока не пойму чем плох вариант с разными пропорциями? Трудно?
ты мой последний вариант пробовал?
mayton
Нет. А какая альтернатива?
я предложил вариант - для смартфона - будет автоматом заполнение по ширине и для горизонтальног и для вертикального
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
08.08.2021, 16:27
    #40089468
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
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, 17:11
    #40089478
бабушкин зайчик
бабушкин зайчик
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
либо все ячейки таблицы по ширине самой широкой картинки (т.е. банально вообще НЕ трогай width, она сама подгонит)
(на самом деле, можно даже на <ul> сделать - это ещё проще)
либо дивами, но тогда будет вот как у тебя, только гемора меньше

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

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

 
Код: 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:58
    #40089492
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Картинки лентой (таблицы или divs?)
mayton,

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

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


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