Creating & Displaying Side-by-Side Buttons

[DoubleDee]

(I cringe at bringing this topic up for fear someone like DeathShadow is going to let me have it, but here goes...)

My website has been designed to look and feel like a Desktop Application, including lots of clickable Buttons to navigate around.

Last Fall, Paul O' showed me how to place an Image Slice as the background behind my anchor elements <a> to create the illusion of Buttons.

Everything has been great, except for two things...

1.) While coding Release #2, I seem to have broken many of my Buttons.

2.) I am wondering if my markup could be cleaned up some.


As such, I could use some help fixing things and improving them as well.

Here is a screenshot of my broken buttons...
BrokenButtons.png


Here is my HTML...

	<!-- SET BUTTONS -->
	<?php
		if ((isset($_SESSION['loggedIn'])) && ($_SESSION['loggedIn'] == TRUE)){
			// User Logged In.
			// Show button: 'Add a Comment'
			echo '<p></p>
				<ul>
					<li>
						<a class="button" href="' . BASE_URL . 'articles/add_comment.php">Add a Comment</a>
					</li>
				</ul>';
		}else{
			// User NOT Logged In.
			// Show buttons: 'Log In', 'Create an Account', 'Build a Profile'
			echo '<p>To leave a comment, you need to...</p>
				<ul">
					<li>
						<a class="button" href="' . BASE_URL . 'members/log_in.php?addComment=TRUE">Log In</a>
					</li>
					<li>or</li>
					<li>
						<a class="button" href="' . BASE_URL . 'members/create_account.php">Create an Account</a>
					</li>
					<li>or</li>
					<li>
						<a class="button" href="' . BASE_URL . 'members/build_profile.php">Build Your Profile</a>
					</li>
				</ul>';
		}// End of ARTICLE COMMENT BUTTONS.
	?>

Here are some styles that I think relate...

.button{
	display: inline-block;
	width: auto;
	overflow: visible;
	margin: 2em 0 1em 0;
/*	padding: 0.3em 2em 0em 2em;		/**/
	padding: 0em 2em 0 2em;		/**/
	border: 1px solid #326985;
	font-family: inherit;
	font-size: 12px;
	text-align: center;
	color: #FFF;
	background: #3181bc url(/buttons/buttonGradientBlue.gif) repeat-x 0 0;
	height: 29px;
	line-height: 27px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-decoration: none;
}
 
.button:hover{
	background-position: 0 -27px;
}

I want the Buttons to be side-by-side with the words "or" centered evenly both horizontally and vertically between each button.

How can my markup and styles be improved?

Hope that makes sense?!

Thanks,


Debbie

[cydewaze]

(I cringe at bringing this topic up for fear someone like DeathShadow is going to let me have it, but here goes...)

I've refrained from asking many questions due to this same fear.

[DoubleDee]

Maybe I over-reacted, but I got things fixed. (It's just frustrating when what was working suddenly stops when you didn't touch it?!)

At any rate, I would still be interested in hearing opinions on how I used an Unordered List <ul> to group and handle my 3 Buttons and 2 OR's aligned in a horizontal row.

Just be nice!


Debbie

[samanime]

You have a couple approaches.

My personal choice would be just omit the or's, however that's from a UX perspective (the or is kind of implied).

However, I won't harp on that. =p

I think having your items in a list like that is pretty acceptable. Another alternative would be to use the "content" CSS property to inject it after the first two list items.

For the actual styling, you have two basic ways, floating or display: inline(-block). They both have pros and cons. If you don't need to explicitly set dimensions, I'd go with display: inline.

[dresden_phoenix]

who knows what evil lurks in the code of Dee? The DeathShadow Knows...

Ok, joking aside. Semantically speaking the word "or" is not a list item! I would suggest including it in the button LI

<li><a class="button" href="' . BASE_URL . 'members/log_in.php?addComment=TRUE">Log In</a> or </li>

OR (pun!)
Generating it with CSS

 ul.orList li+li :before{ content:" or "; }

if you are concerned about IElt8... there are also easy ways to make it support the :after pseudo element!

I just wanted to beat DS60 to this point

As as far as the button displaying side by side. you ,button class is applied to the ANCHOR TAG. So since you have wraped each button in LI's they are no longer side by side.

you could give the button class to the LI and

 .button a{
	display:block;
	width: auto;
	margin: 2em 0 1em 0;
/*	padding: 0.3em 2em 0em 2em;		/**/
	padding: 0em 2em 0 2em;		/**/
	border: 1px solid #326985;
	font-family: inherit;
	font-size: 12px;
	text-align: center;
	color: #FFF;
	background: #3181bc url(/buttons/buttonGradientBlue.gif) repeat-x 0 0;
	height: 29px;
	line-height: 27px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-decoration: none;
}
 
.button a:hover{
	background-position: 0 -27px;
	}

.button{display:inline-block;}/*Or you could use float:left..remembering to auto-clear the container UL with overflow:hidden!*/

OR BETTER STILL!
DONT give a class to anything in the list on the mark up... only the UL ( lets say class="orList" as before) and add this selectors to your CSS:

.orList  a, .button{ ...}
.orList  a:hover, .button:hover{...}
.orList li {display:inline-block;}/*Or you could use float:left..remembering to auto-clear the container UL with overflow:hidden!*/

This way if you have used the button class on anchors elsewhere on your site your style wont break.

Hope this helps

[Black Max]

DS60 might be the design/coding equivalent of a high colonic, but his advice, no matter how caustically stated, is usually very good, and his reworking/revamping of code is often stellar. He's worth the tooth enamel you grind off reading through his critiques.

[DoubleDee]

DS60 might be the design/coding equivalent of a high colonic, but his advice, no matter how caustically stated, is usually very good, and his reworking/revamping of code is often stellar. He's worth the tooth enamel you grind off reading through his critiques.

I agree, that is why I often call for his assistance!


Debbie

[Black Max]

I agree, that is why I often call for his assistance!

Me too. If he wants to bark the hide off of me, I'm willing to sit through it if he can help me figure out what the hell I'm doing wrong.