Position problem when no image uploaded

HTML & CSS
1

Trying to layer a frame with an image (that is dynamically uploaded and changed often). Problem is, if the user doesn’t upload an image the frame goes up with the negative margin.

The frame needs to stay put, even if an image doesn’t get uploaded. I understand WHERE the negative margin is coming from, but where does the code need to be modified to where the frame will stay put?

Code:

<div id="rightcol">
        <div id="wendyscoupon" onclick="location.href='wendys.php';" style="cursor:pointer;"><?php if (!empty($row_getWenC['image'])) { echo '<img class="wendcoup" src="images/' . $row_getWenC['image'] .'" '. $row_getWenC['image'], 'images/' .' '. 'alt="Wendy\\'s Coupon" />'; } elseif (empty($row_getWenC['image'])) { echo '<img class="wendcoup" src="images/no_coup.gif" />' ;} ?>
        <img class="wendframe" src="images/wendys_coupon_frame.png" alt="Wendy's Coupon" width="334" height="342" /></div>
       
        <div id="kfccoupon" onclick="location.href='kfc.php';" style="cursor:pointer;"><img class="kfccoup" src="images/<?php echo $row_getKFCC['image']; ?>" width="327" height="322" alt="KFC Coupon" title="KFC Coupon" /><img class="kfcframe" src="images/kfc_coupon_frame.png" alt="KFC Coupon" width="334" height="342" /></div>
      </div>


#rightcol {
	float: left;
	width: 350px;
}

#kfccoupon {
/*	background-image: url(images/KFC_DD.jpg);
	background-repeat: no-repeat;
	background-position: center top;*/
	height: 342px;
	width: 334px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}
#wendyscoupon {
	/*background-image: url(images/Salads.jpg);
	background-repeat: no-repeat;
	background-position: center top;*/
	height: 342px;
	width: 334px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

img.wendcoup {
position: relative;
z-index: 5;
}

img.wendframe {
	position: relative;
	top: -322px;
	left: 0px;
	z-index: 50;
}

img.kfccoup {
	position: relative;
	z-index: 6;
}

img.kfcframe {
position: relative;
top: -328px;
left: 0px;
z-index: 60;
}

Thank you!

2

Hi,

You’ll need to give us a working example with html and css and not php as its too awkward to debug.

I’m not sure I understand what you are doing but it looks like you are dragging an image (wendframe) on top of another image (wendcoup). If wendoup is missng then wendframe is positioned miles above because the original image is no longer taking up space in the document.

If the images are always the same size then preserve the space with a div to start with so it doesn’t matter if the image is there or not. You could then just use a background image for the frame instead of a foreground image anyway if I understand what a frame is.

Don’t use relative positioning anyway as that will leave a hole in the page. Either drag it with a negative margin or place it absolutely into position - assuming that dimensions aren’t going to change.

If none of the above is suitable then knock up a working demo (css /html not php) and we’ll take another look :slight_smile:

3

Howdy, Paul O’B!

Your presumption is correct! Go here.

4

Hi,

I would do this:



#kfccoupon {
[B]height:342px;[/B]/* preserve space */
margin-bottom:20px;
margin-left:auto;
margin-right:auto;
[B]position:relative;[/B]/* set stacking context for absolute child*/
width:334px;
}

img.kfcframe {
[B]left:0;
position:absolute;
top:0;
z-index:60;[/B]
}

Is that what you meant?

5

I’ve done the following with your help and it seems to be working with and without the images behind the frames (the frames stay put):

#kfccoupon {
	position: relative;
	height: 342px;
	width: 334px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}
#wendyscoupon {
	position: relative;
	height: 342px;
	width: 334px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}

img.wendcoup {
position: relative;
z-index: 5;
}

img.wendframe {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 50;
}

img.kfccoup {
	position: relative;
	z-index: 6;
}

img.kfcframe {
position: absolute;
top: 0;
left: 0px;
z-index: 60;
}

Thank you!

6

Glad you got it working :slight_smile: