Topic: Centering Opening Logo Pages that link to <a href="https://ozoneasylum.com/backlink?for=9537" title="Pages that link to Topic: Centering Opening Logo" rel="nofollow" >Topic: Centering Opening Logo\

 
Author Thread
chudzta
Bipolar (III) Inmate

From: Williamsburg, VA
Insane since: Aug 2002

IP logged posted posted 10-06-2002 21:12 Edit Quote

alrighty.. was looking for a possible way to vertically align my opening logo
http://chudzta.cjb.net

right now im just using <br>'s to get it somewhat there..

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

IP logged posted posted 10-06-2002 21:45 Edit Quote

The easiest way of doing that is putting everything you want to center into a table cell and then set its align and valign attributes to center/middle:

code:
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">

<!-- centered content here -->

</td>
</tr>
</table>

Or, if you don't want to use table hacks for your layout, you could also center that box by putting it into a <div> and use some JavaScript positioning. Bugimus has a script on his homepage which does that job - http://www.bugimus.com/gurus/center_div.html.

kuckus (cell #282)

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 10-06-2002 22:58 Edit Quote

Here's how I do it. Put your image inside a div called "content". Using a div that we need to be 751x425, we use:

<style type="text/css">
#content {
position:absolute;
text-align: center;
border: 0px solid #000000;
left: 50%;
top: 50%;
width: 751px; /* total width of the object */
height: 425px; /* total height of the object */
margin-left: -375px; /* width/2 */
margin-top: -212px; /* height/2 */
}

/*
The right value for Mozilla (right now these are the same as the IE values.
I'll correct it later.
This method takes advantage of the CSS bug.
*/

body>#content {
margin-left: -375px;
margin-top: -212px;
}
</style>

This actually takes advantage of an IE bug to help Mozilla based stuff be set accordingly. This works great, and maintains center even when resized.

chudzta
Bipolar (III) Inmate

From: Williamsburg, VA
Insane since: Aug 2002

IP logged posted posted 10-07-2002 02:52 Edit Quote

umm call me a noob cuz i am where in that script does the mainlogo.jpg part go... it makes sense and im confident it will work... maybe i just need a full page script to comprehend completely

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 10-07-2002 04:23 Edit Quote

In your doc, make
<body>
<div id="content"><img src="mainlogo.jpg" width="751" height="425" border="0" alt="" /></div>
</body>

That's all it takes. Adjust the width and height of the image AND the width & height of the div (in the style info) as needed.



[This message has been edited by Pugzly (edited 10-07-2002).]

chudzta
Bipolar (III) Inmate

From: Williamsburg, VA
Insane since: Aug 2002

IP logged posted posted 10-07-2002 22:02 Edit Quote

oo oo , smacks myself.. anxious when i saw the post didnt interpret the first line on the first post correctly, i understand now tyvm

Genevieve
Paranoid (IV) Inmate

From: Santa Clara, CA, USA
Insane since: Jul 2002

IP logged posted posted 10-09-2002 20:32 Edit Quote

Why couldn't you just use <img src="image here" id="content"> instead of putting it in the div?

Genevieve

Wowzers! o.O

Visit my cell! 754



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu