Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    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

  • #3
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts

    :)

    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!

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    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

  • #5
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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!

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    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

  • #7
    New Coder
    Join Date
    Oct 2012
    Posts
    10
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ya that's exactly the effect I was looking for! Thanks coothead!

  • #8
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,718
    Thanks
    0
    Thanked 240 Times in 235 Posts
    No problem, you're very welcome.


    coothead


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •