CSS Single Image Sliding Doors and Rollover

Hi
I have written a nice code-snippet in CSS
CSS Single Image Sliding Doors and Rollover

http://www.vision.to/single-image-sliding-doors-and-rollover.php

Hope You like it

If it helps you please give some "green boxes" - reputation

Thanks

 

Nice TRY, but it's broken on large font machines in Opera and IE because you aren't explicitly declaring the font size in px (px background means px font - sorry but them's the breaks), breaks even further in IE6 because you are declaring the line height in the child and not the parent, you're using two images, not one (you forgot the background), you have a DIV around it for no good reason, you have an 'active' class so what's with the extra class on the anchor, and if you have to use the title attribute for those, your text in the links is not sufficient. (in this case title is a complete waste of code, especially when it's the SAME text)

Worst of all, you are mixing measured metrics (px) with automatics (left/right) which is also prone to not working in IE and is technically invalid CSS... and because you don't change the text color the hover states are 'sticking' on.

Oh, and 491px means you have wasted bytes on rounding errors, and as .jpg you are introducing not just ugly artifacts (which are really visible here on my LCD) the filesizes are nutters too.

Here's a quick rewrite. Uses a SINGLE 2.3k png (could probably be encoded even leaner) with the artifacting removed, works flawlessly large fonts/120 dpi or normal, uses less markup, less classes, less CSS, includes a separate appearance for the third 'state', and tested working in IE 5.5, 6 & 7, FF 2.0 and 3.0, Opera 9.27 and 9.52 Beta, and Safari 3...

http://www.cutcodedown.com/for_others/feha/

If you are wondering about the margin on one side and padding on the other, IE will often miscalculate 'right', as will firefox. Instead I use left:100% to position the empty span over the margin.

Good idea, not enough testing on your implementation.

 

Hi deathshadow,
I wish to thank you for your fix.
You made it much more flexible .-)

I could not find any solution that could do both with single image and decided to do it my self.
Note: I'm not an expert in CSS

You get a green reputation from me.
please pm details so I can include credits to you on that tutorial.
Thank You

And I wanted to avoid empty <span> 's
http://www.vision.to/single-image-sliding-doors.php

 

Well, being you had an extra element as a wrapper in there, I didn't think empty or no was a big deal. When I first started dealing with CSS and separation of presentation from content I disliked the idea of 'image sandbags' - using empty element to create an appearance... but as time passed I warmed to the technique mostly because it allows you to do SO many things - sliding doors, glider-levin, flat dividers - all without changing the markup. If you are going to separate presentation from content then having the ability to apply multiple techniques without diving into the HTML greatly speeds re-skinning of the site if so desired in the future.

I just wish :before and :after were implemented widespread enough to be deployable - then we could get rid of the spans too. You wouldn't believe some of the crazy stuff I can do with those psuedo's available - but since it doesn't work in 60-70% of the browsers in the wild... (In other words IE)

This for example would work in FF, Safari and Opera without the span:

#menuDemo {
	overflow:hidden; /* wrap floats */
	height:45px; /* trips haslayout, wrap floats IE */
	list-style:none;
	background:url(images/menu.png) 0 0 repeat-x;
	font:bold 16px/45px sans-serif;
}

#menuDemo li {
	display:inline;
}

#menuDemo a {
	float:left;
	position:relative;
	padding-left:10px;
	margin-right:10px;
	text-decoration:none;
	color:#EEE;
	background:#F84 url(images/menu.png) 0 -45px no-repeat;
}

#menuDemo a:after {
	content:" ";
	position:absolute;
	top:0;
	left:100%;
	width:10px;
	height:45px;
	font-size:1px;
	background:url(images/menu.png) -502px -45px no-repeat;
}

#menuDemo .current a {
	color:#000;
	background-position:0 -135px;
	background-color:#CCC;
}

#menuDemo .current a:after {
	background-position:-502px -135px;
}

#menuDemo a:active,
#menuDemo a:focus,
#menuDemo a:hover {
	color:#800;
	background-position:0 -90px;
	background-color:#FF0;
}

#menuDemo a:active:after,
#menuDemo a:focus:after,
#menuDemo a:hover:after {
	background-position:-502px -90px;
}

Code (markup):

But doesn't work worth a damn in any version of IE... huh, doesn't seem to work in Firefux 3 either - so I guess it's just Opera and Safari.

Pretty much these days I just bite the bullet and use the span (or other meaninless tags like B and I) - as I said it opens the door to other techniques, and it's not like I'm not using glider-levin and other containers elsewhere on almost every site I design.

Oh, one other advantage to using the extra element the way I do... You can use transparancies for the corners.

-- edit -- my bad.

I forgot that while firefox supports generated content, and :after, it will NOT let you reposition generated content. The 'trick' is to make the inline element behave as desired, which means inline-block and a vertical align.

#menuDemo a:after {
	content:" ";
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	width:10px;
	height:45px;
	vertical-align:top;
	font-size:1px;
	background:url(images/menu.png) -502px -45px no-repeat;
}

Code (markup):

-- oh, and lose the margin 10px right margin on the anchor declaration for this one... though this one will NOT work as a transparancy.

Which makes it also work in firefux. I've been half tempted to just throw a behavior file at IE to see if I could 'implement' :after and :before just as peterNed's csshover2.htc implements the missing hover/focus behavior on elements other than anchors.

 

Thank you
I have added <span>&nbsp;</span>
As I hate warnings from HTML Tidy in FireFox
I like when it shows "green"

This was great, now finally is a real "single image" including Background image for menu.
I have redesigned the menu on my website even for breadcrumbs.
All images are png

Thanks Again.
feha

P.S.Hope CSS 3.0 will be live soon and IE6 gone

 

Don't use HTML tidy - it's just going to screw things up. I wouldn't trust that steaming pile for anything since most of it's errors and warnings are flat out bullshit or rejecting stuff you quite often NEED for code that supports IE properly. Instead develop a style guide and stick to it... You learn to indent, de-indent and handle blocks properly while coding, you don't need that crap which frankly, often causes more problems than it solves.

HTML Tidy and/or the HTML validator plugin for FF (which is what I assume you mean) is another of those 'sleazy shortcuts' you'll often hear me refer to - separating yourself from control and quite often creating formatting issues that can change the rendering behavior. (given what a retard IE can be about comment placement effecting layout, or even the 'closing tags' trick which HTML Tidy pretty much bends over the table)

There's a reason I send it to the W3C and not some CRAP plugin rubbish... Though on the whole I hate a LOT of those technologies because I find they slow me down and get in the way... Automatic 'warnings' of perfectly valid code, autocompletion that is usually neither where I want it or how I want it completed, color syntax highlighting that ends up being like a bad acid trip and causes eye strain, WORSE making you not take the time to actually READ the code or keep your formatting clean, etc, etc.

Oh, and putting a entity space in your code is bad practice and a waste of bandwidth - AND can break the layout depending on the font, so you'd want that font-size:1px thing I declared in my non-span version to make sure it doesn't happen. (would also prevent the IE min-height bug). Adding an entity space to satisfy some junk plugin that has nothing to do with whether or not it's actually valid code? Sounds screwy to me.

 

Hi deathshadow
I will check and fix spans

I managed to make a tabs version based on this ...
http://www.vision.to/single-image-tabs-with-three-state-rollover.php

I had to add spans for text in order to get some space for text ...
If this can be done wihout please let me know ...

But will follow your suggestions and remove &nbsp; from spans ...
Yes i use the FireFox plugin

Note: I used div on order to "center" tabs menu but it does not work ok except when given width ...

Thank You

 

See, that's class/id/element heavy too. There is no reason for the HTML for that to be more than:

<ul id="tabsDemo" >
	<li><a href="#">Welcome<span></span></a></li>
	<li><a href="#">Tutorials<span></span></a></li>
	<li class="current"><a href="#">Links<span></span></a></li>
	<li><a  href="#">Digital Art<span></span></a></li>
</ul>

Code (markup):

You ever heard George Carlin's routine about abortion? Not every ejaculation deserves a name? Well, you seem to be plagued by the problem 'not every element needs a wrapper or a class'. You've gone class-happy. For example, IF you actually needed the wrapping div, that would mean you wouldn't need an id on the UL. You've got the .current class on the LI, what does the anchor need a class for? You aren't even doing anything with the .textspace spans, and if you did need a span there for something you could use another tag as the sandbag like say... B. Then you wouldn't need the imgholder class either.

I'm heading to bed, but tomorrow I'll a toss together the CSS to show you how that would be done. I will probably show you two different ways - there's the float with an absolute positioned child element, and the nested inline-block method.

Oh, and some more carriage returns and consistant indenting wouldn't hurt either

 

Actually, looks like you got it for the float technique...

Oh, and I would never design a website with alpha .png's - not only do they not work without fat bloated scripts in IE, they also tend to themselves be fat bloated rubbish. Case in point you've got 13k of image for what I'd probably have less than three. (though that's not as bad as some websites I've seen using 2-3 MEGS of alpha .png for what wouldn't even be 70k total if they pre-composited)

Hmm, I would also advise against condensing classes to a single line (that's a confusing mess), DE-INDENT yer closing brackets (or at least indent them consistantly), and transparent is the default behavior for background, you don't need to state it.

The following is a a similar technique using inline-block. In this case inline-block is superior to float because we can use text-align to center it.

#tabsDemo {
	text-align:center;
	list-style:none;
	overflow:hidden; /* wrap floats */
	height:44px; /* trips haslayout, wrap floats IE */
	font:bold 14px/44px sans-serif;
	background:url(images/tabs.png) 0 0 repeat-x;
}

#tabsDemo li {
	display:inline;
}

#tabsDemo a {
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	position:relative;
	height:44px;
	padding-left:10px;
	text-decoration:none;
	vertical-align:middle;
	color:#FFF;
	background:url(images/tabs.png) 0 -45px no-repeat;
}

#tabsDemo a span {
	position:absolute;
	top:0;
	left:100%;
	width:10px;
	height:44px;
	font-size:1px;
	vertical-align:middle;
	background:url(images/tabs.png) -500px -45px no-repeat;
}

#tabsDemo .current a {
	background-position:0 -135px;
}

#tabsDemo .current a span {
	background-position:-500px -135px;
}

#tabsDemo a:active,
#tabsDemo a:focus,
#tabsDemo a:hover {
	color:#FFF;
	background-position:0 -90px;
}

#tabsDemo a:active span,
#tabsDemo a:focus span,
#tabsDemo a:hover span {
	background-position:-500px -90px;
}

Code (markup):

Though you'd have to use the 'whitespace trick' to remove unwanted whitespace between elements the browser is likely adding.

<ul id="tabsDemo" >
	<li><a href="#">&nbsp;Welcome<span></span></a></li
	><li><a href="#">&nbsp;Tutorials<span></span></a></li
	><li class="current"><a href="#">&nbsp;Links<span></span></a></li
	><li><a  href="#">&nbsp;Digital Art<span></span></a></li>
</ul>

Code (markup):

 

Hi deathshadow ...
I have found interesting example where JQuery adds a span , needed in markup ...
This is ok if someone already uses JQuery lib.
http://www.webdesignerwall.com/demo/decorative-gallery/decorative-gallery-index-jquery.html

And I got some dotted borders in FireFox ...
fixed using this:
http://www.vision.to/fix-remove-dotted-borders-from-links.php

I'm working now on another menu 3-state rollover a "matrix" system ...
http://www.vision.to/top-tab-matrix-important-links.php

Soon will write a tutorial and publish CSS code so you can see if it has bugs
I got your point about ID selectors and you are right by using them classes in many cases are not needed ...

Thank You
P.S.
I have fixed the text space problem by adding:
padding-right:10px;
A bit tricky but it works as used on my website navigation ...

#tabsDemo a {
float:left;
position:relative;
padding-left:10px;
padding-right:10px;/* adding space to text */
margin-right:10px; /* adjust space between tabs ... */
text-decoration:none;
color:#fff;
background:url(images/articles/buttons_tabs2.png) 0 -45px no-repeat;
}

 

I would say no just because I wouldn't use jquery. It's fat, bloated, slow and is another of those 'shortcuts' that is the difference between professional code and just sleazing out a site. jquery is 30k of fat bloated rubbish that 99% of the time either doesn't add anything useful to the page, or amounts to the old square-peg round-hole syndrome. (see my opinion of frameworks)

... and being that page has no actual hover states I can see under Opera, I'm not certain what all those declarations are doing apart from sucking down bandwidth. Oh, I see, it's the different frames - see, I hate that because it's chewing bandwidth for something that could just as easily be composited before putting it on the server - YES, it means it's not automated, but it also means you aren't blowing bandwidth on fixing IE, bandwidth on a separate image, handshakes on a separate image, or a 32k atrocity like that gold frame.

Yeah, firefox's 'outline' behavior on :focus is a pain in the ass. Usually if I care about that I toss it into the :focus state since that's the only one effected, though you can just as easily put it in the anchor.

Should only be an issue when the user clicks, in which case if the next page is served fast enough who gives a ****, though firefux has the nasty habit of leaving it 'focused' when you hit 'back' - which is technically incorrect. (and pretty stupid too)

I've done a lot of those the past three years or so, so I can likely give you some pointers there. One thing you may encounter is IE leaving the elements 'stuck' on. For some reason if you add a color change to the hover state, even when there isn't text, it 'fixes' it.

I've actually been playing with a new method of implementing that which might be less CSS - I'll post it to this thread when it's up and running. It uses a technique I've used to varying degrees of success with image submits in forms.

Only problem with that is you are ballparking based on the font-size, which could change if the available fonts are different and have different kerning (like say... under the various *nix flavors which use freetype, which kerns text like a sweetly retarded crack addict). Reformatting the HTML to make it even avoids that little problem - though yes stating it as padding will work for probably 90% or so of your visitors.

 

Hi again
And here the 4 buttons "matrix"
http://www.vision.to/single-image-three-state-rollover-buttons-matrix.php
There is always a room for improvements

 

Check this. Above I mentioned another approach that might mean less headaches in the CSS? Well, this is it, reworked to be based on your example:

http://www.cutcodedown.com/for_others/feha/matrix/template.html

as always the directory:
http://www.cutcodedown.com/for_others/feha/matrix

is unlocked for easy access to the bits and pieces.

It's an oddball combination of sliding the background around AND sliding the element itself around. We just make the LI the floated container, set position:relative on it, fix the dimensions, set overflow:hidden, then absolute position the anchor inside it. With the overflow set to chop off bits of the anchor that would be outside the LI, we can move the element up and down meaning we don't have to declare the background position on each and every hover state.

Again, tested in IE 5.5, 6 & 7, FF 2 & 3, Opera 9.27 and 9.52 beta, and Safari 3. I've done it the way your example did a great many times and it always bothered me how many :hover state declarations I ended up having to make to move the background around (one for every line item) - This way you only need to set the initial offset, not all the hover states.

I used this same technique not to long ago on a input[image] - I put a wrapper around it and trapped the hover state on the input, sliding the input up to reveal the other half of the image.

 

Bah, you are too good Jason. I tried to cut down the original menu, by adjusting the image, and I barely cut off anything because I had to add (considerably) more HTMl and CSS.

The new image looked like this:



I ain't even gonna bother posting the code, cause it wasn't that effective

 

Aw, come on - then we could all point and laugh... Kidding.

Actually, post it up - looking at all the different ways of implementing things is good practice - even methods you would initially reject may have some value if applied elsewhere.

 

Fine, fine. Of course, following some of your advice on MSN, I fixed it up a teeny little bit:

http://dredgy.net/examples/menu/

 

Hi blueparukia and welcome
Deathshadow thank you once again for "cutting -down my code"

I'v updated my tutorial
You are a "green planet " coder
Cutting Down the code it cut's processing energy and this saves some more microA on servers

Blueparukia you got some great tiny image which works great , this saves energy too

BTW: i have to add always <a href="#nogo"> to prevent "Jump to the top" if user clicks on demo ...

 

Nah, nothing so noble. I just learned programming back when 4k of RAM was a pipedream. Cut my teeth hand coding 4040 assembly and entering it 8 bits at a time using toggle switches in the 70's. Going to 16k of RAM with 135k floppies and a 8k ROM basic interpreter was like "What am I going to do with all this"

Tends to make one a bit ruthless when it comes to optimizing.

 

Thanks Deathshadow, my first computer was a ZX-Spectrum 48k (1982)

My next tutorial ("challenge") is going to be :
http://www.vision.to/js-li-hover-fix.php (for IE6 only)

I would like to create a dropdown menu that will have a "sliding doors" features ...
more levels, heh not an easy task

With background image decorations

I have found very interesting and elegant solution:
http://css-class.com/articles/ursidae/bears5.htm

Will try to add a "sliding doors" with single image ...
Any suggestions are welcome ...

I know the CSS only menus from Stu (cssplay.co.uk)
But there are lot's of conditional comments+tables in order to support IE6.
Using this tiny JS wont hurt and when IE6 is gone just remove the script no need to rewrite the HTML ...

 

So what to you think deathshadow ?
The top menu could be same as it is with single image sliding doors ...

Is it possible to make it for submenus that is will be expandable (vetically-horizontally) , I mean just for UL of sub menus as UL would contain for example "rounded" corners image ?