...

View Full Version : div displays a weird view



BarrMan
09-21-2007, 12:40 PM
On this page www.kassiff.com/example/index.html you'll see that the black div instead of showing after the images (a row or two under), shows behind them.
Here's the code:


<HTML><TITLE>Example</TITLE>
<span id="im_container">
<div dir="rtl" style="float: left;">
<a id="anchor0" href="javascript: changePic('CRW_0003.jpg');" onmouseover="changeInfo(0);"><img id="image0" src="../pictures/CRW_0003.jpg" border="0" height="100" width="100"></a>&nbsp;<a id="anchor1" href="javascript: changePic('CRW_0018.jpg');" onmouseover="changeInfo(1);"><img id="image1" src="../pictures/CRW_0018.jpg" border="0" height="100" width="100"></a>&nbsp;<a id="anchor2" href="javascript: changePic('CRW_0031.jpg');" onmouseover="changeInfo(2);"><img id="image2" src="../pictures/CRW_0031.jpg" border="0" height="100" width="100"></a>&nbsp;<a id="anchor3" href="javascript: changePic('CRW_0040.jpg');" onmouseover="changeInfo(3);"><img id="image3" src="../pictures/CRW_0040.jpg" border="0" height="100" width="100"></a>&nbsp;<div id="information" style="float: left;"><a onclick="move('right',5); return false;" href="#"> 4</a>&nbsp;<a onclick="move('right',1); return false;" href="#">Previous</a>&nbsp;Images 1-4 of 28&nbsp;&nbsp;<a onclick="move('left',1); return false;" href="#">Next</a>&nbsp;<a onclick="move('left',5); return false;" href="#">Next 4</a>
</div>
</div>
</span>
<br>
<div id="info" style="border: 2px dashed white; margin: 0px; padding: 0px; background-color: black; color: white; font-family: tahoma; font-size: 10pt; display: block; width: 400px;"><span><img src="../pictures/CRW_0003.jpg" height="100" width="100"></span><span>No info</span></div>

</BODY></HTML>

abduraooft
09-21-2007, 12:45 PM
Why did you omit the doctype and other markup rules?

BarrMan
09-21-2007, 01:01 PM
Because it's a test page.. In the real page you won't see it clearly but I'll add it in the new page which is www.kassiff.com/example/test.html

And the new code is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<span id="im_container"><div dir="rtl" style="float: left;"><a id="anchor0" href="javascript: changePic('CRW_0003.jpg');" onmouseover="changeInfo(0);"><img id="image0" src="../pictures/CRW_0003.jpg" border="0" height="100" width="100"></a>&nbsp;<a id="anchor1" href="javascript: changePic('CRW_0018.jpg');" onmouseover="changeInfo(1);"><img id="image1" src="../pictures/CRW_0018.jpg" border="0" height="100" width="100"></a>&nbsp;<a id="anchor2" href="javascript: changePic('CRW_0031.jpg');" onmouseover="changeInfo(2);"><img id="image2" src="../pictures/CRW_0031.jpg" border="0" height="100" width="100"></a>&nbsp;<a id="anchor3" href="javascript: changePic('CRW_0040.jpg');" onmouseover="changeInfo(3);"><img id="image3" src="../pictures/CRW_0040.jpg" border="0" height="100" width="100"></a>&nbsp;</div><div id="information" style="float: left;"><a onclick="move('right',5); return false;" href="#"> 4</a>&nbsp;<a onclick="move('right',1); return false;" href="#">Previous</a>&nbsp;Images 1-4 of 28&nbsp;&nbsp;<a onclick="move('left',1); return false;" href="#">Next</a>&nbsp;<a onclick="move('left',5); return false;" href="#">Next 4</a></div></span>
<script type="text/javascript">
im_initImgs();
</script>
<br>
<div id="info" style="border: 2px dashed white; margin: 0px; padding: 0px; background-color: black; color: white; font-family: tahoma; font-size: 10pt; display: block; width: 400px;"><span><img src="../pictures/CRW_0003.jpg" height="100" width="100"></span><span>No info</span></div>

</BODY></HTML>

I've just made it easier for you to see everything.

Now it works fine but just in the new window I've created. I still have the same problem in my main page. I need to figure it out before I post my problem again since I can't send you the whole gallery script I've made.

BarrMan
09-21-2007, 01:20 PM
Now you can see it.. It worked before because the images were not found but now I added the missing images to the server and you can see now the problem.
I'm just working now on writing the code ordered in here so you could see it clearly and will post it right away.

The current link for the problem is: www.kassiff.com/eng/test.html

The ordered code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Example</TITLE>
</HEAD>
<span id="im_container">
<div dir="rtl" style="float: left;">
<a id="anchor0" href="javascript: changePic('orit10.jpg');" onmouseover="changeInfo(0);"><img id="image0" src="../pictures/orit101b.jpg" border="0" height="100" width="100"></a>&nbsp;
<a id="anchor1" href="javascript: changePic('CRW_0018.jpg');" onmouseover="changeInfo(1);"><img id="image1" src="../pictures/orit101b.jpg" border="0" height="100" width="100"></a>&nbsp;
<a id="anchor2" href="javascript: changePic('CRW_0031.jpg');" onmouseover="changeInfo(2);"><img id="image2" src="../pictures/orit101b.jpg" border="0" height="100" width="100"></a>&nbsp;
<a id="anchor3" href="javascript: changePic('CRW_0040.jpg');" onmouseover="changeInfo(3);"><img id="image3" src="../pictures/orit101b.jpg" border="0" height="100" width="100"></a>&nbsp;
</div>
<div id="information" style="float: left;">
<a onclick="move('right',5); return false;" href="#"> 4</a>&nbsp;
<a onclick="move('right',1); return false;" href="#">Previous</a>&nbsp;
Images 1-4 of 28&nbsp;&nbsp;<a onclick="move('left',1); return false;" href="#">Next</a>
&nbsp;<a onclick="move('left',5); return false;" href="#">Next 4</a>
</div>
</span>
<script type="text/javascript">
im_initImgs();
</script>
<br />
<div id="info" style="border: 2px dashed white; margin: 0px; padding: 0px; background-color: black; color: white; font-family: tahoma; font-size: 10pt; display: block; width: 400px;">
<span><img src="../pictures/orit10.jpg" height="100" width="100"></span><span>No info</span></div>
</BODY>
</HTML>

_Aerospace_Eng_
09-21-2007, 01:47 PM
You've got some issues with your code.

1) You can't put a block level element like a div inside of an inline element like a span.

2) You seem to be using &nbsp; incorrectly.

3) You have some useless markup such as a span tag around an image that doesn't seem to be doing anything.

4) You forgot to clear your floats which is why the black box is appearing the way it does.

5) You really shouldn't use things like this

href="javascript: changePic('orit10.jpg');"
Instead you should use

href="orit10.jpg" onclick="changePic(this.href);return false;"
This way users with JS disabled are still able to see the pics properly.

Here is the corrected code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<style type="text/css">
#info {
border: 2px dashed white;
margin: 0px;
padding: 0px;
background-color: black;
color: white;
font-family: tahoma;
font-size: 10pt;
display: block;
width: 400px;
clear:both;
}
#information {
float:left;
}
#imgs {
float:left;
width:424px;
}
#imgs a {
float:left;
margin-right:6px;
}
</style>
</head>
<body>
<div id="im_container">
<div id="imgs"> <a id="anchor0" href="orit10.jpg" onclick="changePic(this.href);return false" onMouseOver="changeInfo(0);"><img id="image0" src="../pictures/orit101b.jpg" border="0" height="100" width="100" alt=""></a><a id="anchor1" href="CRW_0018.jpg" onclick="changePic(this.href);return false" onMouseOver="changeInfo(1);"><img id="image1" src="../pictures/orit101b.jpg" border="0" height="100" width="100" alt=""></a><a id="anchor2" href="CRW_0031.jpg" onclick="changePic(this.href);return false" onMouseOver="changeInfo(2);"><img id="image2" src="../pictures/orit101b.jpg" border="0" height="100" width="100" alt=""></a><a id="anchor3" href="CRW_0040.jpg" onclick="changePic(this.href);return false" onMouseOver="changeInfo(3);"><img id="image3" src="../pictures/orit101b.jpg" border="0" height="100" width="100" alt=""></a></div>
<div id="information"> <a onClick="move('right',5); return false;" href="#"> 4</a>&nbsp; <a onClick="move('right',1); return false;" href="#">Previous</a>&nbsp;
Images 1-4 of 28&nbsp;&nbsp;<a onClick="move('left',1); return false;" href="#">Next</a> &nbsp;<a onClick="move('left',5); return false;" href="#">Next 4</a> </div>
</div>
<script type="text/javascript">im_initImgs();</script>
<div id="info"> <img src="../pictures/orit10.jpg" height="100" width="100">No info</div>
</body>
</html>

BarrMan
09-21-2007, 03:47 PM
Thanks alot!
It has taken me too long to reply because I had to try everything you'd said.
It's somewhat fixed my problem but I got a tiny little problem now with the new code which is:
The first image starts at at the top left with 0,0 at padding and margin(I can assume) and the others are with the right padding and margin.
I have no idea what it happens.
This is the link for it now:
www.kassiff.com/eng/test.html

The code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Example</TITLE>
<link rel="stylesheet" type="text/css" href="styletest.css" />
</HEAD>
<BODY>
<span id="im_container">
<div id="imgs" dir="rtl" style="float: left;">
<a id="anchor0" href="../pictures/orit10.jpg" onclick="changePic('CRW_0003.jpg'); return false;" onmouseover="changeInfo(0);">
<img id="image0" src="../pictures/orit10.jpg" alt="CRW_0003.jpg" border="0" height="100" width="100" />
</a>&nbsp;
<a id="anchor1" href="../pictures/orit10.jpg" onclick="changePic('orit10.jpg'); return false;" onmouseover="changeInfo(1);">
<img id="image1" src="../pictures/orit10.jpg" alt="CRW_0018.jpg" border="0" height="100" width="100" />
</a>&nbsp;
<a id="anchor2" href="../pictures/orit10.jpg" onclick="changePic('CRW_0031.jpg'); return false;" onmouseover="changeInfo(2);">
<img id="image2" src="../pictures/orit10.jpg" alt="CRW_0031.jpg" border="0" height="100" width="100">
</a>&nbsp;
<a id="anchor3" href="../pictures/orit10.jpg" onclick="changePic('CRW_0040.jpg'); return false;" onmouseover="changeInfo(3);">
<img id="image3" src="../pictures/orit10.jpg" alt="CRW_0040.jpg" border="0" height="100" width="100">
</a>&nbsp;
</div>
<div id="information" style="float: left;">
<a onclick="move('right',5); return false;" href="#"> 4</a>&nbsp;
<a onclick="move('right',1); return false;" href="#">Previous</a>&nbsp;Images 1-4 of 28&nbsp;&nbsp;
<a onclick="move('left',1); return false;" href="#">Next</a>&nbsp;
<a onclick="move('left',5); return false;" href="#">Next 4</a>
</div>
</span>
<script type="text/javascript">
im_initImgs();
</script>
<br>
<div style="display: block;" id="info">
<span>
<img src="../pictures/orit10.jpg" height="100" width="100" />
</span>
<span>No info</span>
</div>

</BODY>
</HTML>

The CSS file:

@import url(../style.css);
#info {
border: 2px dashed white;
margin: 0px;
padding: 0px;
background-color: black;
color: white;
font-family: tahoma;
font-size: 10pt;
display: block;
width: 400px;
clear:both;
}
#information {
float:left;
clear:both;
}
#imgs {
float:left;
width:424px;
}
#imgs a {
float:left;
margin-right:6px;
}

Thanks for your help!! :thumbsup:

_Aerospace_Eng_
09-21-2007, 05:06 PM
You seemed to ignore what I've told you. Compare my code to the code you just posted. You CAN'T put a div inside of a span.

BarrMan
09-21-2007, 05:11 PM
Oh, sorry about that.. I just had to do so much in order to fix the code... I just forgot this little(BIG) thing.
This code comes from my gallery script which creates it... That's why it's hard for me to change settings there.

I'll try now what you've said.. Thanks!

BarrMan
09-21-2007, 05:15 PM
Still doesn't work.
The im_container is now a div and it still does the same thing.

_Aerospace_Eng_
09-21-2007, 05:41 PM
Update your code please. Again your previous code has things in it that the code I posted does not.

BarrMan
09-21-2007, 06:48 PM
Update your code please. Again your previous code has things in it that the code I posted does not.

I removed any useless span tag. wrapped everything with a div tag and done everything you'd said. I still don't get it why it doesn't work.

abduraooft
09-22-2007, 06:41 AM
I removed any useless span tag. wrapped everything with a div tag and done everything you'd said. I still don't get it why it doesn't work.
Where?, I see it still like

<span id="im_container">
<div id="imgs" dir="rtl" style="float: left;">
<a id="anchor0" href="../pictures/orit10.jpg" onclick="changePic('CRW_0003.jpg'); return false;" onmouseover="changeInfo(0);">

Edit: I used the firebug to rename your span to div,
#imgs a {
float:left;
margin-right:6px;
}

removed this float:left, changed the width of #imgs to 500.
Then all the images in top row is got sticked to the top.

BarrMan
09-22-2007, 11:17 AM
Hey.
I removed all the new CSS code for the imgs and information and info and now it works fine. I have no idea why. but someone it's solved the problem.

Thanks for all your help.
If you have a comment on my code please tell me.
Here's the new test page:
www.kassiff.com/eng/test.html

And the real page which there it looks perfect is in here:
www.kassiff.com/eng/gallery.asp
(If you hover you mouse on one of the images you'll see the black box)

Thanks again!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum