Closed Thread Icon

Preserved Topic: Positioning Problem... (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=9041" title="Pages that link to Preserved Topic: Positioning Problem... (Page 1 of 1)" rel="nofollow" >Preserved Topic: Positioning Problem... <span class="small">(Page 1 of 1)</span>\
 
buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

 posted posted 03-04-2004 20:13

I have the layers set as such...


<div style="position: relative;"> <!-- I want the layer to expand with the amount of content... -->
<div> <img src="someimage.png"> </div>
<div style="position:absolute; top:0px; left: 0px;">
<!--This is where the problem lays, the div will not grow with the content because of position: absolute - I need the text to appear over the image -->

content...
content...
content...
content...
content...
</div>
</div>

There is probally a easy fix, but i run into this all the time... thanks

~buddy~
CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

 posted posted 03-05-2004 15:19

can you show us an example of it? I tried to recreate it with the code you have here but I don't think it's right.........

might try using z-index. If you do use it, then it only works on divs with position set.

Later,

C:\


~Binary is best~
buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

 posted posted 03-09-2004 21:38

Ok let me try and give a better example...

------------------------------------------------
InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

 posted posted 03-09-2004 21:55

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

 posted posted 03-10-2004 00:46

I want to be able to put it anywhere in the box and position: absolute; is the only way I know of...

Please correct me )

~buddy~ (pool player 'buddy lee' can't bust him)
DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

 posted posted 03-10-2004 10:06

I've tested some variations and it feels like this would be the easiest solution:

code:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">

<html>

<head>

       <title>Yo!</title>

</head>

<body>

<h1>Text over image</h1>

<div id="BoxA" style="position: relative; top:5px; left:10px; border:1px solid #000000; padding:10px; width:400px; background-image:url(someimage.png); background-repeat:no-repeat; background-position: 10px 10px ;">

    <div id="BoxB" style="position:relative; top:0px;left:0px; border:1px solid #CDCDCD;">

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

    </div>

</div>



</body>

</html>



You can experiment with the position of the text by altering the positioning "top:Xpx" & "left:Xpx" of BoxB. You can alter the positioning of the image by using the "background-position: 10px 10px ;" where the first value is distance from left and the second is distance from top.

Hope this helps
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-
buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

 posted posted 03-11-2004 21:03

DmS :
Your solution is flawed... The problem is that if you put content in BoxA it will move BoxB. It would be nice...

<div id="containier">
<div id="BoxA"></div>
<div id="BoxB"></div>
</div>

if you could move a box to the containing boxs starting position... just like a position:absolute layer but without the draw backs
of the containing layer not expanding with the position:absolute; layer's content. I bet you could use JavaScript to align the box
with top neg value) left neg value) but this poses other problems.

Maybe we could figure out a solution. Thanks for the post DmS.


~buddy~ (pool player 'buddy lee' can't bust him)

[This message has been edited by buddylee (edited 03-11-2004).]
DmS
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Oct 2000

 posted posted 03-12-2004 11:12

Flawed
Well based on your description and code examples I was under the impression that you needed to place text "on top" of an image. By placing the image as a fixed bg in the div you can do that.

I gave the first snip 5 minutes and experienced the same trouble you had, that's why I placed the image as a bg instead of "normally" in BoxA.

How about this one then:

code:
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">

<html>

<head>

       <title>Yo!</title>

       <script language="JavaScript" type="text/javascript">

       function setPos(objF,objB){

            obFront = document.getElementById(objF);

            obBack = document.getElementById(objB);

            h2 = obBack.offsetHeight;

            newTop = "-"+h2;

            obFront.style.top = newTop;

       }

       </script>

</head>

<body onload="setPos('boxInFront','boxBehind')">

<h1>Text over image</h1>





<div id="container" style="position: relative; top:10px; left:10px; border:1px solid #000000; padding:10px; width:400px; overflow:visible;">

    <div id="boxBehind" style="position:relative;top 10;left:10; width:380; height:100; overflow;visible;">

    <img src="DmSsneakPreviewSmall.gif"><br>

    Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

        Text here to appear in image div...<br>

   

    </div>

    <div id="boxInFront" style="position:relative; top:-80px;left:0px; border:1px solid #CDCDCD;">

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>

        Text here to appear above image...<br>        

    </div>

</div>



</body>

</html>



More like it?
Both divs (boxInFront and boxBehind) can now expand the height of the "container" div.
The problem here is that you need to adjust the "top:-XXpx" in "boxInFront" accordingly to the height of the div "boxBehind" you want to place the text on top of.

To handle this I hacked a quick & dirty onload function that does the adjustment, at least roughly.
Unfortunatley this seems to be IE only, I can't remember how to get the same data in NS/Moz and I don't have the time right now to search for it.

All of this stems from the fact that position:absolute lifts the object out of the hierachy of the source code, that's why the surrounding container can't adjust the height to the content, the content isn't there...
position:relative keeps the object in the source codes hierarchy and places it in relation to the object before it in the code.

Use it or lose it your choice.
/Dan

{cell 260}
-{ a vibration is a movement that doesn't know which way to go }-
buddylee
Bipolar (III) Inmate

From: Kennesaw, GA - USA
Insane since: Oct 2003

 posted posted 03-22-2004 00:17

I'm a goof, I forgot about overflow:visible;

thanks bro

~buddy~ (pool player 'buddy lee' can't bust him)

« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail