View Single Post
Old 10-03-2012, 07:50 PM   PM User | #1
hdjourdan
New Coder

 
Join Date: Oct 2012
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
hdjourdan is an unknown quantity at this point
Content of see-through div to bold?

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.
hdjourdan is offline   Reply With Quote