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 Denis Zhidkov
Denis Zhidkov
2,660 Points

Why does last li element goes on the new line and title doesn't go down when I use margin-top?

Why does last li element goes on the new line and .title doesn't go down when I use margin-top? And how can I place .logo and .header_list on one line but float them to left and right. Thanks a lot in advance.

HTML

<body>
        <div class="main">
            <div class="header">
               <h2 class="logo">DigitalGeeks</h2>
                <ul class="header_list">
                    <li><a href="about.html">О нас</a></li>
                    <li><a href="services.html">Услуги</a></li>
                    <li><a href="projects.html">Кейсы</a></li>
                    <li><a href="blog.html">Секреты</a></li>
                    <li><a href="contacts.html">Контакты</a></li>
                </ul> 
            </div>
            <div class="title">
                <h1>Найдем ваших клиентов в сети</h1>
            </div>
        </div>

    </body>

CSS

.logo {
    float: left;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-top: 3%;
    margin-left: 8%;
}

.header_list {
    float: right;
    margin-top: 4%;
    padding: 2%;
}

.header_list li {
    list-style: none;
    display: inline;
    padding-right: 8%;
}

.header_list li a {
    text-decoration: none;
    color: white;
    font-family: agorathin;
    font-size: 1.8em;
}

.main {
    height: 100%;
    width: auto;
    padding-bottom: 50%;
    background-image:-webkit-linear-gradient(rgba(0, 0, 0, 0.45) 96%, rgba(0, 0, 0, 0.35) 96%), url(../images/Slideshow_Sony_Website.jpeg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto;
    color: white;
    text-align: center;
}

.title {
    margin: 0 auto;
    clear: both;
    margin-top: 25%;
}
Karson Kalt
Karson Kalt
10,935 Points

To place your .logo and .header_list on one line you're going to want to display them as inline-block along with .header_list li. Keep in mind that the ul tag is creating another container around your li items. Your CSS might look like:

.logo,
.header_list,
.header_list li {
    display: inline-block; 
}

.logo {
    float:left;
}

.header_list {
    float: right;
}

.header_list li a {
    min-width: 200px;
}

Notice that the last section I selected .header_list li a because we want the anchor element to expand to 200px to make the clickable area larger.

As for positioning .title, I would use a clearfix to bring it out of alignment from its parent container, otherwise it will wrap in the free space between your floats. Guil has a video on that here.

1 Answer

Denis Zhidkov
Denis Zhidkov
2,660 Points
Denis Zhidkov
Denis Zhidkov
2,660 Points

Hi Karson Kalt ,

Thanks a lot for your answer! It helped.

Chris Freeman
Chris Freeman
Treehouse Moderator 68,468 Points
Chris Freeman
Chris Freeman
Treehouse Moderator 68,468 Points

Also keep in mind that margin-top used with percentages is based on the width of the containing block. (MDN doc margin-top) and padding-right used with percentages is based on the width of the containing block (MDN doc padding-right)