CSS question or two

[Helevitia]

oh and I don't quite understand how to use dbdg's example #1 either. What does the CSS code look like?

[dbdg]

Helevita

You create two css styles, if you want images in them look below else just use standard css styling, you can create some very nice effects.

Example

.button {
background-image: url(image_01.gif);
background-position: center center;
}
.button-over {
background-image: url(image_02.gif);
background-position: center center;
}

Now assumig you have a div that you are using as your button you could use the following

<div id="button_01" class="button" onmouseover="this.className='button-over'; this.style.cursor='pointer'" onclick="location.href='url.htm'" onmouseout="this.className='button'">Text</div>

As stated above if you want to effect a different element on the page substitute this. with the ID of the element you want to alter, images on the page for example.

If you use an appraoch like the above it is a good idea to make the text inside the div a normal link as well <a href=..."> Browsers don't always, recognise onmouseover as a proper link so middle click (Opera) doesn't do anything, also it makes it possible for the user to right click and open in new window, div button alone (as above) won't allow that.

You aren't limited to divs the above works for tables/cells as well.

It seem like a lot of text to type for each button, personally all my sites are php so I've created functions, all I need to is feed into the function the two style names and the url, php does the rest.

As Jesterzwild posted above you should check out A List Apart, very informative site, and very cool examples.

Edit: Check the source of my website, most of the buttons on the site are created as above.

[Jessterw]

Ah beat me to it. My preference in the matter is to not place design-related images into the HTML itself, instead relying on CSS to 'insert' them. For image-based navigation I've been using standard text links in the page markup and then replacing the text with the desired images.

I'll have to find the article that explains it the best, but you can place both states of the image (normal vs. hover, or even active and visited) in the same files, and use CSS to shift the images position (as a background) around the element. That's a horrible explanation, but I'm nursing a bottle of Tylenol and fighting a fever, so I'll find that article straight away...

Ok this one is more for tabbed-based navigation, but it still uses images and shows the principle behind what I'm on about: http://www.simplebits.com/notebook/2...rollovers.html

[Helevitia]

Helevita

You create two css styles, if you want images in them look below else just use standard css styling, you can create some very nice effects.

Example

.button {
background-image: url(image_01.gif);
background-position: center center;
}
.button-over {
background-image: url(image_02.gif);
background-position: center center;
}

Now assumig you have a div that you are using as your button you could use the following

<div id="button_01" class="button" onmouseover="this.className='button-over'; this.style.cursor='pointer'" onclick="location.href='url.htm'" onmouseout="this.className='button'">Text</div>

As stated above if you want to effect a different element on the page substitute this. with the ID of the element you want to alter, images on the page for example.

If you use an appraoch like the above it is a good idea to make the text inside the div a normal link as well <a href=..."> Browsers don't always, recognise onmouseover as a proper link so middle click (Opera) doesn't do anything, also it makes it possible for the user to right click and open in new window, div button alone (as above) won't allow that.

You aren't limited to divs the above works for tables/cells as well.

It seem like a lot of text to type for each button, personally all my sites are php so I've created functions, all I need to is feed into the function the two style names and the url, php does the rest.

As Jesterzwild posted above you should check out A List Apart, very informative site, and very cool examples.

Edit: Check the source of my website, most of the buttons on the site are created as above.

I'll play aroudn with your example when I get home later. One question I have is, what is "this.className"? Are you just pointing to that "button-over class?

[Helevitia]

Ah beat me to it. My preference in the matter is to not place design-related images into the HTML itself, instead relying on CSS to 'insert' them. For image-based navigation I've been using standard text links in the page markup and then replacing the text with the desired images.

I'll have to find the article that explains it the best, but you can place both states of the image (normal vs. hover, or even active and visited) in the same files, and use CSS to shift the images position (as a background) around the element. That's a horrible explanation, but I'm nursing a bottle of Tylenol and fighting a fever, so I'll find that article straight away...

I've seen this done before where you shift around the image, but I like the replace one image with another method better.

[Jessterw]

May I ask why?

I just don't see the reasoning behind loading two images when you can load one. You save the user subsequent bandwidth and there isn't the lag, as marginal as it is, as there is with the second image file loading.

If you're placing images within the HTML then it's a non-issues; however, if you are using CSS to insert the images then there's no reason not to. I say this knowing that you are currently placing the images inline.

[Helevitia]

The reason is that my mind can comprehend the process of the way I like better. Since I am still learning HTML/CSS and basically I am an amateur with PS, it just seems more work for me.

It has nothing to do with making sense

[Jessterw]

Hehe, works for me. Just wondered.

[dbdg]

Helevitia

Yep, pointing to the class

this. (effect the current id/element) className (change the name of the class to) = 'NameOfNewClass'

Although you can use the method I've described I think in your case you should check out the latest link from Jesterzwild, I use the method above because it fits better with the design of my site, for yours I think http://www.simplebits.com/notebook/2...rollovers.html is is a better alternative, that and you pick up a bit more css knowledge, always good.

[Helevitia]

OK, I got it working FINALLY! I came home last night determined to get something working only to be defeated. Today at work I broke down and bugged one of my buddies who writes code. He looked it over and 2 minutes later had it working

So tonight I finally got past this stupid image rollover. Hopefully I can have my whole site up very soon. I really appreciated all of the help so far, thanks! Here is what 4 images look like working properly.

http://www.hilliardhouse.net/indexcss.htm

[Helevitia]

I'm stuck again

I hate to keep asking for help, but I can go no further.

Q. How do you center a list inside of a box? See this page for my problem.

One more question...

Q. How do I put spaces in between the lists?

Thanks!

[dbdg]

It is the UL style stopping it working

replace

#menucenter UL {
BACKGROUND-POSITION: center 50%; 
PADDING-LEFT: 0px; 
FLOAT: left; 
MARGIN-LEFT: 0px; 
FONT-FAMILY: Arial, Helvetica, sans-serif; 
LIST-STYLE-TYPE: none; 
TEXT-ALIGN: center

with

#menucenter UL {
BACKGROUND-POSITION: center 50%; 
FLOAT: left; 
FONT-FAMILY: Arial, Helvetica, sans-serif; 
LIST-STYLE-TYPE: none; 
TEXT-ALIGN: center;

If you are trying to solve issues like this the simplist thing to do is reduce the page to the minimum and find out what caused the error, replacing your three UL with a little bit of text showed me that the css was doing as expected, meaning ul style was the error.

In you list if you hover over a month the list moves down by one pixel, not a major issue but it doesn't look very nice. Assign a border to the default style, that way when people hover the list won't increase in size.

[schmosef]

The rollover for your "Home" graphic is shifted one pixel to the left.

That would bug me if it was my site.

[Helevitia]

It is the UL style stopping it working

replace

#menucenter UL {
BACKGROUND-POSITION: center 50%; 
PADDING-LEFT: 0px; 
FLOAT: left; 
MARGIN-LEFT: 0px; 
FONT-FAMILY: Arial, Helvetica, sans-serif; 
LIST-STYLE-TYPE: none; 
TEXT-ALIGN: center

with

#menucenter UL {
BACKGROUND-POSITION: center 50%; 
FLOAT: left; 
FONT-FAMILY: Arial, Helvetica, sans-serif; 
LIST-STYLE-TYPE: none; 
TEXT-ALIGN: center;

If you are trying to solve issues like this the simplist thing to do is reduce the page to the minimum and find out what caused the error, replacing your three UL with a little bit of text showed me that the css was doing as expected, meaning ul style was the error.

In you list if you hover over a month the list moves down by one pixel, not a major issue but it doesn't look very nice. Assign a border to the default style, that way when people hover the list won't increase in size.

Thanks for the help. I had to take some time off of working on it for various reasons. I will try your suggestion and see what I come up with. Thanks!

[Helevitia]

The rollover for your "Home" graphic is shifted one pixel to the left.

That would bug me if it was my site.

fixed!