HTML Forum

**force** · 10-15-2008, 01:33 AM

ok im trying to make a site layout this i what i got so far http://down4whateva.com/prototype/index12.html ...and i wanna make each wanted picture a link to another page now heres the problem for the some reason the img's wont stay in place ..they look fine on my html editor but when i upload them and view them there not where i put them ...can any body help me what am i doing wrong

email/msn: vnunez86@live.com
aim:theone2929

**Brian07002** · 10-15-2008, 10:45 PM

Looks like your doing things the 'hard way' meaning your code has a bunch of   in them. What that means is that you are using the space bar key way too much to space out your elements...All you need to do is create a table layout, or use css to align your images with <div tags there are many tutorials on the web for this stuff.

Good Luck

**takita787** · 10-16-2008, 12:34 AM

Yeah. There are actually HTML table generators online. Do a quick google search, then use border=0 to hide the border/so its not an OBVIOUS table

**LadynRed** · 10-16-2008, 09:46 AM

GAAhh.. forget the tables !!! You have WAY more flexibility using CSS. I suggest you check out the stickies, there are several solutions for what you want to do.

**wayfarer07** · 10-16-2008, 10:39 AM

Good lord. No comment.

**Sean@WMS** · 10-18-2008, 04:31 PM

You definitely need to not use non-breaking spaces for laying things out.

You could do this rather easily with a table layout, but you might as well not start out old school and start learning standards complient layout using XHTML & CSS.

Here is an example that should get you started (you'll probably want to tweek around a bit more on margins & padding):

Code:

<!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>
<style type=text/css>
body {
 background-color: #000;
}
#container {
 margin: auto;
 padding: 38px 0 38px 0; /*top, right, bottom, left*/
 width: 640px;
 height: 400px;
 background-image: url(images/bg.JPG);
 background-repeat: no-repeat;
}
#row1 img, #row2 img{
 margin: 0 38px 0 38px;
 width: 137px;
 height: 162px;
}
#row2 {
 margin-top: 80px; /*subtract this from the 480px starting height of the container */
}
</style>
</head>
<body>
<div id="container">
 <div id="row1"><img/><img/><img/></div>
 <div id="row2"><img/><img/><img/></div>
</div>
</body>
</html>

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!