ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / список : фото + текст . как лучще сверстать
23 сообщений из 23, страница 1 из 1
список : фото + текст . как лучще сверстать
    #36244110
Фотография YuriyB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
YuriyB
Участник
добрый день !

например на сайте знакомсвт в результатах поиска
появляются ввиде списка фото пользователей + краткое описание

это можно отформатировать как таблицу (<table>)
как суп из <div>ов

а есть какие то еще хорошие варианты форматирования ?
...
Рейтинг: 0 / 0
11.10.2009, 00:30
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36244134
IDVsbruck
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
IDVsbruck
Участник
У картинки (<img>) есть атрибуты обтекания текста - можно воспользоваться для форматирования.
...
Рейтинг: 0 / 0
11.10.2009, 01:04
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36244748
Алексей Кашарин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Кашарин
Участник
YuriyBдобрый день !

например на сайте знакомсвт в результатах поиска
появляются ввиде списка фото пользователей + краткое описание

это можно отформатировать как таблицу (<table>)
как суп из <div>ов

а есть какие то еще хорошие варианты форматирования ?

Вариант с таблицами убейте у себя в голове сразу, тк содержимое талбицы пока целиком не подгрузится, таблица не отобразится (вы же не по 10 результатов хотите выводить на странице?), разбивать каждую личность на отдельную таблицу, наверно, наихудший вариант.

Суп из дивов? а почему именно суп? хватит 2 дивов <div><img... /><div></div></div> всяко меньше глубина тегов чем в таблице.

С указанием алигн на картинке, наверно наиболее незагруженый вариант, но есть риск сползания остатка текста снизу картинки. Хотя, если с умом реализовать, то будет норм ))
...
Рейтинг: 0 / 0
12.10.2009, 06:51
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36252251
Фотография YuriyB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
YuriyB
Участник
Алексей Кашарин... а почему именно суп? хватит 2 дивов <div><img... /><div></div></div> всяко меньше глубина тегов чем в таблице.

у меня почему то с 2 дивов не получается
приведите пример если можно

я делаю так
Код: plaintext
1.
2.
3.
4.
5.
6.
<div style="width: 100%;height:100px;">
<div style="width: 100px;float: left;height:100px;">
</div>
<div style="width: 400px;height:100px;vertical-align: middle;">
</div>
</div>
но это уже 3 дивов
...
Рейтинг: 0 / 0
15.10.2009, 10:08
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36252484
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
YuriyBя делаю так
...
но это уже 3 дивов

Можно и с одним ДИВом...

Код: plaintext
1.
2.
3.
<div>
   <img />
   <p></p>
</div>

При правильном описании в ЦСС...
...
Рейтинг: 0 / 0
15.10.2009, 11:12
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36252584
Алексей Кашарин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Кашарин
Участник
krvsaYuriyBя делаю так
...
но это уже 3 дивов

Можно и с одним ДИВом...

Код: plaintext
1.
2.
3.
<div>
   <img />
   <p></p>
</div>

При правильном описании в ЦСС...

Шутник ))
а если текст будет туда попадать с содержащимся форматированием? и мы получим <p><p></p></p> - ИМХО не правильно.

Пример мой с двуми дивами почти такой же ))
Код: plaintext
1.
2.
3.
<div>
   <img />
   <div></div>
</div>
...
Рейтинг: 0 / 0
15.10.2009, 11:38
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36252838
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Алексей КашаринПример мой с двуми дивами почти такой же ))

Разумеется...
...
Рейтинг: 0 / 0
15.10.2009, 12:39
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36257274
Фотография YuriyB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
YuriyB
Участник
krvsa...

При правильном описании в ЦСС...

так и в этом тема .

может кто привети пример правильного ЦСС для этого
...
Рейтинг: 0 / 0
17.10.2009, 16:41
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36258555
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
YuriyB , "правильное" это которое не "плывет" в разных браузерах, а отображается максимально одинаково и так как задымывалось изначально...
Чем тебе не нравятся примеры выше?
...
Рейтинг: 0 / 0
19.10.2009, 08:25
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36258788
Фотография konstsch
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
konstsch
Участник
krvsaЧем тебе не нравятся примеры выше?
а там разве что-то было выделено в css?
...
Рейтинг: 0 / 0
19.10.2009, 10:52
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36258914
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
konstsch , таки ты не показал как "это" должно выглядеьт... Не предоставил тестовый пример...
Т.е. сам-то ты ничего не сделал еще. ;)

Ты спросил про варианты - вариантов только три:
- таблицы
- дивы
- смешаная верстка
Ты назвал верстку ДИВами "супом"... Стали тереть эту тему - показали что на суп де не похоже...
...
Рейтинг: 0 / 0
19.10.2009, 11:31
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259236
Фотография YuriyB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
YuriyB
Участник
хотелось бы для этого

Код: plaintext
1.
2.
3.
4.
<div>
   <img />
   <p></p>
</div>

посмотреть css
...
Рейтинг: 0 / 0
19.10.2009, 13:01
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259324
Алексей Кашарин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Кашарин
Участник
Смотрим и наслаждаемся
Код: plaintext
1.
2.
3.
4.
5.
<html>
<head></head>
<body>
<img src='' align='left' style='width: 100px; height:100px;border: 1px solid black; '/><div style='width: 100px; height:100px; border: 1px solid black; '></div>
</body>
</html>
...
Рейтинг: 0 / 0
19.10.2009, 13:20
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259330
Алексей Кашарин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Кашарин
Участник
как видно css тут в принципе не нужны...
Или задача сделать обязательно с использованием стилей?
...
Рейтинг: 0 / 0
19.10.2009, 13:22
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259333
Фотография konstsch
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
konstsch
Участник
krvsa konstsch, таки ты не показал как "это" должно выглядеьт... Не предоставил тестовый пример...
Т.е. сам-то ты ничего не сделал еще. ;)

Ты спросил про варианты - вариантов только три:
- таблицы
- дивы
- смешаная верстка
Ты назвал верстку ДИВами "супом"... Стали тереть эту тему - показали что на суп де не похоже...

я не спрашивал
...
Рейтинг: 0 / 0
19.10.2009, 13:23
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259422
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Алексей Кашаринкак видно css тут в принципе не нужны...

А это что?
Код: plaintext
style='width: 100px; height:100px;border: 1px solid black;

А нужны они, дабы не повторять одно и то же по несколько раз в самой хтмл-разметке и для облехчения вида последней...
...
Рейтинг: 0 / 0
19.10.2009, 13:41
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259435
Алексей Кашарин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Кашарин
Участник
krvsaАлексей Кашаринкак видно css тут в принципе не нужны...

А это что?
Код: plaintext
style='width: 100px; height:100px;border: 1px solid black;

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

А это чтобы Юрий увидел 2 черных квадрата и убедился, что пример работает. )))
...
Рейтинг: 0 / 0
19.10.2009, 13:44
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259452
Алексей Кашарин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Кашарин
Участник
по сути работать будет и с одним стилем
Код: plaintext
1.
2.
3.
4.
5.
<html>
<head></head>
<body>
<div style='width: 400px;'><img src='' align='left' /><div></div></div>
</body>
</html>
...
Рейтинг: 0 / 0
19.10.2009, 13:48
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36259735
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Алексей Кашаринбудет и с одним стилем

Но все же стилем.
Не стоит "перегружать" хтмл-разметку элементами верстки, т.к. это не оптимально в общем случае, не эстетично и не современно...
...
Рейтинг: 0 / 0
19.10.2009, 15:07
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36292035
Фотография YuriyB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
YuriyB
Участник
Hi

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
<html>
<head></head>
<body>
<img src='' align='left' style='width: 100px; height:100px;border: 1px solid black; '/>
<div style='width: 100px; height:100px; border: 1px solid black; '> 77 </div>
</body>
</html>


vot etot primer u menja ne RABOTAET

scren prilagaju

hotja mne nuzno ztob rabotal SPISOK , t e

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
// for  1  ..  20  

<img src='' align='left' style='width: 100px; height:100px;border: 1px solid black; '/>
<div style='width: 100px; height:100px; border: 1px solid black; '> 77  </div>


<img src='' align='left' style='width: 100px; height:100px;border: 1px solid black; '/>
<div style='width: 100px; height:100px; border: 1px solid black; '> 78  </div>

// end
...
Рейтинг: 0 / 0
05.11.2009, 13:22
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36292116
Алексей Кашарин
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Алексей Кашарин
Участник
упс, с кроссбраузерностью накосячили )))
так работает (проверил в ie, opera, ff, chrome,safari)

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
<html>
<head></head>
<body>
<img src='' align='left' style='width: 100px; height:100px;border: 1px solid black; '/>
<div style='width: 100px; height:100px; border: 1px solid black;margin-left:102px '> 77 </div>
</body>
</html>
...
Рейтинг: 0 / 0
05.11.2009, 13:44
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36292195
Фотография YuriyB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
YuriyB
Участник
Алексей Кашаринпо сути работать будет и с одним стилем
Код: plaintext
1.
2.
3.
4.
5.
<html>
<head></head>
<body>
<div style='width: 400px;'><img src='' align='left' /><div></div></div>
</body>
</html>


esli

Код: plaintext
1.
2.
<div style='width: 400px;'><img src='' align='left' /><div></div></div>
<div style='width: 400px;'><img src='' align='left' /><div></div></div>

to poluzim
...
Рейтинг: 0 / 0
05.11.2009, 14:05
| Ответить | Цитировать | Написать  
список : фото + текст . как лучще сверстать
    #36292198
Фотография YuriyB
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
YuriyB
Участник
Алексей Кашаринупс, с кроссбраузерностью накосячили )))
так работает (проверил в ie, opera, ff, chrome,safari)

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
<html>
<head></head>
<body>
<img src='' align='left' style='width: 100px; height:100px;border: 1px solid black; '/>
<div style='width: 100px; height:100px; border: 1px solid black;margin-left:102px '> 77 </div>
</body>
</html>



Spasibo sa primer
...
Рейтинг: 0 / 0
05.11.2009, 14:06
| Ответить | Цитировать | Написать  
23 сообщений из 23, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / список : фото + текст . как лучще сверстать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=36252584&tid=1454019]:
 0ms
get settings:
 8ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 166ms
get topic data:
 10ms
get forum data:
 2ms
get page messages:
 78ms
get tp. blocked users:
 1ms
others: 260ms
total:  550ms
созд. / загр.: 550ms
x
x
Закрыть


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