Put Buttons in Unordered List?!

HTML & CSS
1

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…


<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

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).

3

No bullets.

It just seems semantically correct.

It also seems to make laying things out much easier.

Debbie

4

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

5

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.


<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

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

Debbie

7

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.


<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

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

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

10

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

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 [url=http://en.wikipedia.org/wiki/Turbo_Pascal]Turbo Pascal. I have managed to make it available online using the [url=http://jdosbox.sourceforge.net/]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:


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

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

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! :slight_smile:

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

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:

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.