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 John Levy
John Levy
1,451 Points

How to place text over a box

I designed a box and figured out how to place the text in the white box. The problem is I have a blue box and the text should be over the blue box as well as the white box. Right now the blue box just goes further down the page when I add the text. I tried moving the text below the blue box tag but that just made the text disappear. What am I doing wrong? I have attached my code below- Thanks in advance HTML <!-- wrapper --> <div class="wrapper">

<!-- white boxes -->

<!-- box -->
<div class="box white_box">
    <span></span>
    <div class="image_holder"> <img src="igbodybuildingworld.jpg" alt="smile"> </div>



    <p class="igbodybuildingworld">
    IGBODYBUILDINGWORLD
    </p>

    <p class="text">
    Featuring the best proffesoanl bodybuilders from around the world
    </p>

    <p class="price2">
    $11-$15
    </p>

    <p class="followers">
    Followers: 40K
    </p>

    <p class="following">
    Following: 600
    </p>

    <div class="bluebox"></div>


    <button>SELECT</button>
</div>

CSS /padding and borders compensation/ div{ box-sizing: border-box; } /add wrraper for control blocks flow/ .wrapper{ position: relative; width: 1350px; margin: 0 ; text-align: left; }

/*add shared styles for all boxes*/
.box{ 
    position: relative; 
    width: 250px; 
    margin: 0 7px 15px 7px;
    padding: 25px; 
    text-align: center; 
    background: #fff; 
    display: inline-block; 
    vertical-align: top; 
}
/*add styles only for white boxes*/
.white_box{ 
    height: 550px; 
    border: 1px solid #000; 
}
    /*image holder*/
    .image_holder{                      /*instagram image*/
        position: relative; 
        width: 150px; 
        height: 150px; 
        margin:-10px 0 0 0; 
        border: 5px solid #ccc; 
        border-radius: 75px; 
        display: inline-block; 
        overflow: hidden; 
    }
        .image_holder img{ width: 100%; }

/*add styles for button*/
button{ 
    position: absolute;
    width: 200px; margin: 0 0 0 -100px; 
    left: 50%; bottom: 25px; 
    background: #847bf7; 
    border: solid 1px; 
    font-size: 36px; 
}

span{                                               /*instagram name*/
    position: absolute;
    text-align: center;

    bottom: 20px; 
    top: 205px;
    font-size: 15px; 
    font-weight: bold;
}

.bluebox{
     position: relative; 
        width: 248px; 
        height: 289px; 
        margin: 90px 40px 0px -25px; 
        background: #847bf7; 
        display: inline-block; 

}

.igbodybuildingworld{
    font-size:18px;
    font-weight:bold;
    text-align: center;
    color: black;

}
.text{
    font-size:16px;
    font-weight:regular;
    text-align: left;
    color: black;
}


.price2{
    font-size:36px;
    font-weight:regular;
    text-align: center;
    color: black;
    margin: -10px 0px -10px 0px;
}

.followers{
    font-size:16px;
    font-weight:regular;
    text-align: center;
    color: grey;


}

.following{
    font-size:16px;
    font-weight:regular;
    text-align: center;
    color: grey;
    margin: -10px 0px -10px 0px;

}
Konstantin Kovar
Konstantin Kovar
16,003 Points

What do you mean with "over"? Do you mean it should be above the box or in (like laid over) the box?

If I get it correctly then you want a box that has a white top half and a blue bottom half with text in it?

Edit: The following is a lie, I forgot about the text you want to include. You just have to move the text you want on blue inside the blue div.

If that is the case the easiest solution is 

div {
width: 50px; 
border-top: 50px solid white;
border-bottom: 50px solid blue;
}

with width and height (px values of border properties) obviously changable to whatever you like.

3 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points

from the code given you do not have any p tags inside the div with the class bluebox, it's empty.

John Levy
John Levy
1,451 Points
John Levy
John Levy
1,451 Points

Thanks for your help, I didn't realize I had to place text in the div of the blue box, thanks again.

Jacob Mishkin
Jacob Mishkin
23,118 Points

not a problem.

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

:point_right: You can create a duo-tone background.

Background images can be scaled and positioned, so if you use an image with nothing but your desired color, you can have it appear only at the bottom of the element. Then, any text inside the element will seamlessly flow across the color division:

.duotone {
  background-image: url(http://www.solidbackgrounds.com/images/640x480/640x480-ube-solid-color-background.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 50%;
}

This example uses and approximate color found on the web, but you can prepare your own image file with the exact color that you want.