Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
Have you tryed giving your #wrapper a height or min-height: should i say. There is no way to have the bottom of your graphic 'Cut-Off' but you can stop your wrapper from resizing itself when the font goes smaller. I would have a poper look but remove that stupid password because every time i try and use firebug to edit the CSS its asking me for the password every few seconds. On 6/18/07, Tee G. Peng [EMAIL PROTECTED] wrote: In this page I have the photo placed in body background with fixed position. When fontsize enlarge, the bottom part of the photo shows the background color which is fine because I intentionally wanted it appears as if it's part of the design, however when fontsize reduces, the footer moves up as expected, but I want to make the bottom part of photo moves up with the footer. I can't think of a way to make it happens. Can it be done with CSS? http://project.lotusseedsdesign.com/wandahennig/ login: public/public thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
Tee G. Peng wrote: In this page I have the photo placed in body background with fixed position. When fontsize enlarge, the bottom part of the photo shows the background color which is fine because I intentionally wanted it appears as if it's part of the design, however when fontsize reduces, the footer moves up as expected, but I want to make the bottom part of photo moves up with the footer. I can't think of a way to make it happens. Can it be done with CSS? http://project.lotusseedsdesign.com/wandahennig/ login: public/public thanks! tee Hi Tee, nice looking page! It doesn't get a vertical scroll bar though (firefox 2 latest)... could you attach the background image to the bottom of the main content area as opposed to a fixed position on the body? that way it would move up if the text size was reduced. One other thing I noticed was when you hover the large links they change height slightly, looks nice but when you hover just on the edge you get some mad flickering. You could maintain the height by replacing the padding with a transparent border. hope that makes sense Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
sorry Tee, misread your question. Put the background image in the div that has the white background (#container i think) and it won't show up below the footer. @Jamie: that password isn't stupid just because it gives firebug a hard time. Why not use chris pederick's developer toolbar AND firebug? you can have your cake and eat it too. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] auto-hiding bottom part of bg image when resizing fontsize
On Behalf Of Jamie Collins There is no way to have the bottom of your graphic 'Cut-Off' but you can stop your wrapper from resizing itself when the font goes smaller. I believe it could be cut-off if Tee was using #wraper instead of body to hold that background image. I agree that min-height would work well here. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
Hi Jamie, Rob and Thierry Have you tryed giving your #wrapper a height or min-height: should i say. Yeah! min-height works better and I needed to move the photo to the #container I would have a poper look but remove that stupid password because every time i try and use firebug to edit the CSS its asking me for the password every few seconds. Sorry about this. tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
On Jun 18, 2007, at 9:39 AM, Robert O'Rourke wrote: Hi Tee, nice looking page! It doesn't get a vertical scroll bar though (firefox 2 latest)... could you attach the background image to the bottom of the main content area as opposed to a fixed position on the body? that way it would move up if the text size was reduced. Thanks Rob. I think for notebook users, vertical sroll bar will show . Moving photo to the container creates a small problem, with vertical scrolling, the tagline image jumps. I need to work out a precise calculation in pixel or change that big image to alpha PNG. One other thing I noticed was when you hover the large links they change height slightly, looks nice but when you hover just on the edge you get some mad flickering. You could maintain the height by replacing the padding with a transparent border. Ah yah! I was thinking to have a pseudo javascript transition effect :). Thanks for the tips! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
Tee G. Peng wrote: On Jun 18, 2007, at 9:39 AM, Robert O'Rourke wrote: Hi Tee, nice looking page! It doesn't get a vertical scroll bar though (firefox 2 latest)... could you attach the background image to the bottom of the main content area as opposed to a fixed position on the body? that way it would move up if the text size was reduced. Thanks Rob. I think for notebook users, vertical sroll bar will show . Moving photo to the container creates a small problem, with vertical scrolling, the tagline image jumps. I need to work out a precise calculation in pixel or change that big image to alpha PNG. One other thing I noticed was when you hover the large links they change height slightly, looks nice but when you hover just on the edge you get some mad flickering. You could maintain the height by replacing the padding with a transparent border. Ah yah! I was thinking to have a pseudo javascript transition effect :). Thanks for the tips! tee All looking good now, just that fixed background to sort out. You either need to make that top banner into a png overlay to go over the photo of Wanda or simply remove the fixed declaration from the container background style. I think IE6 only respects background position fixed on the body element which I guess is why you had it there to begin with... In that case I think Jamie's solution is the one to go for, along with an alpha png top banner and the background fixed as you had it before. Nice work =] Rob *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] auto-hiding bottom part of bg image when resizing fontsize
On Behalf Of Robert O'Rourke One other thing I noticed was when you hover the large links they change height slightly, looks nice but when you hover just on the edge you get some mad flickering. You could maintain the height by replacing the padding with a transparent border. I may be wrong, but I'm not sure ie6 does transparent border (if I recall, it turns them black). --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
On Jun 18, 2007, at 11:49 AM, Thierry Koblentz wrote:
I may be wrong, but I'm not sure ie6 does transparent border (if I
recall,
it turns them black).
Yeah, it doesn't. I actually not sure how to write the rule.
I had {border-top: 5px transaprent},
{border-top: 5px; border-color: transaprent}
It doesn't work in Firefox and Safari, then I realized even if I got
it correct it probably won't won't in IE.
So I used {border-top: 5px solid wheat } /* wheat the same color as
the h2 background */
By the way, I have a question regarding fixed background position
it doesn't work in this way in Safari and Firefox either.
#container {background: url(image.jpg) fixed no-repeat}
so I changed to
#container {background-position: fixed}
But I am certain this works
body {background: url(image.jpg) fixed no-repeat}
why?
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] auto-hiding bottom part of bg image when resizing fontsize
Tee G. Peng wrote:
On Jun 18, 2007, at 11:49 AM, Thierry Koblentz wrote:
I may be wrong, but I'm not sure ie6 does transparent border (if I
recall,
it turns them black).
Yeah, it doesn't. I actually not sure how to write the rule.
I had {border-top: 5px transaprent},
{border-top: 5px; border-color: transaprent}
It doesn't work in Firefox and Safari, then I realized even if I got
it correct it probably won't won't in IE.
So I used {border-top: 5px solid wheat } /* wheat the same color as
the h2 background */
sorry about that, thanks for the gotcha Thierry!
By the way, I have a question regarding fixed background position
it doesn't work in this way in Safari and Firefox either.
#container {background: url(image.jpg) fixed no-repeat}
so I changed to
#container {background-position: fixed}
Im pretty sure it was working for me in Firefox just before... the
background image scrolled with the page. Not sure why it wouldn't have
worked for you.
But I am certain this works
body {background: url(image.jpg) fixed no-repeat}
why?
It's one of IE6's many peculiarities, I just came across this adaptation
of Eric Meyer's complex spiral demo after some googling:
http://www.gunlaug.no/tos/borrowed/complexspiral.html
should make things a little clearer regarding background attachment.
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
