I have a large image at the top of my site that I have cut up to 6 smaller images.
I am trying to code without using tables for layout purpose.
What is the best way to code this in css.
Not I tried it in div's or just with the image tag with no margin or paddign but there is still showing a small space between the lines.
What's the best way to do it?
Is it better to just do it as one big background image with text and links in appropriate places? What do you css experts suggest?Either method works, but I would go for the seperate images:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>align images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#topimages {
width:375px; /* width of 3 images*/
overflow:hidden; /* clear the float */
}
#topimages img {float:left;} /* remove image gaps */
</style>
</head>
<body>
<div id="topimages">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
</div>
</body>
</html>that put each one on a separate line...
for example let's take teh following:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/2_1.jpg" width="426" height="71" border="0"><a href=freequote.asp><img src="images/2-2.jpg" width="284" height="71" border="0"></a><img src="images/3_1.jpg" width="284" height="55" border="0"><img src="images/3-2.jpg" width="434" height="55" border="0">
between the 2 lines is about a pixel of space -- how can i get rid of that<style type="text/css">
#topimages {
width:XXXpx; /* change this width 710px ??? */
overflow:hidden; /* clear the float */
}
#topimages img {float:left;} /* remove image gaps */
</style>when i do that -- it puts the first one on it's own line (although 710 is enough) adn then then the next 2 on the next line. and last one on it's own line.
(i'm starting with just 2 lines.)width:718px;
I am trying to code without using tables for layout purpose.
What is the best way to code this in css.
Not I tried it in div's or just with the image tag with no margin or paddign but there is still showing a small space between the lines.
What's the best way to do it?
Is it better to just do it as one big background image with text and links in appropriate places? What do you css experts suggest?Either method works, but I would go for the seperate images:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>align images</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#topimages {
width:375px; /* width of 3 images*/
overflow:hidden; /* clear the float */
}
#topimages img {float:left;} /* remove image gaps */
</style>
</head>
<body>
<div id="topimages">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
<img alt="apple" src=http://www.webdeveloper.com/forum/archive/index.php/"apple.jpg" height="83" width="125">
</div>
</body>
</html>that put each one on a separate line...
for example let's take teh following:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/2_1.jpg" width="426" height="71" border="0"><a href=freequote.asp><img src="images/2-2.jpg" width="284" height="71" border="0"></a><img src="images/3_1.jpg" width="284" height="55" border="0"><img src="images/3-2.jpg" width="434" height="55" border="0">
between the 2 lines is about a pixel of space -- how can i get rid of that<style type="text/css">
#topimages {
width:XXXpx; /* change this width 710px ??? */
overflow:hidden; /* clear the float */
}
#topimages img {float:left;} /* remove image gaps */
</style>when i do that -- it puts the first one on it's own line (although 710 is enough) adn then then the next 2 on the next line. and last one on it's own line.
(i'm starting with just 2 lines.)width:718px;