Member Avatar for centenond

okay so i want a div that has an absolute positioning with height and width at 100%, like when u click on a facebook photo, the div that the color is black, with an opacity or a rgba color that u can see tru .. the problem is that when i set it, it just take 100% of the sreen height, and when i scroll down the page it shows the end of the div...

<div style="position:absolute;top:0;left:0;height:100%;width:100%;background:rgba(0, 0, 0, 0.6);"></div>

how can i fix this, without giving it a fixed positioning or a specified height?
Also this happens with the width too, it just take 100% of the screen width

Thanks!

Edited by centenond
  • 2 Contributors
  • 8 Replies
  • 440 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by centenond
Member Avatar for Alberto Bucur

Hi,
I try this:

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled 1</title>
</head>

<body>
    <div style="position:absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); "></div>
</body>
</html>

and i dont have any scroll bar on browser.
Can you give some details of your html and css code ?

Member Avatar for centenond

Hi,

I try this:

Thanks for the reply

oh men if i post my css code ud be dealing with a bunch of lines, yes u dont have a scroll bar cuz ur page is empty. try this and see what i meant

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled 1</title>

    <style>
        #content {
            width:1100px;
            border:4px solid black;
            background:green;
            margin:0 auto;
            height:2000px;
            font-size:100px;
            color:red;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="content"> This is my page   </div>
    <div style="position:absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); "></div>
</body>
</html>

Thanks again for the reply

PROBLEM.png 122.25 KB
Edited by centenond
Member Avatar for Alberto Bucur

Hi again,
This is work.

<!DOCTYPE HTML>
    <html>
    <head>
    <title>Untitled 1</title>
    <style>
    #content {
        width:1100px;
        border:4px solid black;
        background:green;
        margin:0 auto;
        height:2000px;
        font-size:100px;
        color:red;
        text-align:center;
    }
    </style>
    </head>
    <body>

    <div style="float:left; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.6); ">
        <div id="content"> This is my page </div>
    </div>
    </body>
    </html>
Member Avatar for centenond

Hi again,
This is work.

Hi albucurus, floating the div is not an option since i have floating element in my real page, it will end up beside another floating element... what im trying to do is not a body background, its something like this...

<!DOCTYPE HTML>
    <html>
    <head>
    <title>Untitled 1</title>
    <style>
    #content {
        width:1100px;
        border:4px solid black;
        background:green;
        margin:0 auto;
        height:2000px;
        font-size:100px;
        color:red;
        text-align:center;
    }
    </style>
    </head>
    <body>
    <div id="content"> This is my page 
        <div style="position:absolute;top:0;left:0;height:100%;width:100%;background:rgba(0, 0, 0, 0.8); ">
            <div style="position:relative;top:150px;font-size:16px;background:white;height:auto;width:600px;margin:0 auto;padding-bottom:40px;">
                <div style="width:100%;text-align:right;font-size:40px;"><b>[x]</b></div>
                <img src="http://www.online-image-editor.com/styles/2013/images/example_image.png"  />
            </div>
        </div>
    </div>  

    </body>
    </html>

Thanks for ur time

Member Avatar for Alberto Bucur

Me by this ?!

<div style="position:absolute; top:0px;left:0px; height:2020px; width:100%; background:rgba(0, 0, 0, 0.8); z-index: 10;">
            <div style="position:relative;top:150px;font-size:16px;background:white;height:auto;width:600px;margin:0 auto;padding-bottom:40px;">
                <div style="width:100%;text-align:right;font-size:40px;"><b>[x]</b></div>
                <img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" />
            </div>
        </div>
Member Avatar for centenond

Me by this ?!

No, i cant give it a specified height nor position:fixed; unless u have a way to position:fixed the black div , and when scroll down some how the white div dont get in the same position, like actualy scroll down..

  <body>
    <div id="content"> This is my page 
        <div style="position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0, 0, 0, 0.8); ">
            <div style="position:relative;top:150px;font-size:16px;background:white;height:auto;width:600px;margin:0 auto;padding-bottom:40px;">
                <div style="width:100%;text-align:right;font-size:40px;"><b>[x]</b></div>
                <img src="http://www.online-image-editor.com/styles/2013/images/example_image.png"  />
            </div>
        </div>
    </div>  

    </body>
Member Avatar for Alberto Bucur

Hi,
Move the white div after the fixed div, the fixed div become without content.
This worked for me:

<div id="content"> This is my page
       <div style="position:fixed; top:0px;left:0px; height:100%; width:100%; background:rgba(0, 0, 0, 0.8); ">
       </div>
       <div style="position: relative; top:150px;font-size:16px;background:white; height:auto; width:600px; margin:0 auto;padding-bottom:40px;">
                <div style="width:100%;text-align:right;font-size:40px;"><b>[x]</b></div>
                <img src="http://www.online-image-editor.com/styles/2013/images/example_image.png" />
</div>




</div>
Member Avatar for centenond

Hi,
Move the white div after the fixed div, the fixed div become without content.
This worked for me:

This would do the trick! many many thanks!

Edited by centenond
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.