You should probably be using a technique like gilder-levin image replacement INSIDE your anchors, so images off users will have something to look at and so search engines have TEXT to go with those links.
A dummy span for gilder-levin will make doing your hover states easier.
You are using ID’s in the markup and classes in the CSS:
#nav li a.item1
and
id=“item1”
See a problem here?
Still waiting for your attachment to be approved - but I’d have to see what it is you are trying to do.
/* assumes CSS reset is in use */
#mainMenu {
list-style:none;
/* px metric fonts due to image interaction */
font:bold 12px/16px arial,helvetica,sans-serif;
}
#mainMenu li {
display:inline; /* don't even TRY to do anything with the LI */
}
#mainMenu a {
display:block;
position:relative;
overflow:hidden; /* chop off hover half */
width:40px; /* I'm making them wider just to make it apparent which is which */
height:30px;
color:#000;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
/*
color change to make sure IE always hovers/unhovers
Also helps when images are disabled
*/
color:#008;
}
#mainMenu a span {
position:absolute;
top:0;
left:0;
width:80px; /* 2x width */
height:30px;
background:url(images/mainMenu.png);
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
left:-40px; /* minus width */
}
#mainMenu .home span {
background-position:0 0;
}
#mainMenu .forums span {
background-position:0 -30px;
}
#mainMenu .contact span {
background-position:0 -60px;
}
I put the class on the LI just so that I can be 100% certain any specificity issues are avoided. Moving the inner span inside the overflow:hidden anchor means you don’t have to set the background position twice for your hover effects - just place the different buttons one atop the other, and then the hover/active states across.
I did this on a rewrite for someone over on digital point a little while ago:
Again, check your markup - you’re saying item1 is a id in your markup, but are saying it’s a class in your CSS. ID’s are #, not . - and if you are using ID’s, you shouldn’t need to say #nav li before it. (though as I showed in my example, I’d put classes on the LI and leave the anchors alone)
Ok, now that I actually SEE your image, I see another problem. Your third item should either never show an image, or repeat the first one…
See, you’ve got five across and two down - but your positioning is on the Y axis - up and down. Second number is up and down, sliding it up 60px will either point it at nothing if the background is no-repeat, or point it at the first image again if the background is repeating.
Also you are MISSING the point of my example, which is to put meaningful text inside those anchors, and NOTHING inside the span. The span is a sandbag, it should be empty as there is no reason to EVER put anything inside it… If the editor you are using is saddling you with that or *****ing about the lack of a space, you are using the wrong editor. (lemme guess, that steaming pile of manure called dreamweaver? To quote a dearly departed friend "The only thing about dreamweaver that can be considered professional grade tools are the people promoting it’s use.)
If I have time later I’ll toss together how I’d handle that - I would make all those images a single inline stripe - regardless of how I was going to show them on the screen. A second row or column would be for hover and/or active states, NOT for more buttons. (I’ll show that in action too).
is unlocked for easy access to the bits and pieces.
Valid XHTML 1.0 Strict, would be valid CSS if not for a couple IE workarounds. Tested working IE 5.5, 6, 7 & 8, FF 2 and 3.6, Opera 9.6 and 10.52 beta, and the latest flavors of Chrome and Safari.
There is no excuse to ever have invalid HTML - but between IE and Firefox you will find yourself resorting to properties like zoom, filter and expression - or -moz prefixed values once and a while - in those cases so long as you know WHY the vendor specific stuff doesn’t validate, you’re ok.
See, you’ve got five across and two down - but your positioning is on the Y axis - up and down. Second number is up and down, sliding it up 60px will either point it at nothing if the background is no-repeat, or point it at the first image again if the background is repeating.
Also you are MISSING the point of my example, which is to put meaningful text inside those anchors, and NOTHING inside the span. The span is a sandbag, it should be empty as there is no reason to EVER put anything inside it…
Ah ok - but if I put content in the <A bit, it then just make the icon show up to the width of the text? i.e overflowijng?)
If the editor you are using is saddling you with that or *****ing about the lack of a space, you are using the wrong editor. (lemme guess, that steaming pile of manure called dreamweaver? To quote a dearly departed friend "The only thing about dreamweaver that can be considered professional grade tools are the people promoting it’s use.)
heheh nah - I code in Notepadd++ Can’t stand Dreamweaver, or move WYSIWYG editors =)
If I have time later I’ll toss together how I’d handle that - I would make all those images a single inline stripe - regardless of how I was going to show them on the screen. A second row or column would be for hover and/or active states, NOT for more buttons. (I’ll show that in action too).
Wow thanks - that looks exactly like what I was trying to achieve Gonna have a look over the CSS, so I can learn from this - and hopefully achieve similar things in the future on my own.
Thanks again for your time - very much appreciated (saves me yanking my hair out :p)
Any chance you have the PSD fo that image? I’m trying to make it into a gif (as I need the background transparent) … but doesn’t seem to be working.
I guess if worst came to worst, we could just keep the white background - but if possible, I’d like to make it transparent (so the yellow background image comes through)
Actually, I made it off your original jpeg with just paint shop pro’s “edge preserving smooth” to strip off the artifacting.
Try this:
To do mono-color transparency I just flood fill with a hideous unused color (magenta usually works well) and then at save time in Paint Shop Pro (which has a billion times better a save time optimizer than photoshop) tell it to make that color transparent.
Works like a charm, though the anti-aliasing may be a bit off. You may want to flood fill with a gaussian blur sum of the background, redo the aliasing pixels by hand with a smudge tool, then flood fill again - that’s called “close enough” anti-aliasing and it works fairly well in most cases; and dodges the bullet of the fat bloated alpha transparency .png (which come with a laundry list of problems)
Happens on WAY too many websites. You get users starting pissing contests over it - sour grapes from the “Everybody hates me” crowd, other users using their constantly up-voting to lambast other users or make themselves sound more important than they are…
Ends up a lose/lose. Just look at digitalpoint, where an abrasive abusive jerk like me ends up net 10 points a month after being voted down at least that much. (+20/-10 give or take)
hahaha I can imagine. I help on a perl forum, where I’ve posted going on 14,000 “replies” - so just a “thank you” is nice (no rep system them) … but I’ve used tek-tips quite a bit, and seems to work quite well there (from what I can see anyway =))
It’s not just that :). People would gang up (from what I’ve heard) on members they hated and they would constantly rep their friends and would get enormously high rep power extremely fast. One negative rep from a high rep person would set someone so negative it wouldn’t be worth tryin to get bac.
Devshed is absoltely the worst in regards to rep…sizablegrin (a 60year old user there) is a grunch and is completely power abusive :).
