5 Replies - 61567 Views - Last Post: 08 June 2014 - 11:02 PM

#1 noname_clark   User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 75
  • Joined: 22-October 08

Div Overlay - Proper way to do it

Posted 13 June 2011 - 09:55 AM

I was just wondering how everyone does div overlay, and what is considered "correct"
I know of 2 ways to do it (with z-index of course with both ways), using the "position" css property, and using the "margin" css property (e.g. margin-top:-50px).

What does everyone else uses, and is there a "best" way to do div overlay? I don't like using "position" because it makes the page really long (it renders the div in the normal spot, then moves it up on top of the other div), but I don't like using a negative value for margin (it just seems wrong).

Anyone know the correct way to do this?

Is This A Good Question/Topic? 0
  • +

Replies To: Div Overlay - Proper way to do it

#2 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5337
  • View blog
  • Posts: 14,229
  • Joined: 18-April 07

Re: Div Overlay - Proper way to do it

Posted 13 June 2011 - 10:41 AM

There is no real "right way" to do this. Ideally all solutions follow one standard method and that is to take the div out of the flow of the page (using absolute positioning) and then adjusting its top and left properties (where you place it based on where you want it to show up. If that is center, calculate the width of the user's screen, subtract the width of the div, divide by 2 and you have the left edge. Do the same with the height.)

You shouldn't have to use a negative margin. Adjust the div using the top and left properties and they are usually a positive integer value.

:)

Check out my blog topic about this... Martyr2's Programming Underground - Behind the div overlay. In this I talk about creating an overlay to replace a picture, but the same goes with any div overlay.

This post has been edited by Martyr2: 13 June 2011 - 10:44 AM

Was This Post Helpful? 1
  • +
  • -

#3 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Div Overlay - Proper way to do it

Posted 13 June 2011 - 12:12 PM

View PostMartyr2, on 13 June 2011 - 01:41 PM, said:

using absolute positioning) and then adjusting its top and left properties (where you place it based on where you want it to show up. If that is center, calculate the width of the user's screen, subtract the width of the div, divide by 2 and you have the left edge. Do the same with the height.


Wouldn't that mean it will only look like in one resolution? Would you have to create multiple style sheets for multiple resolutions? That's why I never liked using position (I'm starting to like it more as I understand it more.)

This post has been edited by EnvXOwner: 13 June 2011 - 12:13 PM

Was This Post Helpful? 0
  • +
  • -

#4 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5337
  • View blog
  • Posts: 14,229
  • Joined: 18-April 07

Re: Div Overlay - Proper way to do it

Posted 13 June 2011 - 12:17 PM

Well the positioning can be created dynamically. Depends on what you want to do with the overlay. If you wanted to create one of those fade the page out and center the div (lightbox style) then all you need to do is find the width of the browser window and again subtract the div width and divide by 2. Then you can position the div using Javascript.

You could also use the margin trick of auto left and right margins. Either way you shouldn't be having to use negative margins or negative top/left attributes unless you want to yank part of it off screen or place it somewhere and then pull it out of that position for some reason.

But if you don't alter the margins or top/left how are you going to position it? :)
Was This Post Helpful? 1
  • +
  • -

#5 tidyui   User is offline

  • New D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 7
  • Joined: 13-May 11

Re: Div Overlay - Proper way to do it

Posted 17 June 2011 - 02:42 AM

One thing that many people forget about absolute positions is that is doesn't have to be absolute according to the viewport. If you place an item with position:absolute inside a container with position:relative the absolute positioning becomes relative to it's parent and not the browser windows viewport. You don't need any javascript for this solution and it's clean and neat. See the example below.

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
        <style type="text/css" media="screen">
            html, body { background: #ddd; }
            .wrap { margin: 40px auto; width: 200px; padding: 20px; background: #fff; position: relative; }
            .note { position: absolute; top: 30px; left: 40px; padding: 10px; background: #fe8;  }
        </style>
	</head>
	<body>
        <div class="wrap">
            Hello
            <div class="note">
                World!!
            </div>
        </div>
	</body>
</html>


Was This Post Helpful? 1
  • +
  • -

#6 nicolcrome   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 02-May 13

Re: Div Overlay - Proper way to do it

Posted 08 June 2014 - 11:02 PM

Try this simple overlay sample...

.picColor{
width:320px;
height:240px;
background: url(img/flower.png) no-repeat;
border:5px solid #000000;
}
.picColor:hover
{
opacity:0.9;
background:#FFFFFF;
width:320px;
height:240px;
}

Finf here more overlay techniques..CSS Overlay Techniques

Nicol
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1