Help with sprites and CSS

DezUk · 18 Oct 2013 at 16:02

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

DezUk · 18 Oct 2013 at 17:20

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

DezUk · 18 Oct 2013 at 18:34

The font is called "Print Clearly"

DezUk · 18 Oct 2013 at 18:35

visibleman said:
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!

DezUk · 19 Oct 2013 at 20:57

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/

DezUk · 19 Oct 2013 at 22:40

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

margin: 0 auto;

to center it

DezUk · 19 Oct 2013 at 22:47

Would appreciate having a look at the code for that

DezUk · 19 Oct 2013 at 22:58

Much appreciated!

DezUk · 20 Oct 2013 at 01:21

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!!!

DezUk · 20 Oct 2013 at 01:28

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

DezUk · 20 Oct 2013 at 14:42

How come the head tag doesn't need closed at the end?

DezUk · 20 Oct 2013 at 20:13

Got ya!

I did have one question. This is a 2 column design as I was thinking of having a twitter feed and some icons on the right column but how could I make the text wrap around the image?

As I might just got with text and the odd image to keep things simple. Same applies to the email/phone text on the header, this is a background-image but how is best to split the div and float the text right?

DezUk · 21 Oct 2013 at 13:08

Thanks yet again mate.

I have been looking over the code today and have tried to make it a little simpler on my site http://www.rdoyle.info.

Few points:

I can't get the main body of the site to line up (center) with the header.
I have added code to the CSS for the visited link state, so that when on a link its shows as underlined but doesn't seem to be working.
I tried using your code for the header text but wouldn't work so I have just stuck with header image as a background.

Any pointers?

Cheers!

DezUk · 21 Oct 2013 at 13:13

And can you also explain what the .group class is doing, can't get my head around that.

Cheers

DezUk · 21 Oct 2013 at 19:41

Nice one mate, you have been a great help!!

One more question, any idea why the bullet points are not indented?...... should I create a new class for them?

DezUk · 21 Oct 2013 at 21:01

Cool got it sorted with some inline CSS:

Code:

<ul style="padding: 0px 0px 20px 50px">

Any ideas on having the top links showing the underline when on the page i.e. when on About Me it stays underlined.

I thought the visited state would sort that:

Code:

nav li a:visited {
    border-bottom: 1px solid #63C2DE;
}