Lean?`

Tanax · 03-07-2008, 09:57 PM

Hi, how can I do this?

HTML Code:

<img src="leftimage" />
<div id="content">
hellooooo
</div>
<img src="rightimage" />

And set the content div to a width to 0, and then overlap the div with the images, so it looks like the images are together as one image? Someone said using float: right on the left image, and float: left on the right image, but that didn't work =/

TlcAndres · 03-07-2008, 10:39 PM

Why not use z-index? From my understanding you want the images to be under the div.

Tanax · 03-07-2008, 11:40 PM

I want the images to cover the div, so the images has to be above the div, div has to be under the images

And how does z-index work?

wGEric · 03-07-2008, 11:49 PM

HTML Code:

<div style="position: absolute;">
    <div style="position: absolute; top: 0; left: 0; z-index: 2;">text</div>
    <img src="leftimage" />
    <img src="rightimage" />
</div>

That should work as long as the images don't wrap.

Tanax · 03-08-2008, 12:06 AM

Quote:

Originally Posted by wGEric

HTML Code:

<div style="position: absolute;">
    <div style="position: absolute; top: 0; left: 0; z-index: 2;">text</div>
    <img src="leftimage" />
    <img src="rightimage" />
</div>

That should work as long as the images don't wrap.

THanks! It kind of worked

But how can I center all that? Cause I want it to be in the middle of the middle of the page(middle in ^v ways, and middle in <> ways), right now it's up in the left corner..

Also, the images doesn't "cover" the div, the images are background to the div =/ the "text" gets places on top of the images...

Thanks again

wGEric · 03-08-2008, 12:58 AM

Oh, you don't want to display the text?

HTML Code:

<div style="margin: -100px auto 0; height: 200px; position: absolute; top: 50%;">
    <div style="display: none;">text</div>
    <img src="leftimage" height="200" />
    <img src="rightimage" height="200" />
</div>

That will center it horizontally and vertically and the text won't be displayed. Vertical centering is a little bit tricky. How it centers vertically is it moves the top of the box down 50% of the height of the window (position: absolute; top: 50%;). It then moves it up half the height of the box (margin: -100px;). The auto in the margin centers it horizontally.

Tanax · 03-08-2008, 02:29 AM

Well, I got like this right now:

Clicking it will with javascript open it to this:

HTML Code:

<div id="splash">
<img id="img1" onclick="toggle();" src="img/splash-close-left.png" border="0" style="float: left; margin-top: 1px;"/><div id="content"></div><img id="img2" onclick="toggle();" src="img/splash-close-right.png" border="0" style="float: left;"/>
</div>

Code:

body {
	
	background-color: #464646;
	
}

#content {

	width: 0px;
	float: left;

}

javascript Code:

function toggle() {
        
        var content = $('content');
        var width = content.getStyle('width').toInt();
        
        if(width != 400) {
            
            expand();   
            
        }
        
        else {
            
            contract();
            
        }   
        
    }

And right now, it's kindof working exactly like I want it... only that it's not centered =// How would I center this?

DeMo · 03-08-2008, 03:24 AM

Well you can wrap everything inside another div.

Code:

<div align="center">
  everything else goes here :)
</div>

Tanax · 03-08-2008, 10:01 AM

Quote:

Originally Posted by DeMo

Well you can wrap everything inside another div.

Code:

<div align="center">
  everything else goes here :)
</div>

Nope, it doesn't work =//

I think it's because of the float: left's ..

wiifanatic · 03-08-2008, 02:02 PM

Use this (make necessary modifications):

Code:

<div style="margin: -100px auto 0; height: 200px; position: absolute; top: 50%; text-align: center;">
    <div style="display: none;">text</div>
    <img src="leftimage" height="200" />
    <img src="rightimage" height="200" />
</div>