relative centering in mainframe relative to window, or.... [Archive]

bugjah

05-13-2007, 07:45 AM

Hi

Apologies for being a novice, so my lingo may be less than precise.

Let's say I have a three frame layout on my website: top frame, left frame, main frame.

The title in the top frame is centered, and when I resize the browser, it keeps the title centered in the browser. that is just fine.

The left frame has about a 120 pixel wide nav bar, which is fine.

The problem is main frame. In the home page, it is a simple layout: picture ("scary.jpg") centered with caption. Problem is that the picture is centered relative to the main frame, so it is not centered in the same alignment with the title. This looks crappy to me. What I want to do is center the image in the main frame so that it is center aligned relative to the entire width of the window (rather than just the main frame width). That way, as user resizes window, the image in the main frame will (at least up to a point) remain centered relative to the title.

Does that make sense?

Here is the code for that mainframe as it currently (and crappily) exists. Sorry that this is not on the web yet, so I can't show you the whole page.

peace
bugjah

=======

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style></head>

<body>
<div align="center">
<img src="Scary.jpg" /></div>
<div align="right" class="style1"><a href="http://stepitup2007.org/" target="_top">Step It Up!</a> rally - Akron, Ohio, USA<br />National Day of Climate Action, 14 April, 2007</div>
</body>
</html>

Veronica

05-13-2007, 10:55 PM

OK, first - to center a div, you don't use align=center. You center a div with:

<div style="text-align: center;">

Text-align centers the contents of the div, even it it's more than text. Or you give the div a class, and then use the same text-align for that class in your styles in the head.

As for the next part, you would move the left margin in as much as the width of your left frame. So if the left frame is 120 px, you would use:

<div style="text-align: center; margin-left: 120px">
<img src="Scary.jpg" />
</div>