Макет сайта

[AndreyGSPB]

Вот есть макет сайта.Меня интересует вопрос по центральной части.Там где новости с комментами,датой.Как её можно сверстать чтобы получилось все правильно.Я уже сверстал верх и эту центральную часть начал.Вот только не пойму как сверстать так чтобы текст и дата, комменты были на одном уровне и самое главное там под каждой новостью идет линия,как сверстать так чтобы линия была и там где дата с комментами и там где новость.Короче я так понял должен получиться один блок.Но в макете получается что слои то разные и что то не получается совместить на один уровень дату с комментами и линия подчеркивающую всю новость.Подскажите пожалуйста просто на словах можно, а дальше я cам разберусь.В голове крутяться вроде способы,но не то как то.

Personal Blog Theme.jpg

Edited September 30, 2010 by AndreyGSPB

[Vlad]

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

Примерно так.

  <div style="border-bottom: 1px solid red">
	<div style="width: 200px; float: left; background: #ccc">Дата</div>
	<div style="margin-left: 200px; background: #f0f0f0">Текст</div>
  </div>
  <div style="border-bottom: 1px solid red">
	<div style="width: 200px; float: left; background: #ccc">Дата</div>
	<div style="margin-left: 200px; background: #f0f0f0">Текст</div>
  </div>

[AndreyGSPB]

ООО, спасибо.Вот я лошарик))))Я почти так же делал.Только внутренние блоки друг в друга вложены.Как я сам не догадался)))

[AndreyGSPB]

А вот еще хотел спросить.Вот получилось что вы показали.А как теперь наложить бумагу.Там в середине где текст,есть фон,он как бы бумажный(помятая бумага).И он довольно большой.Я просто не понимаю куда вложить.Фон белый потом идет.Надо бумагу наложить, и дальше идет белый фон.И как тени наложить.Там получается много теней.Ну как стандартыне тени по бокам наложить которые идут донизу я знаю, а как наложить тени слева и справа от бумаги которые отходят?если только абсолютом можно пристыковать.Заранее спасибо.

[Vlad]

Фон с бумагой можно контейнеру дать, внутри которого будет приведенный в посте 2 код. С тенями несколько решений есть. Либо тени добавить к определенным блокам, либо создать отдельный слой и для него установить. Слой же будет внутри все того же контейнера.

[AndreyGSPB]

Сделал как вы сказали.Фон с бумагой положил в контейнер.А в этом контейнере блок из поста 2.Белый бэкграунд назначен блоку с новостями.С новостями всё получилось.Но вот бумага находиться за этими контейнерами соответственно.Как сделать ее на передний план.Я уже все перепробывал и z-index назначал разным обьектам в том числе и блоку с бумагой.Торчит сзади и все.Что то мыслей нет никаких уже.Может еще еще способы сделать эту бумагу с белым фоном?Заранее спасибо.

[Vlad]

Ссылки нет на промежуточный вариант?

[AndreyGSPB]

Нету пока что(.Если только ссылку дам как в 1-ом посте.Да и как сюда кидать изображения чтобы они видны были сразу, а не ссылками?

Вот: http://narod.ru/disk/25964445000/m1.jpg.html

Edited October 11, 2010 by AndreyGSPB

[AndreyGSPB]

Ссылка на то что сделано постом выше).

[Vlad]

Заливаешь картинку на сайт вроде savepic.ru и в нем сразу код для форумов дается, надо только в пост вставить.

[AndreyGSPB]

Бггг, странно.Вставлял с яндекса ссылку для форума ничего не работало,просто отображалась ссылка с тегами,странно.Ну ладно.Залил на http://savepic.org, теперь все нормал.Ну вот что получилось на данный момент.

[Vlad]

Белый фон перекрывает бумагу, потому что находится в коде ниже и имеет более высокий приоритет. Следовательно, надо сделать наоборот - вначале белый фон выводить, а сверху фон бумаги. Вариантов, как обычно, несколько. Например, сделать еще один слой внутри bumaga и для него задавать фон в виде картинки --|— слева от черты кремовый цвет, справа белый.

[AndreyGSPB]

Спасибо!Все получилось.Сверстал макет полностью.