Relative div position 2

[HestonJames]

Hello Guys,

I'm looking for a little help on how to position this div the way I want it, thought I would ask for your advice. Lets say I have two div's on my page, they look like this:

<div id="div1">
</div>
</div id="div2">
</div>


#div1 {
   width:100%
   height:300px;
}
#div2 {
   width:100%
   height:300px;
}

Now, what I want to do is introduce a 3rd div which overlaps them both and also contains some text, like so:

<div id="div1">
</div>
[COLOR=#ff0000]
<div id="div3">
   Some Text
</div>[/color]
</div id="div2">
</div>


#div1 {
   width:100%
   height:300px;
}
#div2 {
   width:100%
   height:300px;
}
[COLOR=#ff0000]
#div3 {
   padding:5px 20px 5px 20px;
}[/color]

Ideally I want the final result to look something like this:

I'd appreciate your advice on how best to achieve this.

Cheers again guys,

Heston

 

[johnwm]

Easy way is absloute positioning if you don't mind using it

<div id="top" style="background:green;height:200px;width:500px;">Top row</div>
<div id="bottom" style="background:red;height:200px;width:500px;">Bottom row</div>
<div id="middle" style="position:absolute;left:150px;top:150px;background:blue;height:100px;width:200px;">Middle row</div>

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[HestonJames]

john,

Thanks for the reply mate. Will this work if the first two divs are of no fixed height? I'm preferably looking for something that wont break if they change in size for any reason.

Cheers,

Heston

 

[johnwm]

What have you tried? If you want to have variable top or bottom box height you could try using position:relative for the lower 2 boxes, with a negative vertical offset. There is a full description of CSS positioning at

http://www.w3schools.com/css/css_positioning.asp

___________________________________________________________
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
Steam Engine Prints

 

[HestonJames]

John,

Thanks for that! I ended up sticking div3 inside div1 and then using an auto margin and a relative position to get it centered and dropped down so it covers bother lower divs, seems to work nicely enough.

Thank you.

Heston

 

[kylebellamy]

James,

Thanks!! You answered a question that was bugging the... well.. you know what out of me. Much appreciated!

Kyle

http://www.kb-design-studios.com

 

[johnwm]

It's quite alright! You're welcome.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[kylebellamy]

Follow up question:
Is it possible to place a DIV so that it stays positioned in relation to an image map trigger even if content above changes?

I have a small pop over script running that hides and shows various DIVs but they are positioned according to the page so when things are added above the trigger on the page it, the trigger's position changes but the DIV does not. Makes for very annoying times since there are multiple pages using this and multiple hidden DIVs on each page.

I just can't quite figure it out.

http://www.kb-design-studios.com

 

[Vragabond]

If I understand you correctly, you have a bunch of elements positioned in different areas on your page that, when hovered, show an absolutely positioned div. Since this div is positioned absolutely, it always appears in the same place on your page, whereas you would like it positioned somewhere in the relation of the element that triggered it.

If that is what you want, yes you can do it. In absolute positioning you choose auto for the top and left values. This means that the element will be positioned exactly where the element that triggered is. Then you can use margins to offset the div so that it does not cover the element that triggered it.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[kylebellamy]

*runs to try it out*

http://www.kb-design-studios.com

 

[kylebellamy]

So after much trying, it does not seem to be working and I can only guess that it is a function of the CMS I am using that is causing the problem. I have no choice or control over the CMS which is Microsoft CMS 2002 so I have to use the basic script they set up to enable the tooltips.

This is me trying to bend the rules inside the system. lol

Not sure if this will help but here is the DIV wrapper code:
<DIV class=tooltip id=LEFT onmouseover=stopTimer() style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; MARGIN-TOP: -200px; LEFT: auto; MARGIN-LEFT: -85px; BORDER-LEFT: medium none; WIDTH: 300px; BORDER-BOTTOM: medium none; POSITION: absolute; TOP: auto; HEIGHT: 179px; BACKGROUND-COLOR: transparent" onmouseout=startTimer(this)>

I realize that the border things is overblown but the CMS forces me to add all that or it gets a border. *shrugs*

http://www.kb-design-studios.com

 

[Vragabond]

Do you have an online example of this? It would be much easier to debug it that way.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[kylebellamy]

Unfortunately no. It's an intranet so I'd get hammered eight ways to sunday for letting you in. lol Security is a great thing but so limiting at the same time.

http://www.kb-design-studios.com

 

[kylebellamy]

Had a thought: could it be that I am trying to use the TOP and LEFT auto settings inline that is causing them to not work?

I might, might be able to get the masters of the server to modify the class that is called to include those rules. Would that make a difference?

http://www.kb-design-studios.com

 

[Vragabond]

Shouldn't. Could you make a mock up of the page and post that online? I don't need any data, just the functionality of the page.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[kylebellamy]

I think I've found it after reading a ton of code to get to it. Turns out that the JS for the pop ups was calling for it to pop up according to coordinates that were relative to the page rather than the element that the mouseover was embedded in.

On a lark I checked with people in the Javascript forum and it was discovered right away.

But thank you for the info here. I actually am going to employ the info I got here on another thing I'm working on. lol I just love this place.

http://www.kb-design-studios.com