[css-d] Background images covered by floated element - fix?
In response to: The easiest way to do this is just to assign the heading a left margin equal to the width of #navcontainer so that it moves out from underneath the float. This doesn't appear to be a problem for your page since your #navcontainer is a fixed and known width. Reply: Thank you. Yes, I knew from troubleshooting that adding a margin would bump the bg-image out from under the float. However, since other h2s will need to flow beneath the navigation bar I didn't want to apply a margin-left to all h2 elements. Knowing there is no alternative I can simply create a class for the first couple h2s. Thanks again, Todd __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background images covered by floated element - fix?
Todd Sweet wrote: In response to: The easiest way to do this is just to assign the heading a left margin equal to the width of #navcontainer so that it moves out from underneath the float. This doesn't appear to be a problem for your page since your #navcontainer is a fixed and known width. Reply: Thank you. Yes, I knew from troubleshooting that adding a margin would bump the bg-image out from under the float. However, since other h2s will need to flow beneath the navigation bar I didn't want to apply a margin-left to all h2 elements. Knowing there is no alternative I can simply create a class for the first couple h2s. There are actually alternatives. If you're interested in them, please post the URL to your page again, and I'm sure somebody will help you with it (though I can't be sure that the alternatives wouldn't also involve classing the specific h2s in question -- they may or may not require such a thing. I'd have to play and see.) Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Background images covered by floated element - fix?
In a prototype I'm working on I have placed a floated div containing
a vertical navigation bar inside a primary content area of our page.
In that content area are a number of h2 elements which have a
background image applied to them via CSS that acts as a custom bullet
point. I assumed the contents of the h2 would flow around the
floated element, inlcuding the bg-image. Instead the bg-image remains
pinned to the left margin, invisible beneath the floated element.
I'm wondering if there is a way to keep the bg-image pinned to the h2 text?
Here is a link to the prototype I'm working on, along with the bit of
CSS I think applies. The h2 should all have a small arrow next to
them. The ones on the right do, while the Be Part of the Tradition
and Upcoming Events do not.
http://tinyurl.com/h3n9j
/* h2 in question */
h2 {
margin: 0px 0px 8px;
padding: 0px 0px 0px 20px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-weight: bold;
color: #33;
letter-spacing: 1px;
background-image: url(/images/shared/h2_bullet.gif);
background-repeat: no-repeat;
background-position: top left;
font-variant: small-caps;
}
/* floated vertical navigation div */
#navcontainer {float: left; margin:0 10px 0 0 !important; padding:0
!important; }
Thanks in advance for any advice.
Todd
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Background images covered by floated element - fix?
Todd Sweet wrote:
In a prototype I'm working on I have placed a floated div containing
a vertical navigation bar inside a primary content area of our page.
In that content area are a number of h2 elements which have a
background image applied to them via CSS that acts as a custom bullet
point. I assumed the contents of the h2 would flow around the
floated element, inlcuding the bg-image. Instead the bg-image remains
pinned to the left margin, invisible beneath the floated element.
Nope. Better read up on how floats work -- they layer over other boxes,
but displace those boxes' inline content only. Suggested articles:
http://www.communitymx.com/abstract.cfm?cid=AC008
http://css.maxdesign.com.au/floatutorial/
http://www.brainjar.com/css/positioning/
http://www.complexspiral.com/publications/containing-floats/
I'm wondering if there is a way to keep the bg-image pinned to the h2 text?
No, but there are ways you can get the h2 out from underneath the float,
which will accomplish the same thing.
Here is a link to the prototype I'm working on, along with the bit of
CSS I think applies. The h2 should all have a small arrow next to
them. The ones on the right do, while the Be Part of the Tradition
and Upcoming Events do not.
http://tinyurl.com/h3n9j
/* h2 in question */
h2 {
margin: 0px 0px 8px;
padding: 0px 0px 0px 20px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
font-weight: bold;
color: #33;
letter-spacing: 1px;
background-image: url(/images/shared/h2_bullet.gif);
background-repeat: no-repeat;
background-position: top left;
font-variant: small-caps;
}
/* floated vertical navigation div */
#navcontainer {float: left; margin:0 10px 0 0 !important; padding:0
!important; }
The easiest way to do this is just to assign the heading a left margin
equal to the width of #navcontainer so that it moves out from underneath
the float. This doesn't appear to be a problem for your page since your
#navcontainer is a fixed and known width.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
