Horizontal rollover buttons?

I used the tutorial found HERE to create rollover effect buttons using CSS and it worked great but the buttons only display vertically, I can't get them to display horizontally. I tried to replace display:block with float: left but when the window is minimized, it tampers with the design so that wasn't too effective.

Is there a better way to use that effect but have the buttons display horizontally rather than vertically?

I want it to display [button1][button2] rather than
[button1]
[button2]
^ which is how it's currently displayed using that same exact code for multiple buttons.

Thanks in advance to whoever can help me.

 

You can try display:inline-block (and the two -moz 'fixes'), but that will insert spaces in-between the elements.

When you say minimized, how can you see the layout when it's minimized? Do you mean when you make the browser window smaller? (aka Restore from maximize and then resize?) - if so are you applying a min-width, and how exactly would you WANT it to behave when the page gets smaller.

BTW - that tutorials technique while it 'works' for screen, is a miserable accessibility /FAIL/ when images are disabled - which is why a technique like Gilder-levin would serve you a lot better. Hiding the text via display:none will make screen readers not read the menu - and assigning it as a background to the anchor limits your versatility a bit.

If I was writing that, I'd take a slightly different approach by making the span a empty sandbag after the text, instead of wrapping it.

<a href="#" class="eMailUs">Email Us<span></span></a>

Oh, and I pulled the title attribute. there is NO legitimate reason to have a title attribute that's identical to the text contained inside it.

CSS-wise, my approach would read:

.eMailUs {
	position:relative;
	float:left;
	overflow:hidden;
	width:107px;
	height:23px;
}

.eMailUs span {
	position:absolute;
	display:inline; /* set up for IE 'anti-stick' state change */
	top:0;
	left:0;
	width:100%;
	height:46px;
}

.eMailUs:active,
.eMailUs:focus,
.eMailUs:hover {
	color:#001; /* legacy IE often won't render anchor hovers without a style change */
}

.eMailUs:active span,
.eMailUs:focus span,
.eMailUs:hover span {
	display:block; /* state change makes sure IE renders movement */
	top:-23px;
}

Code (markup):

Which makes it so that when images are disabled you can still have a visible menu - it works by placing the span with it's background image OVER the text to hide it, instead of removing the text. I'd probably be adding full color state changes including background-color to it so that images off it's still 'attractive'.

Now you are probably thinking "why is he moving it instead of moving the background?" - this is so that if you were making a menu out of these you can do so with a single image without stating background position for each and every possible state. For example:

<ul id="mainMenu">
	<li class="home"><a href="/" class="current">Home<span></span></a></li>
	<li class="aboutUs"><a href="/aboutUs">About Us<span></span></a></li>
	<li class="contact"><a href="/contact">Contact<span></span></a></li>
	<li class="forums"><a href="/forums">Forums<span></span></a></li>
</ul>

Code (markup):

Which could then use this CSS:

#mainMenu {
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats in IE */
	font:bold 14px/24px arial,helvetica,sans-serif;
}

#mainMenu li {
	display:inline; /* don't try to do a whole lot more than this with them */
	height:1%; /* trip haslayout, prevent disappearing spans in IE7 */
}
	
#mainMenu a {
	position:relative;
	float:left;
	overflow:hidden;
	height:24px;
	text-align:center;
	text-decoration:none;
	color:#246;
	background:#CDE;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	background:#DEF;
}

#mainMenu a span {
	position:absolute;
	display:inline; /* set up for IE 'anti-stick' state change */
	top:0;
	left:0;
	width:100%;
	height:72px;
	background:url(images/mainMenu.png) no-repeat;
}

#mainMenu a:active span,
#mainMenu a:focus span,
#mainMenu a:hover span {
	display:block; /* state change makes sure IE renders movement */
	top:-24px;
}

#mainMenu .current span {
	top:-48px;
}

#mainMenu .home {
	width:96px;
}

#mainMenu .home span {
	background-position:0 0;
}

#mainMenu .aboutUs {
	width:128px;
}

#mainMenu .aboutUs span {
	background-position:-96px 0; /* == .home width */
}

#mainMenu .contact {
	width:112px;
}

#mainMenu .contact span {
	background-position:-224px 0; /* == .home + .aboutUs width */
}

#mainMenu .forums {
	width:104px;
}

#mainMenu .forums span {
	background-position:-336px 0; /* == .home + .aboutUs + .contact width */
}

Code (markup):

If we were just sliding the background around, we'd have to say all those background positions over with the slide for each 'state'. This method allows you to put an entire menu into a single image - each button next to each-other on the horizontal, while each 'state' is atop each-other. You can see I add a third state to that for the 'current' page. Less files == less handshakes, if the images all share colors that means only one palette instead of twelve reducing the overall filesizes; it's win/win.

Recent rewrite I did for azace shows this technique in action:
http://www.cutcodedown.com/for_others/azace/

That entire menu uses just the one image:
http://www.cutcodedown.com/for_others/azace/images/mainMenu.png

It's a really versatile technique... and you still get a usable menu when images are disabled.