Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Karol Zientek
Karol Zientek
2,006 Points

How to put these icons next to the header?

I have been writing a website for a while, and I have a small, cosmetic error I want to fix.

That's the code

    <div id="page">

        <ul id="icons">
            <li><object type="image/svg+xml" data="images/pl.svg"></object></li>
            <li><object type="image/svg+xml" data="images/gb.svg"></object></li>
        </ul>
        <div style="clear: both;"></div>
        <header>
            RYSZARD KUKLIŃSKI
        </header>
    </div>

    header {
    font-family: 'Poppins', sans-serif;
    font-size: 1.688em;
    text-align: center;
    font-weight: 700;
    display: block;
    letter-spacing: 1px;

    margin-left: auto;
    margin-right: auto;
    max-width: 40%;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #e60000;
    padding-top: 10px;
    padding-bottom: 10px;

    border: 5px solid #a20000;
    }

#icons {
    list-style: none;

    margin: 0;
    padding: 0;
    float: right;

    margin-top: 10px;
    margin-right: 5px;
}
#icons li {
    display: inline-block;
}
object {
    height: 16px;
    width: 32px;

}

You can also see a live version of the thing I am talking about here: www.ryszardkuklinski.pl (keep in mind that the site is still in development and it wasn't released, yet)

The problem is with these icons: Polish flag, and British at the top right corner. These icons are placed above the header, and I can't make them being put next to the header. I mean the same level, not under it, and not above. I hope that you understood me. I am waiting for replies :) Generally, the purpose of these icons is to redirect to the site with a different language.

1 Answer

Mike Wagner
Mike Wagner
23,888 Points
Mike Wagner
Mike Wagner
23,888 Points

It may not be a great fix, but it gets the job done pretty easily.

Your style.css for the header contains a top margin of 10px that is forcing it downward some.

/* 
margin-left: auto;
margin-right: auto;
margin-top: 10px;
/*
/* 
    So here I have given it a -20px instead. I also consolidated your margin
    for my own tastes, but if you want to leave it separated, you can. Just
    change the margin-top to -20px and you will get the same result.
/*
margin: -20px auto 0;

This will move the top of the red box in line with the top edge of the flag icons. The only issue you'll have at that point is figuring out how to make the icons stand out against the red background when the screen size is small. If you'd rather leave the flags above the red background on small screens, in an effort to keep things simple, then you would leave your style.css alone and instead put a margin-top: -20px; in the first media query where you would rather they share the same "line" and are clearly visible.