Trying to position buttons in a footer

[SpeciationEverywhere]

Hello! I am new to web design, so I apologize ahead of time if I come off too-green!

Here is my question:
I have made a footer in photoshop. I want to make the navigation buttons on the footer have an effect when the mouse rolls over them. I have made the separate images for the hover effect below:

http://i.imgur.com/piQoz.jpg Without rollover
http://i.imgur.com/SBV9F.jpg With rollover

I know how to create the footer with click-able areas WITHOUT rollover effect (essentially an image map).

I also know how to create a roll over effect to a single image both in JS and CSS.

My trouble is creating the footer with the images placed where I would like them (as seen in my photoshop screenshot) with the mouseover effect for each icon.

If I am correct, my issue is simply positioning images with the hover-effect, which I do not know how to do.

Any help would be greatly appreciated!

[furrball1383]

Hi, It might be a lot easier for you to just make the on and off states into a sprite and then have the css shift the position for the different states. I don’t think an image map is the way to go. If you simply have a div for your footer with the background image set as the image you have (without the buttons) then use an unordered list with block elements for navigation in which each list item is one of your buttons and then use the sprite to switch states, that might be better.

Here’s the explaination on sprites from css-tricks
https://css-tricks.com/158-css-sprites/

and i’m sure you can find the method for building the navigation, i learned it from one of Chris’s videos on building a webpage

[SpeciationEverywhere]

I understand the sprites idea, but placing the buttons where I designed them is what I’m really having a rough time with.

[Sargco07]

Assuming the background for your footer is the whole image behind your buttons on your PSD, you could just crop your buttons out to the size of your button with the hover effect.

So turn your hover effect on and crop out the button to include your hover effect and save the image as your hover img. Then turn your hover effect off and make the background transparent and save that as your regular button image (will need to be saved as a png). So both your hover img and your regular button img will be the same size. Then just use the JS to swap the img out on hover.

As far as position them on the page, use margin/padding to position the buttons where you want.
I find it easier to put each button in it’s own div and then position the divs first and then position the button inside each div. Some would call that bad practice because you are adding divs just for position reasons but to each there own. You could try using pseudo classes. Chris did a great tutorial.

https://css-tricks.com/5762-pseudo-class-selectors/

[furrball1383]

no no, there is a much simpler way.

Basically you take your buttons (i realize that they are set at different heights from the base but there is a simple solution to that) and set the height of your list items from the bottom of the footer to the top of the highest button. then simply set guides for the top of the highest button and the bottom of the footer.

After this you hide the background, and make the selection between the guides, copy it and paste it to a new document. now simply make a new layer and on the bottom add a one pixel line of some color (you’ll see the reason for this soon enough). Now edit the canvas size and double it. Then go back to the original document, hide the buttons in the off state and show the buttons in the on state. Copy the on state with the same selection as before go back to the second document and paste it below the black line. You can now remove the black line and save the document as a web based png with transparency.

Now in your css you have set the height of the list elements so for the off states you will just have to change the x value of the positioning for each list element and for the on states you will have to have the x values changed and the y value will be the height of the list element +1 pixel.to start the picture from the bottom row. Its that simple instead of div’ing each button. also if you feel like you want separate pngs for each button you can do that as well, but i like to keep all the buttons in one file if i can help it.

Also make sure that your widths are specified on your list elements so that you dont have edges of the next button showing etc. I hope you understand what I’ve said, write back and let me know.

[SpeciationEverywhere]

I will try it furrball – I’ll let you know – thank you for your response!

[SpeciationEverywhere]

Hey! I so I am deviating from what I originally wanted to do using an image with links within it. Instead, I am going to go all CSS.

Furball, I’ll be honest, I don’t really understand your post. I read it two or three times, and it flew right past me.

Here was what I have done thus far (I am walking away from using the javascript/image map idea)

Instead, I am doing it all with css. Here is what I got thus far.
http://i.imgur.com/Oi9r9.png
The mail icon DOES indeed have a rollover effect. I did this all with css. Here is the css I used.

#mail

{

display:block;

width:101px;

height:101px;

background: url("mail-icon-sprite.png") no-repeat 0 0;

}

#mail:hover

{background-position: 0 -101px;}



#mail span

{position:absolute;

top:-999em;}

and here is the html

Email

I just don’t know the code in order to get it where I want on the background of the footer.

Any more help? Thank you!

[furrball1383]

well based on the images you’ve posted i’ll do the stuff for you and see if i can post it back on here, most probably by tonight :D

[SpeciationEverywhere]

Thanks fur ball!

[furrball1383]

ok so here are the images then I’ll show you the css and html i used to make it work

http://imgur.com/a/VHbVj

for some reason the image uploading site replaces the image names. The one at the top is HMenu-Sprites.png and the one below it is bg.png

both images are transparent png files. obviously not as good quality as what you should have since i was working with images you had put up that included guides and slices with labels, but once you see everything and understand how it works you can just position your images in place of the ones I’ve positioned and that should do the job for you.

Now for the html. Basically I have the footer as a div with the background image displayed in it. I then have the navigation in another div so that I could position it within the footer. This second div is necessary since I am using float:left; to have the list items represented horizontally.

• Email
• Facebook
• Twitter
• RSS

On to the CSS

#footer {

height: 165px;

width: 905px;

background-image: url('../images/bg.png');

}

#buttons {

margin: 0px 0px 0px 170px;

}

ul#nav li {

display: inline;

top: auto;

}



ul#nav li a {

display: block;

width: 152px;

height: 165px;

text-decoration: none;

text-indent: -9999px;

float: left;

}



#clear {

clear: both;

}



ul#nav li.email a {

background: url('../images/nav/HMenu-Sprites.png');

background-position: 0px 0px;

}

ul#nav li.fb a {

background: url('../images/nav/HMenu-Sprites.png');

background-position: -152px 0px;

}

ul#nav li.twitter a {

background: url('../images/nav/HMenu-Sprites.png');

background-position: -304px 0px;

}

ul#nav li.rss a {

background: url('../images/nav/HMenu-Sprites.png');

background-position: -456px 0px;

}

ul#nav li.email a:hover {

background-position: 0px -165px;

}

ul#nav li.fb a:hover {

background-position: -152px -165px;

}

ul#nav li.twitter a:hover {

background-position: -304px -165px;

}

ul#nav li.rss a:hover {

background-position: -456px -165px;

}

And there you have it. This is what I had explained previously, and I did make it and test it to make sure it works before putting it up so hopefully you should be able to use this without much difficulty. Do not forget that you will have to change the targets for the files in the css depending on where you place them. Also if you decide to use your own images either work within the dimensions I have used or if you understand what I’ve done you can just use your own image with new dimensions and change the positioning for the sprites.

[SpeciationEverywhere]

Wow! Thanks furball, once I make my internet riches – You are on my “I should send my thanks” list – can we PM on here?

[furrball1383]

I have no idea about pm-ing since I haven’t done so myself but you’re very welcome, it didn’t take long. The main thing is knowing how to use css, js, jq and html5 believe me I’m a newbie myself, but after watching the video tutorials that Chris has on here and reading the posts that people put up and what other people recommend I have picked up quite a bit. So
you’ve tried it out and it worked? Also I had one query, the background image is only 905 pixels wide. Is there any particular reason that you didn’t go with the 960 pixel format?

[SpeciationEverywhere]

I didn’t know 960 was a standard! (doh)

This is my learning website. I have read thru much text on CSS – but other than working with the practice problems, I have yet to try to build an entire site! so this is practice! It is hard stuff.

Thank you so so much for your help!

[OniLinkCR]

Yah dude, go with 960. I sometimes want to push it to 1024, but I’d rather play it safe.

[TheDoc]

Or you can do both with media queries! But you gotta learn to walk before you can run.

[Author]

Posts