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 Stephanie Green
Stephanie Green
3,525 Points

Text w/same color transparent bg

How do I style so the text is completely white, while the bg is white w/.2 opacity? Also how to get the height of the .box to extend the entire page?

html :

<body>

  <div>

<nav class="box">

<ul>

<li><a href="#">Home<a></li>

<li><a href="#">About<a></li>

<li><a href="#">Portfolio<a>
   <ul>

   <li><a href="#">CAD<a></li>

   <li><a href="#">Technical Packet<a></li>

       <li><a href="#">Garments<a></li>

  </ul>

</li>

<li><a href="#">Press<a></li>

<li><a href="#">Contact<a></li>

</ul>

</nav>

 </div>

</body>

</html>

css:

nav {

width: 200px;

height: 100%;

float: left;

margin: 30px 0;

}

ul {

display: block;

list-style: none;

}

ul li {

padding: 20px;

}

ul li a {

text-decoration: none;

font-size: 18px;

color: #fff;

text-transform: uppercase;

}

.box {

background-color: #fff;

opacity: .2;

width: 300px;

height: 100%;

position: relative;

}

7 Answers

Kevin Kenger
Kevin Kenger
32,834 Points

Could you post your full HTML and CSS code? From what you have here, I copied and pasted it and the div was working correctly, spanning the height of the page. So I'm thinking it might be something somewhere else in your code.

Stephanie Green
Stephanie Green
3,525 Points

html : <!Doctype html> <html > <head> <meta charset= "utf-8"> <title>Shawn Ferrer | Wear by Ferrer</title> <link rel="stylesheet" href="normalize.css" type="text/css"> <link rel="stylesheet" href="shawnindex.css" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> </head> <body>

  <div>

<nav class="box">

<ul>

<li><a href="#">Home<a></li>

<li><a href="#">About<a></li>

<li><a href="#">Portfolio<a>
   <ul>

   <li><a href="#">CAD<a></li>

   <li><a href="#">Technical Packet<a></li>

       <li><a href="#">Garments<a></li>

  </ul>

</li>

<li><a href="#">Press<a></li>

<li><a href="#">Contact<a></li>

</ul>

</nav>

 </div>

</body>

</html>

css:

html {

height: 100%;

background-image: url('shawn/bg.jpg');

background-repeat: no-repeat;

-webkit-background-size: 100% 100%;

-moz-background-size: 100% 100%;

-o-background-size: 100% 100%;

background-size: 100% 100%;

}

body {

height: 100%

}

nav {

width: 200px;

height: 100%;

float: left;

}

ul {

display: block;

list-style: none;

}

ul li {

padding: 20px;

}

ul li a {

text-decoration: none;

font-size: 18px;

color: rgba(255, 255, 255, 1);

text-transform: uppercase;

}

.box {

background-color: rgba(255, 255, 255, 0.4);

width: 300px;

height: 100%;

position: relative;

}

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Stephanie,

You could use an RGBA color value instead of a hexadecimal value.

Try something like this:

.box {
background-color: rgba(255, 255, 255, 0.2);
width: 300px;
height: 100%;
position: relative;
}
Stephanie Green
Stephanie Green
3,525 Points

Tried that. Background works, but text still shows transparent instead of full white.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

What effect are you trying to achieve here? It seems iike with this setup you wouldn't expect to see the text.

Do you have a different color body background?

I think I'm missing how white text on a mostly transparent white background is going to show up unless there's some other colors at play here that we aren't seeing.

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hmm...do you still have the opacity: .2 declaration? That might be what's causing the text to appear that way. Try removing that and let me know if that works.

Stephanie Green
Stephanie Green
3,525 Points
Stephanie Green
Stephanie Green
3,525 Points

yes that worked! THANK YOU! I still need to get the background to extend the height of the page though.

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

OK to do that, the height of the element needs to be 100%, which it looks like you've done. But that element's ancestors have to have a height of 100% as well, otherwise the browser will be like, "OK you want me to set the value to 100%. But 100% of what?" It's like trying to fit something into something else that you don't know the size of. Haha does that make sense?

So give your html and body elements a height of 100% as well, and if the element you want to extend the height of has any other parents, make sure to set the height of them as well.

Stephanie Green
Stephanie Green
3,525 Points

just set them all to height: 100% Didn't do anything.

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

How close is it to spanning the height of the page? You have a margin set for your nav element of 30px on the top and bottom and I'm thinking that might have something to do with it. Could you try removing that and let me know if that fixes it?

Stephanie Green
Stephanie Green
3,525 Points

fixed the top, but not the bottom

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey sorry I didn't get back sooner. I honestly can't find what it is in your code. When I copy and paste it I get a top-to-bottom nav.

I just want to try something. Could you add the following code to your style sheet and tell me if this fixes the problem? Your site will probably look weird, and this isn't the permanent fix (if it even works), but I want to see if the problem is with padding or margin somewhere.

* {
    margin: 0;
    padding: 0;
}