homepage Welcome to WebmasterWorld Guest from 54.196.62.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Lining up these photos
ThatsBoBo



 
Msg#: 4242061 posted 2:17 am on Dec 14, 2010 (gmt 0)

Hi all,

So in the below code, I'm trying to line up the top two images. They work fine, but every time I add the code for the image below the two at the top, the image to the right on the top moves to the right (away from the image on the top left) so they do not line up.

I want the two images on the top to line up right next to each other. I also want the image at the bottom to stay where it is.

If you remove the code for the larger image at the bottom, the two smaller images at the top pop back together.

What am I missing?

Thanks!

<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<center>
<span style="color: #000000; text-decoration: none; font-size: 11px; font-family: verdana, helvetica, sans serif;">Snippet here</span><br/><br/>
<table width="300" height="250" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="171" height="61">
<a href="http://www.google.com"><img style="display:block;" src="images/gif1.gif" width="171" height="61" border="0" alt="Logo"></a> </td>
<td width="129" height="61">
<img style="display:block;" src="images/gif2.gif" width="129" height="61" border="0" ></td></tr>
<tr valign="top">
<td width="399" height="149">
<img style="display:block;" src="images/gif3.gif" width="300" height="149" border="0" > </td></tr>

</table>
</center>
</body>
</html>

 

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4242061 posted 4:56 am on Dec 14, 2010 (gmt 0)

td width="399"

That's even wider than your declaration for the whole table - table width="300"

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4242061 posted 9:40 am on Dec 14, 2010 (gmt 0)

Hi there ThatsBoBo,

the table element should not be used for page layouts, that is not it's purpose. ;)


  1. Why tables for layout is stupid: problems defined, solutions offered [hotdesign.com]
  2. Ten ways to speed up the download time of your web pages [webcredible.co.uk]
  3. Nested Tables: About the (ab)use of tables as layout tools in webpages. [dorward.me.uk]
  4. Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS [phrogz.net]
  5. Why go table free? [workingwith.me.uk]
  6. Why avoiding tables (for layout) is important [davespicks.com]


I would suggest that you code it something like this...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>three images</title>

<style type="text/css">
#image-container {
width:300px;
margin:auto;
font-family:verdana,helvetica,sans serif;
font-size:11px;
color:#000;
}
#image-container span {
display:block;
margin-bottom:18px;
text-align:center;
}
#image-container img {
float:left;
border:0;
}
#image-1 {
width:171px;
height:61px;
}
#image-2 {
width:129px;
height:61px;
}
#image-3 {
width:300px;
height:149px;
}
</style>

</head>
<body>

<div id="image-container">

<span>Snippet here</span>

<a href="http://www.google.com/"><img id="image-1" src="images/gif1.gif" alt="Logo"></a>

<img id="image-2" src="images/gif2.gif" alt="">

<img id="image-3" src="images/gif3.gif" alt="">

</div>

</body>
</html>

birdbrain

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved