Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts

    div displays a weird view

    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:

    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Why did you omit the doctype and other markup rules?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    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:
    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('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.

    Edit: 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.
    Last edited by BarrMan; 09-21-2007 at 01:11 PM.

  • #4
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    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

    Edit: The ordered code:
    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>
    Last edited by BarrMan; 09-21-2007 at 01:25 PM.

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    href="javascript: changePic('orit10.jpg');"
    Instead you should use
    Code:
    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
    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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    BarrMan (09-21-2007)

  • #6
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    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:
    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:
    Code:
    @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!!

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    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!

  • #9
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Edit: Still doesn't work.
    The im_container is now a div and it still does the same thing.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Update your code please. Again your previous code has things in it that the code I posted does not.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Quote Originally Posted by BarrMan View Post
    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
    Code:
    <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.
    Last edited by abduraooft; 09-22-2007 at 07:01 AM. Reason: Adding another point
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Senior Coder BarrMan's Avatar
    Join Date
    Feb 2005
    Location
    Israel.
    Posts
    1,644
    Thanks
    69
    Thanked 83 Times in 82 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •