Trying to position buttons in a footer

[SpeciationEverywhere]

soon TheDoc…..soon.
=)

[furrball1383]

media queries is where i’m at in the learning process along with css3. My problem is right now I can understand how the css works but I have no personal inspiration on how to use it so i just keep browsing examples to find some inspiration.

[furrball1383]

I have only ever made one website for a company, the rest I’ve always made for learning purposes and now I’ve made one for my dad. I love web designing but not as an occupation simply because I find when making webpages for companies you are so restricted in your creativity. I’m currently learning about media queries css3 and html 5. @SpeciationEverywhere I would really suggest watching Chris’s videos on building a website for the simple fact that his format is so organized that I picked it up quite easily and I use it every chance i get. 960px is one of a few formats, I believe its based on some statistics at the time it came out which meant that using 960 px kept your website looking good on monitors that sported resolutions of 1024×768 and over. More people have monitors of 1280×1024 and over nowadays but we haven’t switched to using 1024px yet as the width for the page wrapper.

[SpeciationEverywhere]

Thanks so much furball – Yeah I’m just getting into web development – I think it’s so much fun – a great trade to know – AND it’s like a big puzzle!
BUT – sometimes I just want to rip my hair out.
Try to solve this puzzle. I can’t seem to line up the new icons.
I provided an example video using JUST the mail icon – I even made the rollover icon totally different, but I can’t find it.

http://www.youtube.com/watch?v=9anTWbLZ6XY

There is a quick 30 second screenflow to demonstrate.

Email Me!

[furrball1383]

I would also need a link to the sprite you’re working with. to figure out the number of pixels you need to specify for x and y axis location.

If you look at what i gave you, the sprite is built a certain way, basically the width and height of the block element takes into account the empty space below and above each icon which is how i get the curve. Your code however shows that you have not kept those same proportions. If you’re just trying to reproduce it for learning purposes, thats great, otherwise I don’t see why you couldn’t simply replace the images i had with your images in the same sprite I made and then export that as a new transparent png and then use the code I gave you.

I have also noticed something else. You have used footer mail icon for your footer’s background and for the different states while i don’t see you attaching an image to your off state. This brings me to believe that what you’ve done is positioned the off states into the footer image itself and are simply positioning the on states and changing the image. There are a few problems with that. Putting all the images into the one png means they will all load from the one file and so the file gets bigger and takes longer for the user to download before it all becomes active. I would definitely recommend having all your sprites in a different file from your footer image. This makes it easier to follow through on positioning as well since its only the sprites in the image and nothing else that you have to account for. The next thing is it is always good to have both on and off states in the sprites and not to leave the one state within the footer image itself. Think of it this way, for the sake of adaptability, if you have a sprite of the on and off state that means if you ever wanted to change the buttons you could simply replace the sprite file. or if you wanted to change the whole look of the site you could switch out each image easily, eg replace blue sprites.png with green sprites.png and then replace rounderfooter.png with gradientfoorter.png I hope you’re getting my point… This makes switching the website’s look at a later date a lot easier than if you had to switch the off state images within the footer image itself as that can mess up your css positioning with the new images. I mean what happens if your new images are smaller than your old ones, then you can’t copy paste them over because you’d have to find some way to fill in the space they don’t fill with something to match the background.

That being said, if this is a learning exercise then I believe you have to figure out how sprites are created. Basically you could have all your sprites in one png file or you could split them up into each individual button consisting of an on and off state. So how do you go about it?? Well if you take a look at my code, you’ll see that the block elements are assigned a specific width and height. This means that whatever is shown will be in that width and height. The off state is easy because its position is going to be 0 0 but the on state requires you to place your image in an organized fashion, most commonly below the off state icon. This means that the position of the icon will now be 0 for the width and (the height of the block element +1) for the height. now that that button is done, what do you do if you have more than one button’s sprites in the same file? simple for each button the width simply increases by (the width of the block level element +1)

The example would be:

You have an icon of width and height 100px and 100px including the effects on the hover state
and you need to create the sprite and css for it. Basically you position your off state icon in your png at 0 0 and then increase the canvas height by another 100 px and place the on state icon starting at 0px width and 101px height. you then use the css

#mail a:hover{
background: url(footermailicon.png), 0px,-101px;
}

now your second button follows, so you position it at 101px 0px for your off state and 101px 101px for your on state. The third: 200px 0px off state and 201px 101px on state.

Now you have an effect for your hover states that is shown as a glow outside the button so you need to make sure that those pixels are accounted for in your block dimensions and that empty space is left in your sprite for the off state around the icon. I hope this helps, if not, let me know what you have a hard time understanding.

[SpeciationEverywhere]

Furrball again, I can’t thank you enough – yes – this is a learning exercise. I am very appreciative for your great responses. I will go back to the drawing board and try what you have written

[SpeciationEverywhere]

http://www.youtube.com/watch?v=opCzmh4pIA8

SUCCESS – Thanks furball!

I will read up on what you recommended.

This can be marked as [SOLVED]

Very rock and roll

[furrball1383]

You are very welcome! You must be the first person I’ve ever helped lol till now its been me getting the help. Glad I could help :D

[Author]

Posts