Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / список : фото + текст . как лучще сверстать / 23 сообщений из 23, страница 1 из 1
11.10.2009, 00:30
    #36244110
YuriyB
YuriyB
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
список : фото + текст . как лучще сверстать
добрый день !

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

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

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

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

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

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

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

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

С указанием алигн на картинке, наверно наиболее незагруженый вариант, но есть риск сползания остатка текста снизу картинки. Хотя, если с умом реализовать, то будет норм ))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.10.2009, 10:08
    #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, 11:12
    #36252484
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
список : фото + текст . как лучще сверстать
YuriyBя делаю так
...
но это уже 3 дивов

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

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

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

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

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

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

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

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

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

посмотреть css
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.10.2009, 13:20
    #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:22
    #36259330
Алексей Кашарин
Алексей Кашарин
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
список : фото + текст . как лучще сверстать
как видно css тут в принципе не нужны...
Или задача сделать обязательно с использованием стилей?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.10.2009, 13:23
    #36259333
konstsch
konstsch
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
список : фото + текст . как лучще сверстать
krvsa konstsch, таки ты не показал как "это" должно выглядеьт... Не предоставил тестовый пример...
Т.е. сам-то ты ничего не сделал еще. ;)

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

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

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

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

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

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

А это чтобы Юрий увидел 2 черных квадрата и убедился, что пример работает. )))
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.10.2009, 13:48
    #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, 15:07
    #36259735
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
список : фото + текст . как лучще сверстать
Алексей Кашаринбудет и с одним стилем

Но все же стилем.
Не стоит "перегружать" хтмл-разметку элементами верстки, т.к. это не оптимально в общем случае, не эстетично и не современно...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
05.11.2009, 13:22
    #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:44
    #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, 14:05
    #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:06
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / список : фото + текст . как лучще сверстать / 23 сообщений из 23, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 482ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1454019]:
 0ms
get settings:
 6ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 160ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 253ms
total:  482ms
x
x
Закрыть


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