Размещение под заголовком публикации

#css #blogs

#css #Блоги

Вопрос:

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

Страница находится на http://thelifefilm.com /

«Плитки публикации» сбоку в настоящее время имеют верхнюю границу для их размещения. Это отлично работает до последнего сообщения, которое распространяется на вторую строку. Итак, как я могу это сделать, чтобы <div class="tile"> всегда было на 15 пикселей ниже заголовка сообщения.

Кстати, если кто-нибудь может объяснить, как полностью центрировать мои «номера комментариев» в маленьком речевом пузыре, потому что в настоящее время это выглядит хорошо только для определенных чисел.

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

1. не уверен — но выглядит действительно красиво.

2. Просто прочитайте немного о ваших «номерах комментариев» сейчас. Измените ширину <div class="tile"> со 115 пикселей на 120 пикселей и <div class="commentPad"> с 16 пикселей на 24 пикселя. Все будет по центру. Если вы используете Firefox, установите расширение Firebug. Или используйте эквивалент Chrome (в обоих случаях: щелкните правой кнопкой мыши, проверьте элемент). Это сделает вашу жизнь намного проще…

Ответ №1:

В настоящее время <div class="tile"> находится снаружи <div class="articleBody"> . Поместите плитку внутри тела статьи, под h1 тегом. Удалите верхнее поле на плитке. Перенесите плитку и изображение, которое ссылается на один пост, в другой div . Переместите плитку влево, а изображение отдельной публикации — вправо.

Предлагаемая структура:

 <div class="articleBody">
    <h1>Post Title</h1>
    <div class="below-title-wrap">
         <div class="tile">...</div>
         <a href="blog-single.html">
              <img src="http://lorempixum.com/495/125/technics" alt="Tech">
         </a>
    </div>
</div>

Позвольте мне добавить в качестве правки, что по соображениям SEO не рекомендуется иметь более одного <h1> тега на страницу. Я бы сделал их <h2> и <h1> только в single.php , соответственно, на отдельных страницах публикации.

Ответ №2:

CSS:

 * { margin:0; padding:0 }
h2 { padding-left:115px; margin-bottom:15px }
.tile { width:100px; height:100px; float:left; margin:0 15px 15px 0 }

HTML:

 <div class="article">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p><img class="tile" src="tile.gif" alt="" /></p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>