Re: [css-d] CSS image question
This is what I'm doing for my rounded corners on this page: http://www.springfieldmo.gov/newsite/3col.html One image of a full circle is needed for the four different quadrants shown in the 4 corners. One http request this way. My main navigation tabs are similar in that they are CSS sprites. One larger image holds all three states of the tabs: off, rollover, and highlighted. One image means fewer http requests and only one instance of the image overhead for file structure. Overall image size for one large gif image like this is smaller than the 15 individual images I would need for small sliced images. Chris A. On Mon, Sep 8, 2008 at 10:54 AM, Lou Hernsen <[EMAIL PROTECTED]> wrote: > Thank you SOOO much! > NOw I can put hurricanes & weather in my pirate game! > Lou __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS image question
Thank you SOOO much! NOw I can put hurricanes & weather in my pirate game! Lou - Original Message - From: "Alan K Baker" <[EMAIL PROTECTED]> To: Sent: Sunday, September 07, 2008 11:00 PM Subject: Re: [css-d] CSS image question > Yes Lou, CSS can do this. > > Simply make a box: > > .boxname { > position:relative; > background-image:url(your 200px x 200px image filename and path); > background-position:-100px -100px; > width:50px; > height:50px; > overflow:hidden; > /* position, padding, margins etc to suit. */ > } > > to move to a different part of your big image, just change the background position x & y. > > If you want to move your box to an absolute position then change position:relative to position:absolute and add top:y; and left:x; where x and y are your coordinates. > > Regards, > > Alan. > > www.theatreorgans.co.uk > www.virtualtheatreorgans.com > Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups > Shopsmith 520 + bits > Flatulus Antiquitus > > > - Original Message - > From: Lou Hernsen > To: css-d@lists.css-discuss.org > Sent: Monday, September 08, 2008 3:26 AM > Subject: [css-d] CSS image question > > > Hi.. I'm sorta new to css.. here is the question. > > Lets say I only want to show a 50x50 px part of an image that is 200x200 on > a web page. > I want to show the area starting at 100x100y to 150x150y in a box 50x50... > can css do this? > or should I be looking at javascript? > What is the syntax for the command? and is the command used in the position > command? > > thanks for your time and answer > Lou > > __ > css-discuss [EMAIL PROTECTED] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > -- > No virus found in this incoming message. > Checked by AVG. > Version: 7.5.524 / Virus Database: 270.6.19/1659 - Release Date: 9/8/08 7:01 AM > > __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS image question
Yes Lou, CSS can do this. Simply make a box: .boxname { position:relative; background-image:url(your 200px x 200px image filename and path); background-position:-100px -100px; width:50px; height:50px; overflow:hidden; /* position, padding, margins etc to suit. */ } to move to a different part of your big image, just change the background position x & y. If you want to move your box to an absolute position then change position:relative to position:absolute and add top:y; and left:x; where x and y are your coordinates. Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch & A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Lou Hernsen To: css-d@lists.css-discuss.org Sent: Monday, September 08, 2008 3:26 AM Subject: [css-d] CSS image question Hi.. I'm sorta new to css.. here is the question. Lets say I only want to show a 50x50 px part of an image that is 200x200 on a web page. I want to show the area starting at 100x100y to 150x150y in a box 50x50... can css do this? or should I be looking at javascript? What is the syntax for the command? and is the command used in the position command? thanks for your time and answer Lou __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/