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 Yasin Atagün
Yasin Atagün
4,691 Points

Divs, Float, Background, CSS

I want to list my questions. I hope i can get some answers. Thanks from now. 1: On .mekanlar class i achiveed that the background of the div size with inside content withouth any height property. But on the last class "ekstra" its not working, i had to set height value. Why? 2: On last main class "ekstra" i created "ekstra-content" class. I was trying to achieve a good looking border for content. and inside ekstra-content, i added 2x div to add 2x different content. The problem is, i cant add background value to ekstra content which taking content1 and content 2 in 1 box, i gave background color too..

/* ELEMENTS*/
* {
  box-sizing: border-box;
}

body {
    margin:0;
    font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
    font-size: 3em;

}

h2 {
    font-size: 2em;

}

h3 {
    font-size: 1.5em;
}

h1,h2,h3 {
    font-family: "Verdana",sans-serif;
}
p {
    font-size: 1em;

}

a:link {
    color: black;

}

a:hover {
    color: black;

}

a:visited {


}

a:active {

}



.main-header {
    background-image: url('../img/1.jpg');
    background-size: cover;
    height: 800px;
    padding-top: 140px;
    border-bottom: solid 5px white; 
}

.header-title {
    padding:0;
    margin:0;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background-color: rgb(0,0,0,0.5);
    margin:0 100px 0 100px;
    padding:30px 50px;
}

.arrow {
    width: 50px;
    display:block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 50px;
    padding-bottom:30px;
}

.tarih {

    padding:20px;
    background-color: orange;
    background-image: url('../img/5.jpg');
    background-size: cover;
    border-bottom: solid 5px white; 
}

.tarih-content {
    padding:10px 50px;
    margin:50px 200px;
    background-color: rgb(0,0,0,0.5);
    color:#fff;
}

.mekanlar {
    padding:20px;
    background-color:  #fff;
    background-image: url('../img/3.jpg');
    background-size: cover;
    border-bottom: solid 5px white; 
}

.mekanlar-content {
    padding:10px 50px;
    margin:50px 200px;
    background-color: rgb(0,0,0,0.5);
    background-color:#34344c;
    color:#fff;
    object-fit:contain;
    box-shadow: inset 0 15px 20px -12px rgba(0,0,0, .8);
    border-radius: 20px;

}
.mekan-1, .mekan-2, .mekan-3{
    padding-bottom: 20px;
    border-bottom: solid 5px white;
}

.mekan-1 img, .mekan-2 img, .mekan-3 img {
    object-fit:cover;
    width: 100%;
    height: 100%;
    overflow:hidden;
}




/*ekstara 99999999999999999999999*/
.ekstra {
    padding-top:20px;
    background-image: url('../img/3.jpg');
    background-size: cover;
    border-bottom: solid 5px white; 
    height: auto;
    height: 859px;
}

.ekstra-content {
    padding:0;
    margin:0;
    text-align: center;
    color: #fff;
    font-size: 20px;
    background-color: rgb(0,0,0,0.5);
    margin:0 100px 0 100px;
    padding:30px 50px;
}

.ekstra-1, .ekstra-2 {
    width: 45%;
    padding:5px 50px;
    color: white;
    font-weight: bold;
}

.ekstra-1 {
    float: right;
}

.ekstra-2 {
    float: left;
}

<div id="ekstralar" class="ekstra">
        <div class="ekstra-content">
            <div class="ekstra-1">
                <h3>Facts İstanbul</h3>
                <ul>
                    <li>Istanbul is the only transcontinental city in the world located on two continents, Europe and Asia. </li>
                    <li>With a population of 13.9 million, Istanbul is one of the largest urban agglomerations in Europe and is the 2nd largest city in the world by population within city limits. </li>
                    <li>In its thousands of years of history, it has been the capital of three great empires - Roman, Byzantine and Ottoman. However the modern day capital of Turkey is Ankara.</li>
                </ul>
            </div>
            <div class="ekstra-2">
                <h3>Facts İstanbul</h3>
                <ul>
                    <li>Istanbul is the only transcontinental city in the world located on two continents, Europe and Asia. </li>
                    <li>With a population of 13.9 million, Istanbul is one of the largest urban agglomerations in Europe and is the 2nd largest city in the world by population within city limits. </li>
                    <li>In its thousands of years of history, it has been the capital of three great empires - Roman, Byzantine and Ottoman. However the modern day capital of Turkey is Ankara.</li>
                </ul>
            </div>
        </div>
    </div>

1 Answer

Steven Parker
Steven Parker
231,261 Points
Steven Parker
Steven Parker
231,261 Points

This code isn't enough to demonstrate the issue, for these reasons:

  • there is no HTML code with the "mekanlar" class to compare with
  • the images are not provided, so the page appears blank (white text on white background)