Sligh css problem, placing image over a image, first one to post solution gets 15$

Discussion in 'Design' started by Jawn, Jun 12, 2008.

0
  1. #1
    Hello Ya'll

    Im currently trying to place a "delete image" image over a thumbnail, so far so good.

    But look what happens if it gets too close to the maximum div width, the hovering image will jump down, im not sure how to solve this?

    I would appreciate if someone could help me on this one.

    http://mmorpgtoplist.com/problem/

    ______________________________________________________________

    First one to post a working solution in this thread gets 15$ over paypal, no private messages and no emails.
    Just post it here if you know how to fix it.


    Best Regards
    Jawn
     
    Jawn, Jun 12, 2008 IP
  2. codyturk

    codyturk Well-Known Member

    Messages:
    340
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    128
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    Hey Jawn, double check your widths, and paddings. Make sure the math adds up.
     
    codyturk, Jun 12, 2008 IP
  3. dasklney

    dasklney Active Member

    Messages:
    164
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    Here is solution:

    increase width size of main <div> to 700px or more:

    <div style="border: 1px solid rgb(193, 193, 193); width: [SIZE=3][B][COLOR="Red"]700px[/COLOR][/B][/SIZE];">
    Code (markup):
    add "/" at the end of all your <img> tag.
    add "float: left;" in all of <div> tag around close image button.
    <div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" class="galleryimg" border="0" [SIZE=3][B][COLOR="Red"]/[/COLOR][/B][/SIZE]></a><div style="[SIZE=3][B][COLOR="Red"]float: left;[/COLOR][/B][/SIZE] position: relative; right: 23px; top: 8px;"><a href="http://mmorpgtoplist.com/problem/delete"><img src="icon_delete_image_thumb.jpg" border="0" [SIZE=3][COLOR="Red"][B]/[/B][/COLOR][/SIZE]></a></div></div>
    Code (markup):
    That's all! :D

    Fixed code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css problem</title>
</head>
<body>


<style type="text/css">
.galleryimg{
	background:#fff;
	border:1px solid #c1c1c1;
	padding:3px;
	margin:8px;
	float: left;
}
</style>



<div style="width: 700px; border:1px solid #c1c1c1;">



<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306923_edate.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306775_Natures Touch.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306782_ss.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>




<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306923_edate.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306775_Natures Touch.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306782_ss.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>



</div>


</body>
</html>
    PHP:

    Regards,
    Giang
     
    dasklney, Jun 12, 2008 IP
  4. Jawn

    Jawn Peon

    Messages:
    200
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4

    Thanks but it needs to have a width on 683px, its for a image gallery and the pictures are dynamic in size.
     
    Jawn, Jun 13, 2008 IP
  5. dasklney

    dasklney Active Member

    Messages:
    164
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    75
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #5
    If you want to keep its width, just decrease gallaryimg style margin to 6px
    <style type="text/css">
.galleryimg{
	background:#fff;
	border:1px solid #c1c1c1;
	padding:3px;
[B][COLOR="Red"]	margin:6px;[/COLOR][/B]
	float: left;
}
</style>
    Code (markup):
    Fixed code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css problem</title>
</head>
<body>


<style type="text/css">
.galleryimg{
    background:#fff;
    border:1px solid #c1c1c1;
    padding:3px;
    margin:6px;
    float: left;
}
</style>



<div style="width: 683px; border:1px solid #c1c1c1;">



<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306923_edate.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306775_Natures Touch.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306782_ss.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>




<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306923_edate.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306775_Natures Touch.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306782_ss.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>

<div style="float: left;"><a href="image"><img src="images/thumb-1213306789_aad548c9.jpg" border="0" class="galleryimg" /></a><div style="float: left; position:relative; right: 23px; top: 8px;"><a href="delete"><img src="icon_delete_image_thumb.jpg" border="0" /></a></div></div>



</div>


</body>
</html>
    PHP:
    Regards,
    Giang
     
    dasklney, Jun 13, 2008 IP
  6. Jawn

    Jawn Peon

    Messages:
    200
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #6


    That wont help neither since images are in dynamic sizes in width...
     
    Jawn, Jun 13, 2008 IP
  7. Jawn

    Jawn Peon

    Messages:
    200
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #7
    Im creating a new topic
     
    Jawn, Jun 13, 2008 IP