1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

An HTML Problem That's Pissing Me Off

Discussion in 'Web Design' started by coreygeer, Jan 26, 2010.

  1. coreygeer

    coreygeer BANNED BANNED

    Joined:
    Oct 30, 2007
    Messages:
    527
    Likes Received:
    931
    This is a really simple task and it's beyond pissing me off because it won't work.

    I need images lined up beside each other. I've mapped out the website layout and every image and how tall/wide they need to be. They all need to be aligned on top.

    Here's exactly what I need:
    A 200x200 picture aligned to the top left of the page (the logo)
    5 100x100 buttons that will serve as image links
    5 100x100 buttons that will serve as image links in a new row
    A 200x200 Iframe script (an ad)

    I need these all to be lined up at the top (the logo on the left) (the buttons in 2 separate rows in the middle) (and the ad on the right)

    The total width of those will be 900 and I know that's not too long. I have tried everything in my knowledge, I've broken my desk and I spent all day (literally) yesterday trying to figure this out.

    UPDATE: Using CSS i've managed to do most of it. I still can't the Iframe ad to line up to the right though.

    UPDATE 2: Don't open this if there's kids around.
    Code:
    http://www.eslutsworld.com
    is the website I'm trying to make shit line up for. Is it working for you guys?

    Here's the code.

    Code:
    <style type="text/css">
    <!--
    body {
    	background-color: #000;
    }
    -->
    div.logo {
    	float:left;
    }
    div.buttons {
    	float:inherit;
    }
    div.adtopright {
    	float:right;
    }
    </style></head>
    <body>
    
    <div class="logo">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/logoimage will go here.gif">
    </div>
    <div class="buttons">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image1.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image2.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image3.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image4.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image5.gif"/>
    </div>
    <div class="buttons">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image6.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image7.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image8.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image9.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image10.gif"/>
    </div>
    <div class="adtopright">
    <iframe ad which is 200 x 252 will go here></iframe>
    </div>
    </body>
     
    Last edited: Jan 26, 2010
  2. fanthomas

    fanthomas Registered Member

    Joined:
    Jan 25, 2010
    Messages:
    98
    Likes Received:
    31
    three column table will work

    Code:
    <style type="text/css">
    <!--
    body {
        background-color: #000;
    }
    -->
    div.logo {
        float:right;
    }
    div.buttons {
        float:inherit;
    }
    div.adtopright {
        float:left;
    }
    </style>
    </head>
    <body topmargin="0" leftmargin="0">
    <table width="100%" border="0">
      <tr>
        <td width="15%" valign="top"><div class="logo">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/logoimage will go here.gif">
    </div>
    </td>
        <td width="54%" valign="top"><div class="buttons">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image1.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image2.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image3.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image4.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image5.gif"/>
    </div>
    <div class="buttons">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image6.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image7.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image8.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image9.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image10.gif"/>
    </div></td>
        <td width="31%" align="left" valign="top"><div class="adtopright">
    <iframe ad which is 200 x 252 will go here></iframe>
    </div></td>
      </tr>
    </table>
    
    
    </body>
     
    • Thanks Thanks x 1
  3. MuonTrail

    MuonTrail Registered Member

    Joined:
    Mar 5, 2009
    Messages:
    96
    Likes Received:
    93
    Meh tables.

    Add a "margin-top: -25px;" to your div.adtopright and see how that works.
     
  4. warrior skunk

    warrior skunk Newbie

    Joined:
    Sep 1, 2009
    Messages:
    40
    Likes Received:
    22
    If you think that you want to stick with the CSS the following code will work as well. Just make sure that in your next DIV you clear the float with "float: clear"

    Code:
    <style type="text/css">
    <!--
    body {
        background-color: #000;
    }
    -->
    div.logo {
        float:left;
    }
    div.buttons {
        float:left;
    }
    div.adtopright {
        float:left;
    }
    </style></head>
    <body>
    
    <div class="logo">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/logoimage will go here.gif">
    </div>
    <div class="buttons">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image1.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image2.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image3.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image4.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image5.gif"/>
    <br />
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image6.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image7.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image8.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image9.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image10.gif"/>
    </div>
    <div class="adtopright">
    <iframe ad which is 200 x 252 will go here></iframe>
    </div>
    </body>
     
  5. coreygeer

    coreygeer BANNED BANNED

    Joined:
    Oct 30, 2007
    Messages:
    527
    Likes Received:
    931
    I had to edit the number a little but it worked almost perfectly. It's putting a pretty big gap on widescreen computers from the ad to the buttons but I don't care. It's working for now and that's all that matters.
     
  6. fanthomas

    fanthomas Registered Member

    Joined:
    Jan 25, 2010
    Messages:
    98
    Likes Received:
    31
    well right now the table is using percents to define its widths so that it stretches across whatever it's contained inside, even when the browser zooms out.

    if you want to fix the spacing that's happening, instead of using percents to define the widths, use actual numbers, ie;

    Code:
    <style type="text/css">
    <!--
    body {
        background-color: #000;
    }
    -->
    div.logo {
        float:right;
    }
    div.buttons {
        float:inherit;
    }
    div.adtopright {
        float:left;
    }
    </style>
    </head>
    <body topmargin="0" leftmargin="0">
    <table width="100%" border="0">
      <tr>
        <td width="57" valign="top"><div class="logo">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/logoimage will go here.gif">
    </div>
    </td>
        <td width="408" valign="top"><div class="buttons">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image1.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image2.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image3.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image4.gif" >
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image5.gif"/>
    </div>
    <div class="buttons">
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image6.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image7.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image8.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image9.gif"/>
    <img src="http://www.blackhatworld.com/blackhat-seo/images/image10.gif"/></div></td>
        <td width="531" align="left" valign="top"><div class="adtopright">
    <iframe ad which is 200 x 252 will go here></iframe>
    </div></td>
      </tr>
    </table>
    
    
    </body>