Позиционирование <div>под заголовком сообщения - PullRequest
Новая
       7

Позиционирование <div>под заголовком сообщения

0 голосов
/ 21 мая 2011

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

Страница увеличена до http://thelifefilm.com/

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

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

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

Ответы [ 2 ]

0 голосов
/ 22 мая 2011

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>
0 голосов
/ 22 мая 2011

В настоящее время <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, соответственно, на страницах одного сообщения.

...