| Главная » Статьи » Оформление сайтов |
Здравствуйте дорогие друзья, давно не публиковал новый материал на страницах своего блога, был занят созданием улучшенного дизайна блога! Но решил уделить минутку другую и затронуть вопрос по оформлению топ комментаторов. И для сегодняшнего примера я возьму блог Андрея Косолапова, на котором мы увидим ячейку Мои комментаторы:  Давайте поможем Андрею улучшить оформление данной ячейки. Шаг 1 - HTML код Для начала я смотрю исходный HTML код страницы блога и нахожу в нём нужный мне идентификатор id="topcomm-widget-2" с которым я буду работать, у вас может быть другое название идентификатора или это может быть класс (class="название класса"):  Шаг 2 - CSS код Отлично, теперь самое время для CSS стилей, ниже я создал два варианта оформление ячейки топ комментаторов. Первый пример: и собственно говоря CSS стили: Код #topcomm-widget-2 ul { float:left; width:100%; margin: 0; padding: 0; } #topcomm-widget-2 li { float:left; width:50%; text-align:center; padding: 0; margin: 0px 0px 20px 0px; list-style: none; } #topcomm-widget-2 li img { width:50%; margin:0px 25%; } #topcomm-widget-2 .art-postheader { text-align:center; margin-bottom: 20px; font:19px Verdana,Arial,Helvetica, sans-serif; }  и снова небольшой CSS код: Код #topcomm-widget-2 ul, #topcomm-widget-2 li { float:left; width:100%; margin: 0; padding: 0; } #topcomm-widget-2 li a { float:left; width:100%; background:#fff; padding: 7px 0px 0px 0px; margin: 0px 0px 15px 0px; } #topcomm-widget-2 li a:hover { background:#FAFAFA; } #topcomm-widget-2 li img { float:left; width:40px; height:40px; margin: -7px 20px 0px 0px; } #topcomm-widget-2 .art-postheader { text-align:center; margin-bottom: 20px; } Как вы видите по выше созданным примерам, я улучшил визуальное оформление ячейки топ комментаторов, сделал их компактнее с точки зрения юзабилити, и ушло у меня на это не больше 15 минут! Источник: http://web-dm.ru/blog_sovety/img/1/luchshij_kommentator_mesyaca.png | |
| Просмотров: 413 | Комментарии: 18 | | |
| Всего комментариев: 18 | |
|
У вас отсутствует в HTML коде нужный идентификатор, CSS стили нельзя применить, у вас такая же проблема как и у Игоря Черноморца комментариями ниже! Скорей всего Ирина вам подойдёт второй вариант, так как у вас очень узкая по ширине ячейка Тор комментаторов! Здравствуйте, Денис! Пришла к вам впервые по ссылке на блоге Андрея Косолапова. Меня тоже интересует этот вопрос. Только вот боюсь я заходить в код блога да ещё и там что -то изменять. Но очень хочется изменить топ -комментатора. Будем думать, как на это решиться. Спасибо Вам за статью. С уважением, Анна. Как говорят, глаза бояться, а руки делают! Я смотрю вы уже решили этот вопрос, том комментаторов выглядит лучше! При переходе по ссылке в статье на блог, выдаёт ошибку 404, ссылочку поправьте, сейчас она выглядит так http://web-dm.ru/kosolapovblog.ru в CSS стилях необходимо прописать вот такую строчку кода: Код #topcomm-widget-2 li img { border-radius:100%; } Хах, во втором примере мой граватар что-то подъизменился Тебе скорей всего нужно прописать код стилей вот для этого side-blok Проблема заключается в том, что ячейка в которой отображается нужная информация имеет класс side-blok и он к сожалению прописан в других ячейках, я насчитал 8 штук: Вау! Просто супер! Спасибо огромное, давно хотел поменять данный виджет или улучшить его. Просто не знал как. Зато теперь все супер, заходите в гости оценить. | |
А вообще полезная статейка. Я не знал как такое воплотить в жизнь. Да и топ комментаторов то у меня нет, за ненадобностью 
Денис, здравствуйте!
Действовал по вашей статье и установил код. Но результата не увидел, изменений с оформлением не произошло. Не подскажете какая причина может быть. И буду очень благодарен если вы скажете как ее решить.
С уважением, Артем.