I've been reading a lot of posts saying tables are not good for positioning content. So I tried to read up on CSS and see what I can do (Or in this case what I can not).
Basically I am trying to get 8 images positioned so it looks like one big image. Not a problem with tables but a pain with CSS. I've played around with the values and can never get it right on different browsers. The way it stands now, it works fairly well with Firefox, not at all with IE, Netscape, and Opera.
Any input?
<html>
<head>
<style type="text/css">
h1
{
position: absolute;
top: 12px;
left: 0px
}
h2
{
position: absolute;
top: 20px;
left: 0px
}
h3
{
position: absolute;
top: 21px;
left: 183px
}
h4
{
position: absolute;
top: 209px;
left: 0px
}
h5
{
position: absolute;
top: 209px;
left: 183px
}
h6
{
position: absolute;
top: 274px;
left: 0px
}
h7
{
position: absolute;
top: 299px;
left: 75px
}
h8
{
position: absolute;
top: 299px;
left: 190px
}
h9
{
position: absolute;
top: 299px;
left: 283px
}
</style>
</head>
<body>
<h1>TESTING POSITIONING</h1>
<h2>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_1.jpg" border="0" alt="none" width="183" height="190"></h2>
<h3>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_2.jpg" alt="none" width="187" height="190"></h3>
<h4>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_3.jpg" alt="none" width="183" height="69"></h4>
<h5>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_4.jpg" alt="none" width="187" height="69"></h5>
<h6>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/bpicture_fill.gif" width="75" height="19" alt="none"></h6>
<h7>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/termsconditions.gif" width="115" height="19" alt="none"></h7>
<h8>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/siterequest.gif" width="93" height="19" alt="none"></h8>
<h9>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/contactus.gif" width="87" height="19" alt="none"></h9>
</body>
</html>Before gettting into "how" I'm curious about "why".
First, there are no <h7+>.
Second, I really doubt those images represent headings...
Good CSS presentation starts with a properly marked-up content.Bad markup. There's no apparent reason for the separate images but anyway here's a way to do it better. Pardon the strange formatting; that's thanks to Tidy as I had it strip out unmatched tags after it hacked it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TESTING POSITIONING</title>
<style type="text/css">
img { display: block; float:left; }
#imageblock { width: 400px; }
</style>
</head>
<body>
<h1>TESTING POSITIONING</h1>
<div id="imageblock">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_1.jpg" border=
"0" alt="none" width="183" height="190"> <img src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/index_image_2.jpg" alt="none" width=
"187" height="190"> <img src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/index_image_3.jpg" alt="none" width=
"183" height="69"> <img src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/index_image_4.jpg" alt="none" width=
"187" height="69"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/bpicture_fill.gif" width="75"
height="19" alt="none"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/termsconditions.gif" width="115"
height="19" alt="none"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/siterequest.gif" width="93" height=
"19" alt="none"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/contactus.gif" width="87" height=
"19" alt="none">
</div>
</body>
</html>Thanks Ray, that works perfect. This was just something that I was playing around with, however in normal situation do you think it is better not to slice up a larger image?
I was under the impression that a large image should be sliced in order to make it easier for a browser to load it - especially 28k & 56k connections.
Then again I've been doing this for 6-months.If you slice the image up into little ones, each new image has headers in it, this will actually increase what will need to be Download ed. Also, multiple requests to the server need to be made with many images.
I find it best to just keep the image as a whole, and also if the image is not content I'd set it as a background image for some element (eg. the body).As lavalamp says, keep the images whole and reuse them as much as possible throughout the site. The browser only loads them once. That's also the reason to outboard generally used styles and javascript.
Basically I am trying to get 8 images positioned so it looks like one big image. Not a problem with tables but a pain with CSS. I've played around with the values and can never get it right on different browsers. The way it stands now, it works fairly well with Firefox, not at all with IE, Netscape, and Opera.
Any input?
<html>
<head>
<style type="text/css">
h1
{
position: absolute;
top: 12px;
left: 0px
}
h2
{
position: absolute;
top: 20px;
left: 0px
}
h3
{
position: absolute;
top: 21px;
left: 183px
}
h4
{
position: absolute;
top: 209px;
left: 0px
}
h5
{
position: absolute;
top: 209px;
left: 183px
}
h6
{
position: absolute;
top: 274px;
left: 0px
}
h7
{
position: absolute;
top: 299px;
left: 75px
}
h8
{
position: absolute;
top: 299px;
left: 190px
}
h9
{
position: absolute;
top: 299px;
left: 283px
}
</style>
</head>
<body>
<h1>TESTING POSITIONING</h1>
<h2>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_1.jpg" border="0" alt="none" width="183" height="190"></h2>
<h3>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_2.jpg" alt="none" width="187" height="190"></h3>
<h4>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_3.jpg" alt="none" width="183" height="69"></h4>
<h5>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_4.jpg" alt="none" width="187" height="69"></h5>
<h6>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/bpicture_fill.gif" width="75" height="19" alt="none"></h6>
<h7>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/termsconditions.gif" width="115" height="19" alt="none"></h7>
<h8>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/siterequest.gif" width="93" height="19" alt="none"></h8>
<h9>
<img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/contactus.gif" width="87" height="19" alt="none"></h9>
</body>
</html>Before gettting into "how" I'm curious about "why".
First, there are no <h7+>.
Second, I really doubt those images represent headings...
Good CSS presentation starts with a properly marked-up content.Bad markup. There's no apparent reason for the separate images but anyway here's a way to do it better. Pardon the strange formatting; that's thanks to Tidy as I had it strip out unmatched tags after it hacked it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TESTING POSITIONING</title>
<style type="text/css">
img { display: block; float:left; }
#imageblock { width: 400px; }
</style>
</head>
<body>
<h1>TESTING POSITIONING</h1>
<div id="imageblock">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"http://mmarzejon.web.aplus.net/images/index_image_1.jpg" border=
"0" alt="none" width="183" height="190"> <img src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/index_image_2.jpg" alt="none" width=
"187" height="190"> <img src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/index_image_3.jpg" alt="none" width=
"183" height="69"> <img src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/index_image_4.jpg" alt="none" width=
"187" height="69"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/bpicture_fill.gif" width="75"
height="19" alt="none"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/termsconditions.gif" width="115"
height="19" alt="none"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/siterequest.gif" width="93" height=
"19" alt="none"> <img border="0" src=http://www.webdeveloper.com/forum/archive/index.php/
"http://mmarzejon.web.aplus.net/images/contactus.gif" width="87" height=
"19" alt="none">
</div>
</body>
</html>Thanks Ray, that works perfect. This was just something that I was playing around with, however in normal situation do you think it is better not to slice up a larger image?
I was under the impression that a large image should be sliced in order to make it easier for a browser to load it - especially 28k & 56k connections.
Then again I've been doing this for 6-months.If you slice the image up into little ones, each new image has headers in it, this will actually increase what will need to be Download ed. Also, multiple requests to the server need to be made with many images.
I find it best to just keep the image as a whole, and also if the image is not content I'd set it as a background image for some element (eg. the body).As lavalamp says, keep the images whole and reuse them as much as possible throughout the site. The browser only loads them once. That's also the reason to outboard generally used styles and javascript.