Двухколоночный блог

Лучше всего для двухколончатого блога убрать остальные виджеты, пожалуй кроме навигации и названия блога. Ну чтобы было больше места и удобней для чтения. Можете не париться в настройках, сразу перейдем к коду.


#all .left {display: none;} — убираем левый столб с виджетами
.wrap .right {margin: 0;} — растягиваем правый столб с содержимым страниц

Теперь у нас блог растянут по всей ширине #all. Можно перейти к созданию двух колонок, как на первой картинке вначале поста.

#widget_blog {-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;}

обратите внимание, что column я ставлю только для widget_blog, чтоб пройдя на страницу отдельного поста он тоже не делился. То что я предлагаю далее можете не делать, хотя я считаю не менее важным. Остальные страницы могут кому-то не понравиться из-за ширины, все будет растянуто и выглядеть немного пусто. Поэтому можно задать ширину, какая бывает обычно, и разместить по центру.

.blog_view, .friends_view {width: 683px; margin: 0 auto;}


Еще советую задать фон записям, чтоб они не сливались на главной. Да, и для симпатичности сделать отступы внутри, а то пост выглядит тогда как подстреленыш.

#widget_blog .post {background: #f6f6f6; padding: 10px 15px;}

И картинки. Если оставить как есть, большие станут обрезанными на главной. Залазить не будут, просто неполными. Так что для изображений именно на главной блога зададим максимальную ширину 300px, чтоб смотрелось аккуратно. Для примера сравните первый и второй шаблон- картинки.

#widget_blog .post img {max-width: 300px;}

 

Всем красивого оформления!


Обсудить у себя 9
Комментарии (6)

спасибо!!!

Ничего себе! Ты умница!) 

Можешь дать ссылку на пример? Полистать хочется, посмотреть...

сейчас в лс дам

Чудесно!)

И мне ссылочку пожалуйста!..)

Чтобы комментировать надо зарегистрироваться или если вы уже регистрировались войти в свой аккаунт.

Войти через социальные сети: