SitePoint Sponsor

User Tag List

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

    Put Buttons in Unordered List?!

    I have three buttons as part of a Comments module I'm building.

    Can I put the buttons in an Unordered List?

    Would I want to?

    Here is my code...

    Code HTML4Strict:
    <ul>
    	<li>
    		<a href="<?php echo WEB_ROOT ?>sign_in.php">
    			<img src="<?php echo WEB_ROOT ?>buttons/SignIn2.png" alt="Sign In" />
    		</a>
    	</li>
    	<li>
    		<a href="<?php echo WEB_ROOT ?>create_account.php">
    			<img src="<?php echo WEB_ROOT ?>buttons/CreateAnAccount.png" alt="Create an Account" />
    		</a>
    	</li>
    	<li>
    		<a href="<?php echo WEB_ROOT ?>create_profile.php">
    			<img src="<?php echo WEB_ROOT ?>buttons/BuildYourProfile.png" alt="Build Your Profile" />
    		</a>
    	</li>
    </ul>

    Thanks,


    Debbie

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,615
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    I'm not sure I see why it would be necessary. Would you need the bullets?

    If you wanted them all horizontally, just put the anchor tags side by side.

    If you wanted them stacked vertically, maybe <br>, or div (if you wanted to control the padding/margins).
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,919
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Force Flow View Post
    I'm not sure I see why it would be necessary. Would you need the bullets?

    If you wanted them all horizontally, just put the anchor tags side by side.

    If you wanted them stacked vertically, maybe <br>, or div (if you wanted to control the padding/margins).
    No bullets.

    It just seems semantically correct.

    It also seems to make laying things out much easier.


    Debbie

  4. #4
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ask yourself, "Is that a list of related choices?" If it is, then a list is called for. If not, it's probably not.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    it doesn't look like you mean buttons as in the form element <button></button>, but you are referring instead to anchors.

    if such is the case.. sure. in fact most navigation is a list of anchors. so two/three buttons would be a really short list, but semantically correct. The thing to think about is are you just blating your code with something that could be just as easily achieved with <P> or <div> and CSS ( giving the anchor a display:block...(no need to use BRs!!!)

    I would reason as such:
    if you have two/tree "buttons" now but expect that more could be added to that containing element/ semantic group at some other point or if you need extra hooks for CSS use a UL... otherwise.. use a DIV.


    Code:
    <div id="logbut">
            <a href="<?php echo WEB_ROOT ?>sign_in.php">
                <img src="<?php echo WEB_ROOT ?>buttons/SignIn2.png" alt="Sign In" />
            </a>
            <a href="<?php echo WEB_ROOT ?>create_account.php">
                <img src="<?php echo WEB_ROOT ?>buttons/CreateAnAccount.png" alt="Create an Account" />
            </a>
            <a href="<?php echo WEB_ROOT ?>create_profile.php">
                <img src="<?php echo WEB_ROOT ?>buttons/BuildYourProfile.png" alt="Build Your Profile" />
            </a>
    </div>
    With some slight CSS to style that is much more compact. Again its a matter of convenience , whether you want to use a three-item list or not.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,919
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Ask yourself, "Is that a list of related choices?" If it is, then a list is called for. If not, it's probably not.

    cheers,

    gary
    Yes, I feel it is a related list (except they are images/buttons).


    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,919
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    it doesn't look like you mean buttons as in the form element <button></button>, but you are referring instead to anchors.

    if such is the case.. sure. in fact most navigation is a list of anchors. so two/three buttons would be a really short list, but semantically correct. The thing to think about is are you just blating your code with something that could be just as easily achieved with <P> or <div> and CSS ( giving the anchor a display:block...(no need to use BRs!!!)
    I actually want the buttons side-by-side almost like horizontal navigation tabs, but with spaces in between them. (Thus why the <ul> and <li> work nicely.)


    I would reason as such:
    if you have two/tree "buttons" now but expect that more could be added to that containing element/ semantic group at some other point or if you need extra hooks for CSS use a UL... otherwise.. use a DIV.


    Code:
    <div id="logbut">
            <a href="<?php echo WEB_ROOT ?>sign_in.php">
                <img src="<?php echo WEB_ROOT ?>buttons/SignIn2.png" alt="Sign In" />
            </a>
            <a href="<?php echo WEB_ROOT ?>create_account.php">
                <img src="<?php echo WEB_ROOT ?>buttons/CreateAnAccount.png" alt="Create an Account" />
            </a>
            <a href="<?php echo WEB_ROOT ?>create_profile.php">
                <img src="<?php echo WEB_ROOT ?>buttons/BuildYourProfile.png" alt="Build Your Profile" />
            </a>
    </div>
    With some slight CSS to style that is much more compact. Again its a matter of convenience , whether you want to use a three-item list or not.
    I guess I could achieve the same styling using your way, but I'm just used to working with <UL> and <LI> for navigation, and since they are side-by-side horizontally, it seemed like a good extension of what I'm used to doing.



    Debbie

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I actually want the buttons side-by-side almost like horizontal navigation tabs, but with spaces in between them.
    no big.. IMGs are inline elements... they will display side by side by default. as far as spacing.. use margin. For example:

    .logbut a{margin-right:1em; } /*adjust space o your taste*/

    But as I said earlier , the UL can be appropriate if you plan to vary the number or list items; this situation is unique in which you actually just have so few element and they are images ( not text). and never be afraid to move the rule you have applied to LIs so that they apply to an A, you just need to make sure the A displays as a block first.. by either adding display:block; or if its being floated ( which automatically makes an element a block



    remember dont get use to using any mark up but for its original SEMANTIC meaning. I am sure you have heard this from from other forum members.

  9. #9
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Yes, I feel it is a related list (except they are images/buttons).
    Always keep in mind that those images and buttons represent text in some form. Their markup should reflect that, and a graceful failover provided. In other words, if images fail or are disabled, the underlying text should become available.

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,919
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gary.turner View Post
    Always keep in mind that those images and buttons represent text in some form. Their markup should reflect that, and a graceful failover provided. In other words, if images fail or are disabled, the underlying text should become available.

    cheers,

    gary
    Isn't that what I have?

    <a href="<?php echo WEB_ROOT ?>sign_in.php">
    <img src="<?php echo WEB_ROOT ?>buttons/SignIn2.png" alt="Sign In" />
    </a>


    Debbie

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    One of the things to keep in mind about the list vs. just slap the anchors in a single container approach, is the grammar of it.

    Anchors do NOT change the grammar/meaning of what they are around. It might be saying "yes this is an anchor" -- but if I made the sentence:

    My most recent retroGame, Paku Paku is a classic DOS game written in Turbo Pascal. I have managed to make it available online using the Java Port of DosBox.

    The presence of links in the above paragraph does not change the meaning of it's sentences... It's all just CDATA and it makes sense links or no...

    Now, as a single sentence/phrase/paragraph does:

    Sign In Create an Account Build Your Profile

    Make any sense at all? that's what just slapping anchors in there with no block level containers around them does.

    NOT that I would be using IMG tags for those -- it makes hover states harder, doesn't gracefully degrade, etc, etc... That's what image replacement is for.

    Oh, and I'd also stop opening and closing php every line and make that all a single echo statement -- gah that drives me nutters; but I'm the whackjob who wants to see <?php and ?> COMPLETELY REMOVED from the PHP specification.

    If I was writing that same section of markup, it would probably end up thus:
    Code:
    echo '
    <ul>
    	<li class="signIn">
    		<a href="',WEB_ROOT,'sign_in.php">
    			Sign In
    		</a>
    	</li><li class="createAccount">
    		<a href="',WEB_ROOT,'create_account.php">
    			Create an Account
    		</a>
    	</li><li class="buildProfile">
    		<a href="',WEB_ROOT,'create_profile.php">
    			Build Your Profile
    		</a>
    	</li>
    </ul>';
    Everything else handled in the CSS.

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Everything else handled in the CSS.
    Yes. Unless you must have a strange font in the buttons, you can make these anchors look (and even act) like buttons with CSS. If you need a rounded-buttony look in IE, you might use background images on the anchors instead of pure CSS.

    You can give them "buttony" behaviour by having them move 1px down on :active. This gives a nice visual feedback to sighted users with graphical browsers.

    Your list looks like a list of options to me, so yeah, it's a list. Good job.

    Isn't that what I have?...
    <img src="<?php echo WEB_ROOT ?>buttons/SignIn2.png" alt="Sign In" />
    Yes. I like plain anchors + CSS or + background images better, but mostly only because only Gecko seems to let us style the alt text when no image loads (esp... making that text bigger and the correct link colour).

    One possible problem with using images + alt text is, if you are making the size of the anchors or the images themselves small enough (small px widths and heights), many other browsers still display those dimensions when the image doesn't load and then try to stuff the alt text in there. It can get cut off in those browsers.

    But if these are large-enough anchors/images then img + alt would work as well. Just, test in browsers like Safari and IE before deploying, and try a text-enlarge or two (different than zoom). You'll see right away if there are any problems with your implementation.

  13. #13
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,919
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Yes. Unless you must have a strange font in the buttons, you can make these anchors look (and even act) like buttons with CSS. If you need a rounded-buttony look in IE, you might use background images on the anchors instead of pure CSS.

    You can give them "buttony" behaviour by having them move 1px down on :active. This gives a nice visual feedback to sighted users with graphical browsers.
    Have any examples/links you can show me what you're doing/meaning? (I'm kinda clueless on this topic - read stuck back in 1995!)


    Your list looks like a list of options to me, so yeah, it's a list. Good job.
    My thinking too. Thanks!


    Yes. I like plain anchors + CSS or + background images better, but mostly only because only Gecko seems to let us style the alt text when no image loads (esp... making that text bigger and the correct link colour).

    One possible problem with using images + alt text is, if you are making the size of the anchors or the images themselves small enough (small px widths and heights), many other browsers still display those dimensions when the image doesn't load and then try to stuff the alt text in there. It can get cut off in those browsers.

    But if these are large-enough anchors/images then img + alt would work as well. Just, test in browsers like Safari and IE before deploying, and try a text-enlarge or two (different than zoom). You'll see right away if there are any problems with your implementation.
    Again, if you have any examples and/or can enlighten me more on this topic I'd like to expand my knowledge.

    Thanks Stomme,



    Debbie

  14. #14
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick example of the technique many of us are talking about here ... well, kinda. I'm trying something new.

    CSS Image Menu Demo

    as always, directory wide open:
    Index of /for_others/DoubleDee/example1

    All three buttons with both states in a single file:
    http://www.cutcodedown.com/for_other...mages/menu.png

    Excuse the crappy image, I slapped it together in seconds.

    I use :after (and the IE expression workaround) to create the element that is absolute positioned over the text... I make that element 64px tall then chop off the excess using overflow:hidden on the anchor -- when you hover the anchor, the child element we add with CSS is slide up 32px revealing the bottom half -- then for each different text we want just slide it over by the width.

    Hope this helps. Try it out images on and images off.


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
  •