CODEWITHSUNDEEP
phphtmlcss
TomHill
TomHill

Reputation: 634

HTML elements are contained to each other

I have a problem with some HTML elements. I have an image and a title in a <header> tag - they should both move independently to each other, however when I move the img element down 40px with the margin-top attribute - the title seems to move down 40px with it. So I add margin-top: -20px; to move it back up and it seems to stay put.

Here's my code:

The header file:

<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>

The footer file:

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

and my 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;
}

Any help is appreciated immensely!

Upvotes: 0

Views: 54

Answers (2)

JCm
JCm

Reputation: 1989

Close your "page" DIV. It seems that your not properly closing your html tags.

Upvotes: 0

colburton
colburton

Reputation: 4715

img and a are inline tags. Which means they are in the same line. Adding margin-top manipulates this line, and affects therefore both of them.

Depending on what you want to do, you could solve this with surounding both elements with their own div. Then you can style the divs independently. Maybe a float on those divs comes in handy, too.

Upvotes: 3

Related Questions