Topic: Centering Opening Logo (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=9537" title="Pages that link to Topic: Centering Opening Logo (Page 1 of 1)" rel="nofollow" >Topic: Centering Opening Logo <span class="small">(Page 1 of 1)</span>\
 
chudzta
Bipolar (III) Inmate

From: Williamsburg, VA
Insane since: Aug 2002

 posted posted 10-06-2002 21:12

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

 posted posted 10-06-2002 21:45

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

 posted posted 10-06-2002 22:58

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

 posted posted 10-07-2002 02:52

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

 posted posted 10-07-2002 04:23

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

 posted posted 10-07-2002 22:02

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

 posted posted 10-09-2002 20:32

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:


« Backwards — Onwards »

Show Forum Drop Down Menu