SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Creating & Displaying Side-by-Side Buttons

    (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...
    Attachment 59139


    Here is my HTML...
    HTML Code:
    	<!-- 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...
    Code CSS:
    .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

  2. #2
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    (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.
    <cfset myblog = "http://cydewaze.org/">

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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
    Code:
    <li><a class="button" href="' . BASE_URL . 'members/log_in.php?addComment=TRUE">Log In</a> or </li>
    OR (pun!)
    Generating it with CSS
    Code:
     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
    Code:
     .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:

    Code:
    .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

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,762
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    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

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •