TalkPHP - Lean?`

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - Lean?` (http://www.talkphp.com/xhtml-html-css/2433-lean.html)

Tanax

03-07-2008 09:57 PM

Lean?`

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 (Post 12089)

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 (Post 12094)

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>

All times are GMT. The time now is 02:15 AM.