Re: [css-d] Liquid layouts with graphics
Mark Fellowes wrote: I think this is probably obvious to me but at the certainty of sounding stupid I'll ask. I am working on a liquid / fluid layout, 3 columns using floats. If it's relevant this is the rough layout: http://pamshop.com/Template1/exp10.html I'm considering using a one image rollover navigation thing. Haven't done it yet but essentially there will be a graphic image as a background. Since the divs are all in percentages, is there anyway I could get that graphic to not break on either a smaller or larger monitor resolution ? Depends on the background image i guess and whether you can repeat it horizontally. If you only apply the background image to the links and not the list and give each li a left and right margin in % it could work. I've got a friend with a stupidly wide monitor (32) and he browses without sidebars and with the window maximised, not to mention hi-res. On that screen you'd get some /really/ sparse links so it might be better to fix the width of the navigation or alternatively set a max-width. The only problem there is in needing a javascript fix for =IE6. Keep us posted, i'm interested in seeing what you come up with, Rob __ 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] Liquid layouts with graphics
Mark Fellowes wrote:
I think this is probably obvious to me but at the certainty of sounding
stupid I'll ask.
I am working on a liquid / fluid layout, 3 columns using floats. If it's
relevant this is the rough layout: http://pamshop.com/Template1/exp10.html
I'm considering using a one image rollover navigation thing. Haven't done it
yet but essentially there will be a graphic image as a background. Since the
divs are all in percentages, is there anyway I could get that graphic to not
break on either a smaller or larger monitor resolution ?
TIA
Mark
Hi Mark,
Try adding in your css-styles:
=
#mainNav li {
background:
url('http://home.tiscali.nl/developerscorner/imaging/images/gradient300x50.png');
margin: 2px 10px 0 0;
}
=
and alternatively adding to this li:
=
background-position: 50% 0;
=
.. and you know! (trying = knowing ;-) ).
A background-img is always seen through the viewport of the box in which
it is settled. The only thing is that the img has to be wide enough for
the highest resolution.
Some more in The Port-hole Theory:
http://home.tiscali.nl/developerscorner/port-hole/porthole.htm
Greetings,
francky
__
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] Liquid layouts with graphics
On 5/4/06, Mark Fellowes [EMAIL PROTECTED] wrote: I think this is probably obvious to me but at the certainty of sounding stupid I'll ask. I am working on a liquid / fluid layout, 3 columns using floats. If it's relevant this is the rough layout: http://pamshop.com/Template1/exp10.html I'm considering using a one image rollover navigation thing. Haven't done it yet but essentially there will be a graphic image as a background. Since the divs are all in percentages, is there anyway I could get that graphic to not break on either a smaller or larger monitor resolution ? So what you are saying is that the links will have images, but you will do them as backgrounds? If they are without text, it's going to be hard to make them look good. Centering is one option, but I might have a couple better ideas: 1. Text links with non-repeated background images, like here: http://christianmontoya.com With text on one side and graphics on the other, they can separate but still be balanced. 2. Inline image links. You can use this technique for the rollovers: http://www.christianmontoya.com/2006/02/01/pure-css-image-rollover/ or look in the comments for a possibly better technique: http://www.thevisualprocess.com/dev/rollover or you could just use Javascript rollovers... unobtrusively, please. This way you can make the images 100% of the container width, so they'll scale with the column; this has problems of its own, since the images probably won't look too good. It depends on the images used. Some images scale better than others. Hope it helps. -- -- Christian Montoya christianmontoya.com ... rdpdesign.com ... cssliquid.com __ 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] Liquid layouts with graphics
It's actually the UL that will have the one background image. The image is moved up and down via the hover and active classes. I should have posted this before (it needs some cleaning up and integration into layout) http://pamshop.com/Template1/1rollover.html Mark -Original Message- From: [EMAIL PROTECTED] Sent: Thursday, May 4, 2006 6:20 PM -07:00 To: Mark Fellowes [EMAIL PROTECTED] Cc: css list list [EMAIL PROTECTED] Subject: [css-d] Liquid layouts with graphics I'm considering using a one image rollover navigation thing. Haven't done it yet but essentially there will be a graphic image as a background. Since the divs are all in percentages, is there anyway I could get that graphic to not break on either a smaller or larger monitor resolution ? So what you are saying is that the links will have images, but you will do them as backgrounds? If they are without text, it's going to be hard to make them look good. Centering is one option, but I might have a couple better ideas: snip __ your personal webtop. @ http://www.goowy.com __ 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] Liquid layouts with graphics
Mark Fellowes wrote: It's actually the UL that will have the one background image. The image is moved up and down via the hover and active classes. I should have posted this before (it needs some cleaning up and integration into layout) http://pamshop.com/Template1/1rollover.html Mark, If you are just changing background color on rollover, and using a pretty standard looking font, I see no reason to use images at all. Just style real text and give the a elements background colors. This will be much more flexible and accessible. 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/
Re: [css-d] Liquid layouts with graphics
Mark Fellowes wrote: It's actually the UL that will have the one background image. The image is moved up and down via the hover and active classes. I should have posted this before (it needs some cleaning up and integration into layout) http://pamshop.com/Template1/1rollover.html Hi Mark, So combining this example with the first post, I understand you ask: - how can I make this ul-box-img to be liquid, shrinking or expanding together with the left column? I think there are 2 possibilities (if I'm wrong, I'll be corrected I hope ;-) ): 1. the box has a fixed height. That means the titles of the menu-items have to be images too, for otherwise the items can escape from the box when the visitor is enlarging the font-size. In this case you can add an #ulwrapper around the ul. You cut the img in 2 parts, and then give the #ulwrapper the leftside border part of the img as bg-img. The rest of the img you can use as bg-img in the ul itself: positioned at 100% 0 (beginning at the the right side; going to the left as far as needed). 2. The ul has no fixed height. In this case the whole image has to be liquid: as well horizontally (adapting to the screen width) as vertically (adapting to the font-size). Then a kind of liquid corners/borders will be the solution. Two small images are needed (one for the top and bottom parts, one for the sides along the li's). As example how this can be done with css: http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-08a.htm - Next task will be the hovering over the li-items, I guess that can be made with another (combined) img that is called in the right position at hover. Greetings, francky __ 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/
