Как сверстать такой макет?

[Shmuratko]

Здравствуйте!

Кто-нибудь подскажет, как сверстать этот вроде бы простой макет? Т. е. обтекание + список с такими отбивками.

 

[BaNru]

для картинки ставишь float:left
для списка <ol start="2001">
получиться примерно такое

<img src="image.jpg" style="float:left">
<ol start="2001">
<li>Текст текст текст Текст текст текст Текст текст текст</li>
<li>Текст текст текст Текст текст текст Текст текст текст</li>
<li>Текст текст текст Текст текст текст Текст текст текст</li>
</ol>

Если надо, что б года писались другим начертанием/размером, то всё что внутри LI кладем в DIV

<li><div>Текст текст текст Текст текст текст Текст текст текст</div></li>

И в таблице стилей указываем

li {font-size: 14px;}
li div {font-size: 10px;}

 

[tigra60]

Для картинки сделайте margin-right:50px, иначе у вас цифры наедут на изображение.

А вот и примерчик:Посмотреть вложение test.zip

 

[Shmuratko]

Хорошо. А если числа идут не всегда по возрастанию? Например, иногда один и тот же год повторяется несколько раз.

 

[hackee]

там может быть что угодно... не обязательно год) ... что напишите то и будет

 

[Shmuratko]

там может быть что угодно... не обязательно год) ... что напишите то и будет

Где это писать? Приведите пример.

 

[tigra60]

У элемента LI есть атрибут value, который определяет значение номера списка.

Вот пример: Посмотреть вложение ordered.zip

А вас что, в гугле забанили?

 

[Shmuratko]

Да, точно, спасибо. Нашло что-то.

А если нумерация нужна без точки после числа? Вообще, если не привязываться к числам. Что-то вроде dl, dt, dd, только dt и dd начинаются на одной строке - как на рисунке.

 

[tigra60]

К сожалению, универсальных решений не бывает.

Вот такой пример:
Посмотреть вложение list.zip.
Только картинка справа. Для картинки слева нужно назначать индивидуальные размеры отступа для пунктов, обтекающих картинку.

 

[Nikita Kirpo]

Да, точно, спасибо. Нашло что-то.

звучит не очень
в общем если ещё требуется помощь, напишите в лс, помогу