I always have trouble when I'm positioning an img in front of a background
If I put in an image in front of a <div>, then there's always this gap in after the image and before the division (in this case, "tabtail").
This is my page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>hi</title>
<style type="text/css">
#container{
width: 498px;
}
#tab1{
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab2{
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab3{
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tabtail{
height: 6px;
background-image: url(tabtail.bmp);
}
</style>
</head>
<body>
<div id="container">
<div id="tab1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1.bmp"></div>
<div id="tab2"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<div id="tab3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1content.bmp" name="tabcontent">
<div id="tabtail></div>
</body>
</html>
Here's the URL: <!-- m --><a class="postlink" href="http://thehiddengrotto.com/servertabs.html">http://thehiddengrotto.com/servertabs.html</a><!-- m -->
I can't seem to get that last border to appear right after the image.
Can anyone help me? nothing I try seems to work.By default, IMG's are in-line elements, so a newline right before or after may be treated as a space. Either make sure the end of the IMG tag and the start of the following DIV tag are on the same line with no space, or else style the IMG so that it is "display: block" (or float it left or right if that's more appropriate).Also, don't use *.bmp files, they are simply HUGE, use gif/png or jpg insteadHmm, I still can't get it to go.....
When I do "display: block", the image jumps out to the right, beyond the borders of the container div for some stupid reason. The "tabtail" is lined up right after the "tabcontent", though. It just isn't in the right spot...
I've even tried taking out the container, but it still does the exact same thing on the left of the page...just jumps out to the right...
I was so happy when I thought I had the solution too....
I updated my site to show what happens when I use block: <!-- m --><a class="postlink" href="http://thehiddengrotto.com/servertabs2.html">http://thehiddengrotto.com/servertabs2.html</a><!-- m -->
My page now looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>hi</title>
<style type="text/css">
#container{
margin: auto;
width: 498px;
}
#tab1 {
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab2 {
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab3 {
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#container img{
display: block;
}
#tabtail {
height: 6px;
background-image: url(tabtail.bmp);
}
</style>
</head>
<body>
<div id="container">
<div id="tab1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1.bmp"></div>
<div id="tab2"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<div id="tab3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<div id="tabcontent"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1content.bmp"></div>
<div id="tabtail"></div>
</div>
</body>
</html>Also, don't use *.bmp files, they are simply HUGE, use gif/png or jpg instead
I second this. I don't want to wait for those husge files to load... and I'm sure no-one else does either.#tab2 img{
display: block;
}
instead of
#container img{
display: block;
}Try,
<img src=http://www.webdeveloper.com/forum/archive/index.php/"something.jpg" align="left" hspace="0">
<div>
something
</div>
Kiat Hau
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Learn how to build a web site
If I put in an image in front of a <div>, then there's always this gap in after the image and before the division (in this case, "tabtail").
This is my page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>hi</title>
<style type="text/css">
#container{
width: 498px;
}
#tab1{
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab2{
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab3{
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tabtail{
height: 6px;
background-image: url(tabtail.bmp);
}
</style>
</head>
<body>
<div id="container">
<div id="tab1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1.bmp"></div>
<div id="tab2"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<div id="tab3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1content.bmp" name="tabcontent">
<div id="tabtail></div>
</body>
</html>
Here's the URL: <!-- m --><a class="postlink" href="http://thehiddengrotto.com/servertabs.html">http://thehiddengrotto.com/servertabs.html</a><!-- m -->
I can't seem to get that last border to appear right after the image.
Can anyone help me? nothing I try seems to work.By default, IMG's are in-line elements, so a newline right before or after may be treated as a space. Either make sure the end of the IMG tag and the start of the following DIV tag are on the same line with no space, or else style the IMG so that it is "display: block" (or float it left or right if that's more appropriate).Also, don't use *.bmp files, they are simply HUGE, use gif/png or jpg insteadHmm, I still can't get it to go.....
When I do "display: block", the image jumps out to the right, beyond the borders of the container div for some stupid reason. The "tabtail" is lined up right after the "tabcontent", though. It just isn't in the right spot...
I've even tried taking out the container, but it still does the exact same thing on the left of the page...just jumps out to the right...
I was so happy when I thought I had the solution too....
I updated my site to show what happens when I use block: <!-- m --><a class="postlink" href="http://thehiddengrotto.com/servertabs2.html">http://thehiddengrotto.com/servertabs2.html</a><!-- m -->
My page now looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>hi</title>
<style type="text/css">
#container{
margin: auto;
width: 498px;
}
#tab1 {
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab2 {
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#tab3 {
width: 166px;
height: 17px;
background-color: black;
float: left;
text-align: center;
}
#container img{
display: block;
}
#tabtail {
height: 6px;
background-image: url(tabtail.bmp);
}
</style>
</head>
<body>
<div id="container">
<div id="tab1"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1.bmp"></div>
<div id="tab2"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<div id="tab3"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab2.bmp"></div>
<div id="tabcontent"><img src=http://www.webdeveloper.com/forum/archive/index.php/"tab1content.bmp"></div>
<div id="tabtail"></div>
</div>
</body>
</html>Also, don't use *.bmp files, they are simply HUGE, use gif/png or jpg instead
I second this. I don't want to wait for those husge files to load... and I'm sure no-one else does either.#tab2 img{
display: block;
}
instead of
#container img{
display: block;
}Try,
<img src=http://www.webdeveloper.com/forum/archive/index.php/"something.jpg" align="left" hspace="0">
<div>
something
</div>
Kiat Hau
<!-- m --><a class="postlink" href="http://webidiot.blogspot.com">http://webidiot.blogspot.com</a><!-- m -->, Learn how to build a web site