SitePoint Sponsor

User Tag List

Results 1 to 25 of 37

Threaded View

  1. #1
    SitePoint Enthusiast semicolon's Avatar
    Join Date
    Mar 2010
    Posts
    86
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Cool YELCHH! Help me AUTO-RATIO & center? It's just horrible (margins, widths, IMG) . . .

    It validates; it just looks like crap.

    So the idea here is I'd like all the elements in this page centered, and then have the two tables — directly above and directly below the dolphin image — to scale to whatever the dolphin image, including it's ridge border is rendering at.

    At first I was wasting time setting up width percentages for everything, when it dawned on me . . . a more rational approach would be to just set %-based margins at the outset, and let everything "expand" to fill the container. Well, yes, but the problem is that the
    1. MUSHROOMS
    2. PINK PLAID
    3. MOTORCYCLE
    4. FALL LEAVES
    I don't want to fill 100% of the space — only the maximum widths that I've defined.

    And the other problem is evident the minute you look at the page: The centering is totally wrong. Yelchh! Man, I've tried everything I'm tellin' ya! At first I thought this had something to do with the "44px" border I have around the dolphins. Tried a negative margin (PHHHHLTTT! lol). Tried the margin "auto" technique. No go. I'm just out of tweaks and I know there is something fatally wrong here, because it's obvious these graphics are trying to squeeze onto the same line as the one prior . . . and throwing themselves off-center in the course of flowing over. Oh yes, I get that bit.

    Well, here she is. HELP?

    s


    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>TESTING</title>
    </head>
    <!-- ++ -->
    <body style="FONT-FAMILY: HELVETICA, ARIAL, SANS-SERIF;
        background-image:
        url(http://25.media.tumblr.com/tumblr_medeoycBYZ1qcdtsho1_400.jpg);
        background-repeat: repeat;">
    <div style="margin-top: 76PX; margin-bottom: 50PX; margin-left: 16%;
          margin-right: 16%;" align="CENTER">
    <!-- ++ -->
    <img style="width: 100%; max-width: 500PX"
    src="http://www.leevalley.com/en/images/item/Gardening/lc109s4.jpg" alt="">
          <div style="margin-top: 35PX; margin-left: -44PX; margin-right:
            0PX; margin-bottom: 0PX;">
    <img style="width: 100%; max-width: 450PX; BORDER: 4PX DASHED BLACK; padding: 25PX; background-color: WHITE;"
    src="http://catalog.carlislefsp.com/images/450/10635.jpg" alt="">
          </div>
    <!-- ++ -->
          <table style="margin-top: 35PX; width: 100%; max-width: 738PX;
            text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td style="vertical-align: MIDDLE;" valign="MIDDLE">
                  <font color="BLACK">XXX X</font><br>
                </td>
                <td valign="MIDDLE">
                  <font color="red"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">
                  <font color="BLACK">XXXXXXX<br>
                    XXXX<font color="red"><b>XXXXX</b></font>
                  </font>
                </td>
                <td align="RIGHT" valign="MIDDLE" width="120">
                  <font color="BLACK">XXXXXXXXX<br>
                    XXXXX</font>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td valign="MIDDLE">
                  <font color="RED"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">
                  <font color="BLACK">XXXXXXX<br>
                    XXXX<font color="red"><b>XXXXX</b></font>
                  </font>
                </td>
                <td align="right" valign="MIDDLE" width="120">
                  <font color="BLACK">XXXXXXXXX<br>
                    XXXXX</font>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td valign="MIDDLE">
                  <font color="RED"><b>XXXXXXX</b></font><br>
                </td>
                <td valign="MIDDLE">
                  <b>XXXXXXXXXXX</b><br>
                  XXXXXXXXXXX
                </td>
                <td valign="MIDDLE">XXXXXXX<br>
                  XXXX<font color="red"><b>XXXXX</b></font>
                </td>
                <td align="RIGHT" valign="MIDDLE" width="120">XXXXXXXXX<br>
                  XXXXX<br>
                </td>
              </tr>
              <tr>
                <td valign="MIDDLE"><font color="BLACK">XXX X</font>
                </td>
                <td bgcolor="#FFFFD7" valign="MIDDLE">
                  <b>XXXXXXX</b><br>
                  <br>
                  <div align="CENTER">
    <img src="http://th05.deviantart.net/fs71/150/f/2012/117/2/7/vintage_edit_by_frauleinmakeup-d4xrfbh.jpg"
                      alt="" height="150" width="84"><br>
                  </div>
                </td>
                <td align="CENTER" bgcolor="FFFFD7" valign="MIDDLE">
                  <div align="LEFT">
                    <b>XXXXXXXXXXXXXXXXXX<br>
                      XXXXXXXXXXXXXXXXXX</b><br>
                    <br>
                  </div>
                  <big>
                    <big>
                      <b>XXXXXXXX<br>
                        XXXXXXXXXX<br>
                        XXXXXXXXXXXXX<br>
                        XXXXXX</b><br>
                    </big>
                  </big>
                  XXXXXXXXXXXXXXX<br>
                  XXXXXXX<br>
                </td>
                <td bgcolor="#FFFFD7" valign="MIDDLE">XXXXXXX<br>
                  XXXX<b>XXXXX</b><br>
                </td>
                <td align="RIGHT" bgcolor="FFFFD7" valign="MIDDLE"
                  width="120">
                  <span style="color: BLACK; font-size: 24px; font-family:
                    LUCIDA CONSOLE, MONOSPACE; font-weight: bold;">
                    <font style="background-color: YELLOW;"> XXXXX<br>
                      XXXXXX<br>
                      <br>
                      XXXXX</font>
                  </span>
                </td>
              </tr>
              <tr>
                <td colspan="4" align="right" valign="MIDDLE">
    <img src="http://pikt.org/doc/images/bak/PointingHandBlueTintTransparent.gif"
                    alt="" height="18" width="23">
                </td>
                <td align="RIGHT" bgcolor="BLACK" valign="MIDDLE"
                  width="120">
                  <font style="background-color: YELLOW; font-size: 24px;
                    font-family: LUCIDA CONSOLE, MONOSPACE;
                    font-weight: bold;"> XXXXXX </font>
                </td>
              </tr>
            </tbody>
          </table>
    <!-- ++ -->
          <div style="margin-top: 35PX; margin-left: 44PX; margin-right:
            44PX; margin-bottom: 0PX;">
    <img style="WIDTH: 100%; max-width: 640PX; BORDER: 44PX RIDGE GREY; OUTLINE-STYLE: OUTSET;"
    src="http://www.ntnews.com.au/images/uploadedfiles/editorial/pictures/2012/02/14/dolphin.jpg" alt="">
          </div>
    <!-- ++ -->
          <table style="margin-top: 35PX; width: 100%; max-width: 738PX;
            text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td valign="TOP">
                  <span style="color: BLACK; font-size: 24px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;
                    font-weight: bold;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
                  </span>
                  <span style="color: RED; font-size: 20px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br>
                  </span>
                </td>
              </tr>
              <tr>
                <td valign="TOP">
                  <span style="color: BLACK; font-size: 16px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                    VXX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX <font
                      style="background-color: LIGHTGREY;">XX XXXXX XXX
                      XXXXXXXX XXXX X XXXXXX <b>XX XXXXX XXX XXXXXXXX XXXX
                        X XXXXXX </b>XXXXX <b>XX XXXXX XXX XXXXXXXX XXXX X
                        XXXXXX</b> XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</font>
                    XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                    XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                    XXXXXXXX XXXX X XXXXXX</span>
                  <span style="color: BLACK; font-size: 16px; font-family:
                    LUCIDA CONSOLE, MONOSPACE;">
                  </span>
                  <br>
                </td>
              </tr>
            </tbody>
          </table>
    <!-- ++ -->
          <table style="margin-top: 35PX; WIDTH: 100%; max-width: 520PX;
            text-align: left; margin-left: auto; margin-right: auto;"
            bgcolor="WHITE" border="5" cellpadding="10" cellspacing="2">
            <tbody>
              <tr>
                <td style="vertical-align: MIDDLE;">
    <img style="WIDTH: 100%; max-width: 518PX;" src="http://1.bp.blogspot.com/_cyJIi6nkVWo/TRjIhDKzgxI/AAAAAAAAAy0/c46k0Qg7ftI/s1600/5+REVs.jpg"
                    alt="">
                </td>
              </tr>
              <tr>
                <td style="vertical-align: MIDDLE;">
                  <table style="width: 518px;" border="0" cellpadding="10"
                    cellspacing="0">
                    <tbody>
                      <tr>
                        <td style="text-align: left; vertical-align:
                          MIDDLE;">
                          <div style="text-align: CENTER;">
                            <font style="FONT-FAMILY:
                              HELVETICA,ARIAL,SANS-SERIF;">
                              <font style="background-color: CYAN;"
                                color="BLACK" size="5">
                                <strong>
                                  XX XXXXX XXX XXXXXXXX XX<br>
                                  XXXXXXXX <span style="color: RED;">XXXXXXXXXXXX</span>
                                  XXXXXXX
                                </strong>
                              </font>
                            </font>
                          </div>
                          <br>
                          <span style="font-size: 16px; font-family:
                            HELVETICA, ARIAL, SANS-SERIF;">
                            <font color="#FF0099"><b>XX XXXXX XXX XXXXXXXX
                                XXXX X XXXXXX</b></font><b> XX XXXXX XXX
                              XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX
                              XXXX X XXXXXX</b>&nbsp;
                            WXX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
                            XXX XXXXXXXX XXXX X XXXXXX <font
                              color="#3366FF">XX XXXXX XXX XXXXXX</font> <font
                              color="#3333FF"><b>XXXXXXXXXXXXX</b></font> XX
                            XXXXX XXX XXXXXXXX XXXX X XXXXXX <font
                              color="#FF0099">XX XXXXX XXX XXXXXXXX XXXX X
                              XXXXX</font>
                          </span>
    <!-- ++ -->
                          <table style="margin-top: 20PX;" align="CENTER" border="0" cellpadding="2" cellspacing="2">
                            <tbody>
                              <tr>
                                <td align="CENTER">
    <img src="http://www.qpstore.com/images/img_27.gif" alt="" border="0" height="33" width="88">
                                </td>
                              </tr>
                              <tr>
                                <td align="CENTER" valign="TOP">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/life-insurance/images/icon-hospital.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-payperday.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-preexist.gif" alt="" border="0" height="23" width="37">
    <img src="http://www.esker.com/common/assets/global/icon_delivery.png" alt="" border="0" height="23" width="37">
    <img src="http://www.icicibank.com/Personal-Banking/insurance/general-insurance/images/icon-disease.gif" alt="" border="0" height="23" width="37">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>
    <!-- ++ -->
    <img src="http://1.bp.blogspot.com/_Q0nt60mY35Y/St0lKLzl9pI/AAAAAAAAEVY/2knB8mkdg10/s400/eb335J09autumn-leaves.jpg" alt="" height="275" width="400">
    <!-- ++ -->
          <table style="margin-top: 20PX; WIDTH: 100%; max-width: 518PX;"
            border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td align="CENTER" valign="MIDDLE">
                  <font style="background-color: WHITE; font-size: 14PX;"
                    color="#444444">XX XXXXX XXX XXXXXXXX XXXX X XXXXXX</font>
                </td>
              </tr>
              <tr>
                <td style="padding: 0PX 5PX 0PX 5PX;" align="CENTER"
                  bgcolor="WHITE" valign="MIDDLE">
                  <font style="font-size: 10PX;" color="#666666">
                    <b>XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX XXX
                      XXXXXXXX XXXX X XXXXXX XX XXXXX XXX XXXXXXXX XXXX X
                      XXXXXX XX XXXXX XXX XXXXXXXX XXXX X XXXXXX XX XXXXX
                      XXX XXXXXXXX XXXX X XXXXXX</b></font>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>
    </html>
    Last edited by semicolon; Jan 6, 2013 at 16:50. Reason: Clarifying lining up the two tables around DOLPHIN


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
  •