Re: [css-d] CSS Roll Over Problem Help
I'm going to put this on a server and this way you guys can get a understanding of what I want with CSS roll over, I should have it on a server by end of today just finishing up something. Christopher wrote: Alright, what I am after is if I have one giant graphic with, three smaller areas that will be buttons within the giant graphic, how do I create roll over effects in this way ? From all the examples I have seen from links given to me by the great people of this list most of them show small buttons not buttons within giant graphic files with other stuff within the graphic file as well. David Laakso wrote: Christopher wrote: I have one giant image with 3 areas specific for links, I don't want the whole image just 3 specific areas of the giant image, when I read up on sprites most of the examples were little buttons so how do I go about doing it this way which I have laid out ? Christopher It is very difficult understand your continuing question (s) without some sort of diagram; or, better yet, a clickable link to the page/problem in question. I am sure you know what you want. But something more tangible than a rather incomprehensible 53 word long sentence will help others get the picture, and, perhaps, enable them to give you a specific answer. In the meantime, maybe this will help: http://css.maxdesign.com.au/listamatic/vertical05.htm __ 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/ __ 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/ __ 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 Roll Over Problem Help
No, not necessarily. It depends on how many different blocks of three images
you need to use.
This method uses a single combined 3 image block for a vertical menu and works
cross-browser:
You'd need to set inline params for a horizontal menu.
It doesn't cater for sub-items, but once you have mastered this, it's a fairly
easy progression.
HTML:
div id=menu
ul
lia href=item1.htmlItem1/a/li
lia href=item2.htmlItem2/a/li
!-- and as many more or less li items as you need --
/ul
/div
-
CSS
#menu {
/* Create box/position for menu with a background image if required */
}
#menu ul {
/* Set position and padding/margins of ul within menu box */
}
#menu li { /* Remove li defaults */
list-style:none;
}
#menu li a {
background-image:url(3 part single image url goes here);
background-repeat: no-repeat;
background-position:0 0;
/* Set width, height etc */
}
#menu li a:hover {
background-position:0 -73px; /* Change position to suit image sizes */
}
#menu li a:active {
background-position:0 -146px; /* Change position to suit image sizes */
}
-
Just add appropriate sizes and positions to suit your images, and remove anchor
default coloring as necessary.
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: Christopher
To: css-d@lists.css-discuss.org
Sent: Saturday, June 21, 2008 1:49 AM
Subject: Re: [css-d] CSS Roll Over Problem Help
So I have one div now with just a background image. I have to create
three other divs ? And each one
being a :hover and a :active?
__
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 Roll Over Problem Help
I have one giant image with 3 areas specific for links, I don't want the
whole image just 3 specific areas of the giant image, when I read up on
sprites most of the examples were little buttons so how do I go about
doing it this way which I have laid out ?
Christopher
Alan K Baker wrote:
No, not necessarily. It depends on how many different blocks of three images
you need to use.
This method uses a single combined 3 image block for a vertical menu and
works cross-browser:
You'd need to set inline params for a horizontal menu.
It doesn't cater for sub-items, but once you have mastered this, it's a
fairly easy progression.
HTML:
div id=menu
ul
lia href=item1.htmlItem1/a/li
lia href=item2.htmlItem2/a/li
!-- and as many more or less li items as you need --
/ul
/div
-
CSS
#menu {
/* Create box/position for menu with a background image if required */
}
#menu ul {
/* Set position and padding/margins of ul within menu box */
}
#menu li { /* Remove li defaults */
list-style:none;
}
#menu li a {
background-image:url(3 part single image url goes here);
background-repeat: no-repeat;
background-position:0 0;
/* Set width, height etc */
}
#menu li a:hover {
background-position:0 -73px; /* Change position to suit image sizes */
}
#menu li a:active {
background-position:0 -146px; /* Change position to suit image sizes */
}
-
Just add appropriate sizes and positions to suit your images, and remove
anchor default coloring as necessary.
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: Christopher
To: css-d@lists.css-discuss.org
Sent: Saturday, June 21, 2008 1:49 AM
Subject: Re: [css-d] CSS Roll Over Problem Help
So I have one div now with just a background image. I have to create
three other divs ? And each one
being a :hover and a :active?
__
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/
__
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 Roll Over Problem Help
Christopher wrote: I have one giant image with 3 areas specific for links, I don't want the whole image just 3 specific areas of the giant image, when I read up on sprites most of the examples were little buttons so how do I go about doing it this way which I have laid out ? Christopher It is very difficult understand your continuing question (s) without some sort of diagram; or, better yet, a clickable link to the page/problem in question. I am sure you know what you want. But something more tangible than a rather incomprehensible 53 word long sentence will help others get the picture, and, perhaps, enable them to give you a specific answer. In the meantime, maybe this will help: http://css.maxdesign.com.au/listamatic/vertical05.htm __ 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 Roll Over Problem Help
Alright, what I am after is if I have one giant graphic with, three smaller areas that will be buttons within the giant graphic, how do I create roll over effects in this way ? From all the examples I have seen from links given to me by the great people of this list most of them show small buttons not buttons within giant graphic files with other stuff within the graphic file as well. David Laakso wrote: Christopher wrote: I have one giant image with 3 areas specific for links, I don't want the whole image just 3 specific areas of the giant image, when I read up on sprites most of the examples were little buttons so how do I go about doing it this way which I have laid out ? Christopher It is very difficult understand your continuing question (s) without some sort of diagram; or, better yet, a clickable link to the page/problem in question. I am sure you know what you want. But something more tangible than a rather incomprehensible 53 word long sentence will help others get the picture, and, perhaps, enable them to give you a specific answer. In the meantime, maybe this will help: http://css.maxdesign.com.au/listamatic/vertical05.htm __ 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/ __ 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 Roll Over Problem Help
I think I see what you want. Forgive me if I'm wrong. :-)
Referring to the example I gave you in my last reply:
You need to define the screen position of your menu in #menu {}
Then define your actual menu element box sizes (width and height) to create a
box 'window' to view parts of your image using #menu li a {}
You would also define the coordinates of the first part of your image you want
to view in #menu li a {}
After that it's a simple matter of setting the coordinates for the part of your
image that you want to use for the rollover using #menu li a:hover {}
and again for the active part of the menu using #menu li a:active {}
The top and left coordinates of your image will be 0 0 and any other pixel
coordinates will be negative values taken from 0 0 as the initial reference.
If you need different parts of the image in each menu li item, then you would
need multiple divs, one for each different menu item.
It would be a lot easier if you could generate some code for this, even if it
doesn't work properly and put it on a site somewhere, along with your 'giant'
image, then we could do some real work on getting it right for you. Failing
that, post what you have (including your menu image) direct to my email address
and I'll try to create something for you to learn from. I won't actually do the
entire job for you, as I believe that the only way to learn is by making your
own mistakes and correcting them, with or without help.
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: Christopher
To: css-d@lists.css-discuss.org
Sent: Saturday, June 21, 2008 7:37 PM
Subject: Re: [css-d] CSS Roll Over Problem Help
I have one giant image with 3 areas specific for links, I don't want the
whole image just 3 specific areas of the giant image, when I read up on
sprites most of the examples were little buttons so how do I go about
doing it this way which I have laid out ?
Christopher
__
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 Roll Over Problem Help
Christopher wrote: Alright, what I am after is if I have one giant graphic with, three smaller areas that will be buttons within the giant graphic, how do I create roll over effects in this way ? From all the examples I have seen from links given to me by the great people of this list most of them show small buttons not buttons within giant graphic files with other stuff within the graphic file as well. Is it possible for you to provide a clickable link in your post to your page that has buttons within giant graphic files with other stuff within the graphic file as well??? __ 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 Roll Over Problem Help
Christopher. I'm sorry, but a couple of us have attempted to accommodate you and have given you outline examples, along with requests for more information from you. Unfortunately, so far there has been no interaction from you. All you have managed to do is to re-word the same question several times and repeatedly ask it, without meaningful discussion. I do not have your 'giant' image file, so there is no possible way I can give you an example using it. Further, I don't have the time or the inclination to generate a large image by guesswork. I've pointed you to one of my websites where what you seem to want is working, along with some extra 'bells and whistles' and I've even invited you to send your file via email, but you have failed to do so. Does this large image file actually exist outside an abstract concept? The task is straightforward enough. You have a large graphic representation and you are looking at it through a small moveable aperture, defined by CSS. If you are really not understanding what is a fairly mundane and everyday CSS function, may I suggest that you purchase a basic course or a book on CSS fundamentals and thoroughly learn it, generate some 'proper' examples of your own, make mistakes (we all do) then submit your work to this forum for analysis and help in making it work. I've received some great help from learned folks on this forum and you can too, but you really have to do your own homework. :-) 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: Christopher To: Alan K Baker Sent: Sunday, June 22, 2008 12:18 AM Subject: Re: [css-d] CSS Roll Over Problem Help Hi, well could you show me a example cause, I'm trying to wrap my head around this as it is, hopefully you have a example? __ 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 Roll Over Problem Help
Probably because you need to set the nav up as a UL
and declare #menu li a
#menu li a:hover
#menu li a:active
Take a look at www.virtualtheatreorgans.com
All of the nav tabs are inline rollovers using a combined 3 image .jpg
CSS is at: www.virtualtheatreorgans.com/scripts/stylesheet.css
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: Christopher
To: css-d@lists.css-discuss.org
Sent: Friday, June 20, 2008 12:22 PM
Subject: [css-d] CSS Roll Over Problem Help
Hi, I have my div called navigation then I have navigation:hover but
this does not work ? I know I'm missing a step could it be a link cause
the graphic needs to be one big graphic BUT specific areas on the
graphic will have links to other pages NOT the whole graphic:
#menu a {
background: url(button.gif) 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}
...with all 3 states in one big graphic.
__
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 Roll Over Problem Help
So I have one div now with just a background image. I have to create
three other divs ? And each one
being a :hover and a :active?
Alan K Baker wrote:
Probably because you need to set the nav up as a UL
and declare #menu li a
#menu li a:hover
#menu li a:active
Take a look at www.virtualtheatreorgans.com
All of the nav tabs are inline rollovers using a combined 3 image .jpg
CSS is at: www.virtualtheatreorgans.com/scripts/stylesheet.css
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: Christopher
To: css-d@lists.css-discuss.org
Sent: Friday, June 20, 2008 12:22 PM
Subject: [css-d] CSS Roll Over Problem Help
Hi, I have my div called navigation then I have navigation:hover but
this does not work ? I know I'm missing a step could it be a link cause
the graphic needs to be one big graphic BUT specific areas on the
graphic will have links to other pages NOT the whole graphic:
#menu a {
background: url(button.gif) 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}
...with all 3 states in one big graphic.
__
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/
__
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/
