Content of see-through div to bold?

hdjourdan · 10-03-2012, 07:50 PM

This is the first web site I'm designing, learning from scratch reading the tutorials from w3schools. This might be a simple question but I've tried a lot of things already and nothing seems to work for what I want to create.

The website is:
http://hernanjourdan.com/inicio2.html

First I tried to get the see-through black box to be part of the background, and make it as tall as the screen itself (to go all the way from the top to the very bottom). I kind of succeeded in doing this, but the logo was always in the way, either on top or at the bottom of the black box. I tried changing the display option of it from "block" to "inline" but didn't work either. So I moved on with a different option.

Now I have this see-through black box as a div element. I want all the content of the website to go in here, but all that I put in it ends up with the same opacity setting as the black box. For instance, the white box in it is set to opacity 1, so it should be completely white but is not.

The CSS I'm working on looks like this:

Code:

#grey {
width:800px;
height:450px; 
background-color:#000000;
border:10px;
padding:10px;
margin:20px;
margin-left:auto;
margin-right:auto;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}

#content {
width:700px;
height:430px;
background-color:#ffffff;
margin-top:10px;
margin-left:auto;
margin-right:auto;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

and what I'm doing in the html file is simply:

Code:

<div id="grey">
<div id="content">
</div>
</div>

Is there any way to make the black box something like a "second background" so I can put things on top of it (like a logo)? How can I make all the things that I put in it to be completely bold –not see-through?

Or maybe, is there a way to create a background like a div?
So instead of determing a jpg file through an url like

Code:

body {
background-image:url('LA%20CLE/background/wood3.jpg');
background-repeat:repeat;
background-attachment:fixed;
height:100%;
}

to use width, height, and all the settings we use to create a div.

Any help/tip would be appreciated! Thanks in advance.

coothead · 10-03-2012, 09:07 PM

Hi there hdjourdan,

opacity applied to the parent element will be also be applied to the child elements.

Personally, I would use "rgba" instead and not worry about IE8 rendering, it will just be black, which is no big deal.

Have a look at this example...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://hernanjourdan.com">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>LA CLE</title>

<!--<link rel="stylesheet" type="text/css" href="style.css">-->

<style type="text/css">
body {
    margin:0;
    background-image:url(LA%20CLE/background/wood3.jpg);
    background-repeat:repeat;
    background-attachment:fixed;
 }
#container {
    width:820px;
    padding-top:135px;
    margin:10px auto 20px;
    background-image:url(LA%20CLE/LOGO/LOGO8-10.png);
    background-repeat:no-repeat;
    background-position:center top;
 }
#grey {
    padding:20px;
    border:1px solid #000;
    background-color:rgba(0,0,0,0.6);
    box-shadow:12px 12px 12px rgba(0,0,0,0.5);
 }
#content {
    height:410px;
    padding:20px;
    background-color:#fff;
    overflow:auto;
 }
</style>

</head>
<body>

<div id="container">

<div id="grey">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
et mauris scelerisque tristique. Donec fringilla mauris dolor, 
sit amet vulputate lacus. Nulla feugiat mattis nulla non 
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
nisi eget neque tempus facilisis eu quis sapien.
</p><p>
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 
massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis 
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 
Proin viverra, neque non eleifend vehicula, nulla augue gravida 
felis, non fermentum lorem odio ac nunc. Aliquam pretium 
scelerisque consectetur. Proin ultrices urna non magna interdum 
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 
sodales cursus. Maecenas bibendum neque vitae orci mollis ac 
vulputate ante auctor. Sed sodales odio id ante sagittis 
faucibus.
</p>
</div><!-- end #content" -->

</div><!-- end #grey" -->

</div><!-- end #container" -->

</body>
</html>

coothead

hdjourdan · 10-05-2012, 06:59 PM

Hi Coothead! Thanks so much –that seems to do the job alright. One more question: I realized that the size of the whole box changes according to the sieze of the white "#content" box, but is there any way to change the size of the "#grey" box to make it the full height of the browser? I tried inserting codes in it's css but didn't work.
Thanks again!

coothead · 10-05-2012, 07:06 PM

Hi there

You can, of course, make the "grey box" the full height of the browser, but....

...where do you want the "LOGO8-10.png" to go?

coothead

hdjourdan · 10-05-2012, 07:31 PM

I wonder if I can make the grey box to be seen as background and be the entire height of the browser. The logo would go on it, just exactly where is now. So if we'd be talking in layers it would be:
1.wood background
2.grey background (not full width but full height)
3. logo on top, content box in the center.
I hope I'm making myself clear. Thanks again coothead!

coothead · 10-05-2012, 08:37 PM

Hi there hdjourdan,

try it like this...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://hernanjourdan.com">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>LA CLE</title>

<!--<link rel="stylesheet" type="text/css" href="style.css">-->

<style type="text/css">
html,body {
    height:100%;
    margin:0;
    background-image:url(LA%20CLE/background/wood3.jpg);
    background-repeat:repeat;
    background-attachment:fixed;
 }
#container {
    min-height:100%;
    width:820px;
    border-right:1px solid #000;
    border-left:1px solid #000;
    margin:auto;
    background-color:rgba(0,0,0,0.6);
    box-shadow:0 0 40px #000
 }
#logo {
    display:block;
    width:438px;
    height:122px;
    margin:0 auto 20px;
 }
#content {
    width:738px;    
    padding:20px;
    border:1px solid #000;
    margin:auto;
    background-color:#fff;
 }
#bottom-padding {
    height:20px;
 }
</style>

</head>
<body>

<div id="container">

<img id="logo" src="LA%20CLE/LOGO/LOGO8-10.png" alt="">

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis. Vivamus at metus eget eros consequat fringilla. 
Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
tellus. Praesent felis tortor, scelerisque vitae fringilla 
non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
consectetur in nec lacus.
</p><p>
Phasellus porta, dui a elementum egestas, odio sapien rhoncus 
lorem, vitae bibendum erat sem eget sapien. Maecenas ut metus 
ac quam pellentesque lacinia quis sit amet augue. Fusce eu 
euismod urna. Nunc volutpat scelerisque tempus. Donec eget arcu 
et mauris scelerisque tristique. Donec fringilla mauris dolor, 
sit amet vulputate lacus. Nulla feugiat mattis nulla non 
tincidunt. Nam sit amet dolor eros, a viverra lacus. Nunc quis 
nisi eget neque tempus facilisis eu quis sapien.
</p><p>
Ut et metus a massa rhoncus cursus. Integer luctus luctus enim, 
tristique rhoncus enim feugiat eu. Etiam porttitor volutpat 
massa sed congue. Sed eros nisl, volutpat ac dapibus quis, 
ultricies id diam. Mauris at elit eget quam ullamcorper sagittis 
ac vel lorem. Ut nec justo libero. Phasellus eget pharetra elit. 
Proin viverra, neque non eleifend vehicula, nulla augue gravida 
felis, non fermentum lorem odio ac nunc. Aliquam pretium 
scelerisque consectetur. Proin ultrices urna non magna interdum 
a sodales turpis suscipit. Mauris sollicitudin nisl ac arcu 
sodales cursus. Maecenas bibendum neque vitae orci mollis ac 
vulputate ante auctor. Sed sodales odio id ante sagittis 
faucibus.
</p>
</div><!-- end #content" -->

<div id="bottom-padding"></div>

</div><!-- end #container" -->

</body>
</html>

coothead

hdjourdan · 10-08-2012, 02:44 PM

Ya that's exactly the effect I was looking for! Thanks coothead!

coothead · 10-08-2012, 02:54 PM

No problem, you're very welcome.

coothead