PDA

View Full Version : Fixed position for a Div Id, class, or style?


Jittor
05-22-2008, 04:11 PM
I am creating a page that has 8 coupons on it (2 columns & 4 rows). All these coupons are within Divs that have the same background and then the same style of headings and paragraphs etc.... For every 8 Divs I need to have a print button or text link on the bottom right corner. The key is every coupon has a different length of description, so the print button/text shifts down for the coupons with longer text. Is there a way to have the print button/text fixed in the spot for that Div? Does that make sense?

domedia
05-22-2008, 04:57 PM
I think I understand. Give it a position absolute, and put it inside the div (which is set position relative) you want it to be next to

Jittor
05-22-2008, 05:30 PM
as a class or an Id?

domedia
05-22-2008, 05:35 PM
as a class or an Id?
Doesn't matter, you can use any selectors you want as long as the style is being called :-)

Rule of thumb is:
-Use class if it's a style that is going to be repeated for multiple elemrents on the page
-Use ID on unique elements.

Jittor
05-22-2008, 05:40 PM
OK, is the position:absolute relitive to the Div container it's placed in or the page? I just tried a div id and it did not stay within the div container?

Jittor
05-22-2008, 05:50 PM
Here is the CSS

#coup1{
background-image:url(../pets_graphics/Coupon_images/Coupon_BKGD.gif);
background-repeat:no-repeat;
width:271px;
height:142px;
float:left;
margin-left:35px;
}
#coup1 p{
color:#666666;
font-size:12px;
padding:0px 10px 0px 0px;

}
.h4{
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
font-size:14px;
font-weight:bolder;
text-decoration:none;
text-align:right;
letter-spacing:1px;
position:absolute;
left: 510px;
top: 393px;
}



and the html



<div id="coup1"><img src="pets_graphics/Fur_bottles.gif" alt="ll" width="65" height="113" align="left" class="leftfloat" />
<span class="rightfloat2">$1</span>
<h6>SAVE $1.00 ON ANY</h6>
<h5>FURminator</h5>
<p>DeShedding Shampoo<br />
DeShedding Conditioner </p>
<div class="h4">Print</div>
</div>


the h4 class seems to break out of the coup1 class div.

domedia
05-22-2008, 06:41 PM
need to add position: relative to #coup1 and it will work. :)

Jittor
05-22-2008, 07:36 PM
Humm, can you give me an example, because I thought I already did that? So left: 510px; top: 393px; is not what your talking about or does it need more. I have never used position:absolute; so this is new to me. :)

domedia
05-22-2008, 07:51 PM
Nope you did not put it inside #coup1.
From your code above
#coup1{
background-image:url(../pets_graphics/Coupon_images/Coupon_BKGD.gif);
background-repeat:no-repeat;
width:271px;
height:142px;
float:left;
margin-left:35px;
}

there is not a position: relative in there.
So add this as a new line so it reads:
#coup1{
background-image:url(../pets_graphics/Coupon_images/Coupon_BKGD.gif);
background-repeat:no-repeat;
width:271px;
height:142px;
float:left;
margin-left:35px;
position: relative;
}

Jittor
05-22-2008, 07:56 PM
Wow, that worked! Why do you need the position: relative; in your parent Div for your child div to be absolute? Any known browser issues with this?

domedia
05-22-2008, 08:12 PM
Wow, that worked!This is how CSS is supposed to work, no surprise really ;)
Why do you need the position: relative; in your parent Div for your child div to be absolute?
When you set something as position: absolute, you take it out of the regular flow of the document and position it to the top left point of the viewport.

If you set the parent element to position: relative, you're basically telling all absolutely positioned elements inside it that "your position is RELATIVE to MY top left corner" :-)
Any known browser issues with this? Nope, this is regular CSS.