Help with sprites and CSS

[DezUk]

I am putting together a website for the first time in ages and want to do some simple rollovers. Doing some research I see this now done using sprites, my question is do all the buttons have to be the same size?

Here are the buttons I want to use and below is how I want to lay them out, can I use CSS to spread these buttons like shown on my mockup?

Site
http://rdoyle.info/

Sprite
http://rdoyle.info/buttons.png

Cheers

 

[visibleman]

...my question is do all the buttons have to be the same size?
No but it makes life easier if you do use the same dimensions for your individual sprites and nav'container'.

Here are the buttons I want to use and below is how I want to lay them out, can I use CSS to spread these buttons like shown on my mockup?
Sure; you'd set the background positions accordingly to each nav'container'

However due to the simplicity of what you're wanting, it'd be easier to use text decoration/underline on the text or highlighting the bottom borders of the containers (could use spans if needing different colours) for the hover/click event.

 

[DezUk]

Well I would use text but the font is not standard so wont be supported by most machines

 

[Ekim]

What font is it? You may be able to use it as a web font and it won't matter if the user doesn't have it on their machine or not.

 

[visibleman]

If you're planning to use the font extensively on the site then, as Ekim mentions, it's worth finding out if it's available as a webfont (have a look on Google Fonts, Font Squirrel, Fonts.com etc) which you can 'import' via CSS.

As for using sprites, this (http://jsfiddle.net/rWfJp/) should get you started, although i suspect (i'm not a frontend dev) it's extremely crude and could be 'tarted' up.

 

[DezUk]

The font is called "Print Clearly"

 

[DezUk]

If you're planning to use the font extensively on the site then, as Ekim mentions, it's worth finding out if it's available as a webfont (have a look on Google Fonts, Font Squirrel, Fonts.com etc) which you can 'import' via CSS.

As for using sprites, this (http://jsfiddle.net/rWfJp/) should get you started, although i suspect (i'm not a frontend dev) it's extremely crude and could be 'tarted' up.

Very nice..... thanks!

 

[visibleman]

The font is called "Print Clearly"

Do a Google, i suspect you'll be able to find it for use as a webfont.

 

[DezUk]

Thanks for all the help guys, managed to get it arranged the way I was aiming for though have a slight CSS issue with the text on the left column.

Any ideas why it isn't inline with the Services button?

http://rdoyle.info/

 

[unwashed potato!]

you're padding on padding by the looks of it, and not aligning things/making the width the same on things. not had a look at your css, but it appears your header image isn't as wide as the site, so when things are left aligned they show further left then the center aligned header image.

 

[DezUk]

Yeah my header is not as wide as the site, use:

margin: 0 auto;

to center it

 

[gerico]

You could easily achieve that navigation with the use of no images at all. A quick inspection looks like there might be some div issues. Did you intend the wrapper only to be wrapping the header? I also note what you say about the main div not aligning with the header, this is just due to the widths of your columns. If you wanted any help, i can post up how I'd do it?

Also a note, I'd remove the inline style too, just to keep it clean!

 

[DezUk]

Would appreciate having a look at the code for that

 

[gerico]

No problem, gimme 30 mins, when the wife's finished looking at holidays, i will post a link to some code that will hopefully help, ill try leave some notes as to why i do it the way i do

 

[DezUk]

Much appreciated!

 

[gerico]

Hey man, sorry for the delay. If you go to: http://jsfiddle.net/x7Jw9/1/ - You will see i've set it so your columns and header line up. Also changed your navigation to be a pure html/css solution - no imagery. The only thing missing is the font as i can't link this up via jsfiddle, but it works fine locally. You just need to download the fontface files from font squirrel here - I also removed the br and inline styles.

Other than that, made a few tweaks, nothing major. Personally if your going to follow a two column layout, or so, i would think about make a left / right column div which holds the widths and margins, then all you have to do is interchange further code within it's respective parent.

I wasn't sure if you're intention was to make the nav the same width as the left column, but i made it the width the website as this seemed more logical, but that can easily be changed back via the css and shouldn't break anything.

If I've missed anything let me know, or if you did want further help just look me up. You could look at making the telephone + email live text as well, this would mean you can attach a mailto: action on the email link. Although i appreciate i am going off your original question, apologies i am a geek.

 

[DezUk]

Great work mate, I will take a look at this in more depth tomorrow as its a bit late on now but its looking great, really appreciate your help!

I assume I can use the same web font technique for the text on the phone number and email address etc?

Big thanks!!!

 

[gerico]

No problems, and yes, you simply just use the font-family propery in the CSS and replicate what i did for the navigation. Any problems, let me know

 

[DezUk]

*thumbs up*...... need to learn some of these newer techniques, been a while since I coded a site from scratch with HTML/CSS

 

[gerico]

*thumbs up*...... need to learn some of these newer techniques, been a while since I coded a site from scratch with HTML/CSS

Yeh it all changes so fast - Just noticed you've got a rogue ending

</head>

tag in your page