Блог

У меня проблема с некоторыми элементами HTML. У меня есть изображение и заголовок в <header> теге — они оба должны перемещаться независимо друг от друга, однако, когда я перемещаю элемент img вниз на 40 пикселей с атрибутом margin-top — заголовок, кажется, перемещается вниз на 40 пикселей вместе с ним. Поэтому я добавляю margin-top: -20px; , чтобы переместить его обратно, и, похоже, он остается на месте.

Вот мой код:

Заголовочный файл:

 <div class="page">
    <header>
    <div class="titlesec">
    <img class="circular" src="themes/default/image.jpg" />
            <a class="logo" href="<?php echo base_url(); ?>">
                <?php echo site_name(); ?>
        </a>
    </div>

    <div class="split"></div>
</header>
  

Файл нижнего колонтитула:

 <footer>
        <p>amp;copy; Copyright <?php date("Y"); ?> Duncan Hill</p>
</footer>
</div>
</body>
</html>
  

и мой css:

 .page {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

.logo {
    font-family: 'Helvetica Neue';
    font-weight: 100;
    font-size: 56px;
    text-decoration: none;
    color: #555555;
    margin-top: -20px;
}

.split {
    height: 1px;
    background-color: #CCCCCC;
}

.circular {
    margin-top: 40px;
    width: 80px;
    height: 80px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
}

.titlesec {
    height: 150px;
}
  

Любая помощь очень ценится!

img и a являются встроенными тегами. Это означает, что они находятся в одной строке. Добавление margin-top манипулирует этой строкой и, следовательно, влияет на них обоих.

В зависимости от того, что вы хотите сделать, вы можете решить эту проблему, окружив оба элемента своими собственными div . Затем вы можете стилизовать divs независимо. Возможно, float для этих divs тоже пригодится.

Закройте раздел «страница». Кажется, что вы неправильно закрываете свои html-теги.