Results 1 to 3 of 3

Thread: relative centering in mainframe relative to window, or....

  1. #1
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default relative centering in mainframe relative to window, or....

    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">
    <!--
    body {
    background-image: url(GradientBackgoundMain.jpg);
    }
    body,td,th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11pt;
    }
    .style1 {font-size: 9pt}

    -->
    </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>

  2. #2
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  3. #3
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wink thank you!

    Thank you veronica!

    I had tried several variations on the "margin-left" code to no avail; maybe it was the fact that I was using an align rather than a style tag. In any case, thank you so much for your time.

    peace
    bugjah

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •