An HTML Problem That's Pissing Me Off

coreygeer

coreygeer

BANNED
Joined
Oct 30, 2007
Messages
526
Reaction score
955
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:
Advertise on BHW
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>
 
Meh tables.

Add a "margin-top: -25px;" to your div.adtopright and see how that works.
 
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>
 
fanthomas said:
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>
Click to expand...

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.
 
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>
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top