...

View Full Version : right positioning of unordered list button?



llizard
10-16-2004, 03:03 PM
I wonder if it is possible to move the buttons for an unordered list over to the right hand side. This is for an unordered list that is to go on the right side of the page. I am hoping the answer is yes so that I won't have to resort to using a background image and positioning on the <li> (although I suppose that is just as viable....)

gohankid77
10-16-2004, 03:23 PM
You can float it to the right using CSS.

ul {
float: right;
}

mcdougals4all
10-16-2004, 07:33 PM
<ul dir="rtl">
<li>item 1</li>
<li>item 2</li>
</ul>


Moves the bullets to the right side.

llizard
10-17-2004, 06:05 AM
gohankid77, that does move the list over to the right but it doesn't move the bullets to the right (which is what I wanted to do)

Ah, yes, mcdougals4all! This is what I was hoping for. Thank you. I would rather use CSS so I googled and found



ul {direction:rtl;}
---------------------------
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>



The above is much cleaner than the workaround I came up with:



ul {list-style: none; float:right;}
li {background:transparent url(images/bullet.gif) no-repeat right; padding-right:12px;}
-----------------------------
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>




Again, many thanks.

brothercake
10-17-2004, 09:06 PM
Noooo! WTF?? You can't use language directionality for physical orientation - you're not writing in an RTL language.

Do what you were doing before - it may be a bit more code, but at least it's not a traversty.

llizard
10-18-2004, 11:39 PM
Noooo! WTF?? You can't use language directionality for physical orientation - you're not writing in an RTL language.

Do what you were doing before - it may be a bit more code, but at least it's not a traversty.

And yet it works - "traversty" or not. (Please reassure me that that was a typo ;))

I checked it in the WDG CSS checker and it validates.

llizard
10-21-2004, 05:57 PM
You can't use language directionality for physical orientation

I'm serious. Aside from what seems to be an aesthetic/semantic reason, why can't one use language directionality for physical orientation of the list button? It doesn't appear to affect the direction of the words - it only affects the button itself.

AaronW
10-21-2004, 06:04 PM
Just out of curiosity, why are you putting bullets on the right hand side of a list? I would personally do the background image thing and align: right. Just makes more sense. And how well suported is rtl?

Roy Sinclair
10-21-2004, 07:13 PM
I'm serious. Aside from what seems to be an aesthetic/semantic reason, why can't one use language directionality for physical orientation of the list button? It doesn't appear to affect the direction of the words - it only affects the button itself.

Non-semantic content would be the problem. Your code would be saying it has RTL content event though the content isn't truly RTL. This means a search engine looking for pages with true RTL content would accidentally include your page. I'm not sure that any search engine would be able to perform such a search right now but if a lot of people misuse the RTL properties it becomes less likely that such a search could ever be made.

llizard
10-21-2004, 09:51 PM
Non-semantic content would be the problem. Your code would be saying it has RTL content event though the content isn't truly RTL. This means a search engine looking for pages with true RTL content would accidentally include your page. I'm not sure that any search engine would be able to perform such a search right now but if a lot of people misuse the RTL properties it becomes less likely that such a search could ever be made.

Ah, this makes some sense. Is there something that I can put into the meta tag to negate the rtl search? (Yes, I know. I could just as easily do the other coding but this way even if images are disabled, the list button still appears on the right)

If there is no way to stop the search engines from thinking there is rtl content, is there a way to have buttons appear in place of background images on the list?

And as to why am I wanting to do this, Aaron, it's because the list is on the right side of the page with a right alignment of text. I think it's aesthetically more pleasing to have the buttons lined up to the right. With CSS disabled, the list is NOT right aligned and the buttons appear normally.

Here is a demo of what I am attempting:

http://llizard.crosswinds.net/listdemo.html

brothercake
10-22-2004, 02:05 AM
So you think it's okay to abuse semantics because you think it looks nicer? Well okay if that's how you feel, why don't you just use a table with list bullets in the right column and text in the left, like this:


<table>
<tr>
<td>list item text 1</td><td><li></td>
<td>list item text 2</td><td><li></td>
</tr>
</table>

llizard
10-22-2004, 04:26 AM
why don't you just use a table with list bullets in the right column and text in the left, like this:


because

I am trying to get away from tables
That won't validate

Roy Sinclair
10-22-2004, 05:01 PM
But you had a workaround that you'd come up with before the "rtl" was suggested. Why not just use that workaround?

Kurashu
10-22-2004, 09:40 PM
Validation and semantics go hand in hand.

bradyj
10-22-2004, 10:13 PM
I'm lost here -- why can't you just align the text to the right and then use a background image with padding? What's the big deal with that way -- it validates, and it's semantic, or am I missing some other need?

brothercake
10-22-2004, 11:16 PM
Validation and semantics go hand in hand.
My point exactly - thank you :thumbsup:

Why are you trying to get away from tables, if you're still prepared to use non-semantic tag soup to make your pages? Or if you are prepared to do that, why not use tables?

llizard
10-22-2004, 11:51 PM
But you had a workaround that you'd come up with before the "rtl" was suggested. Why not just use that workaround?

running Win2K....
If IE6 wasn't choking on the first list item image in the workaround version, I would happily use the workaround.

The workaround and the rtl versions look exactly the same in Opera, Firefox and NS7. All images are showing where expected.

However, IE6 is a whole different story. In the workaround version, IE6 alternately shows half of the bottom list image only, three bottom list images, four bottom list images. The first list item image never shows. IE6 has no problems showing the images in any of the other versions on the demo page (http://llizard.crosswinds.net/listdemo.html).

And of course, you're all absolutely right that there is a fine line between semantics and validation. My apologies.

llizard
10-25-2004, 02:49 PM
Excuse me for replying to myself. I'm bumping this up to find out how to get the workaround version to work properly in IE6. If it can't be done then I fear I'm going to go against the grain and use the rtl version.

running Win2K...

Reiterating: in the workaround version, IE6 alternately shows half of the bottom list image only, three bottom list images, four bottom list images. The first list item image never shows. IE6 has no problems showing the images in any of the other versions on the demo page.

edit: slight change in coding on listdemo.html (http://llizard.crosswinds.net/listdemo.html). Please reload/refresh the page.

bradyj
10-25-2004, 05:19 PM
Okay -- which version on your demo page do you want to work for IE? 1, 2, 3, etc.? We can get those working just fine.

llizard
10-25-2004, 09:37 PM
Okay -- which version on your demo page do you want to work for IE? 1, 2, 3, etc.? We can get those working just fine.

The workaround version please:
http://llizard.crosswinds.net/listdemo.html#workaround

There were objections to other versions that have the list images on the right because of the use of rtl in the list style.

bradyj
10-26-2004, 12:36 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>list demo</title>
<base target="_top">
<meta name="author" content="llizard">
<meta name="copyright" content="Copyright &copy; llizard aka ejm 2004">
<meta name="robots" content="noindex,nofollow">

<style type="text/css">

ul {
background:#fff;
width:28%;
text-align:right;
}
ul li {
list-style-type: none;
padding: 10px 0px 0px 0px;
}
ul li a{
font: 1em/1.5em helvetica, arial, verdana, sans-serif;
color:#900;
list-style-type: none;
background:transparent url(square.gif) no-repeat right;
padding: 0px 22px 0px 0px;
}
ul li a:hover {
color: blue;
}
</style>
</head>

<body>

<ul>
<li><a href="#">home</a></li>
<li><a href="#">links</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">disclaimer</a></li>
<li><a href="#">host</a></li>
</ul>
</body>
</html>


Works on my Mac browsers, I'll check the pc ones at home, but you may see it before I get there, gotta couple hours left till I'm off.
Also, I was under the impression that the big tag was not largely supported and not a standard, so there's no need for it. Either way, you should specify your font size like I did via CSS.

mindlessLemming
10-26-2004, 01:26 AM
Reiterating: in the workaround version, IE6 alternately shows half of the bottom list image only, three bottom list images, four bottom list images.


#menu4 li { position:relative; }

It's another case of IE's hasLayout property needing to be set as true. Adding position:relative; is about the most reliable of the valid ways to trigger this behaviour.

llizard
10-26-2004, 10:42 PM
mindlessLemming, that resolved the problem. Thank you very much! I take it that this will work in IE with Mac or Windows?



I was under the impression that the big tag was not largely supported and not a standard, so there's no need for it. Either way, you should specify your font size like I did via CSS.

I had not heard that the big tag was not largely supported nor that it was not standard. (I'd actually heard the contrary.) Also I'm not so sure that it is necessary to be quite so specific with the size of the font. I'm a big fan of relative sizes. But yes, I suppose that rather than use the "big" tag, I could specify the size in the css using relative sizes.

excerpt from http://www.w3schools.com/tags/tag_font_style.asp


The <tt> <i> <b> <big> <small> tags [...]

They are not deprecated, but it is possible to achieve richer effects using style sheets.

excerpt from http://www.w3schools.com/css/css_reference.asp#font



font-size Sets the size of a font

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%

mcdougals4all
10-26-2004, 11:01 PM
mindlessLemming, that resolved the problem. Thank you very much!

Well, alrighty then. In that case I respectfully withdraw my RTL suggestion. Ouch...

In any case, it's nice to know how to do it the right way.

mindlessLemming
10-26-2004, 11:23 PM
mindlessLemming, that resolved the problem. Thank you very much! I take it that this will work in IE with Mac or Windows?

You're welcome :)
Unfortunately, if it was buggy in IE/mac this probably won't fix it. IE/mac and IE/pc are entirely different browsers based on different rendering engines... The bugs are very different :(

llizard
10-26-2004, 11:33 PM
Unfortunately, if it was buggy in IE/mac this probably won't fix it.

I don't know anyone who has a mac.... I gather that you, bradyj, have access to Mac? Does mindlessLemming's fix work?


Ouch, indeed, mcdougals4all. :) I still think your suggestion was brilliant but can see that it isn't allowed. :( (There MUST be a way of telling search engines that the rtl within the ul is not to be interpreted as note that the page is in a rtl written language!)

bradyj
10-27-2004, 12:36 AM
It works on IE mac with AND without the workaround:) -- and it works in all the other Mac browsers I have to boot.

And you're right, big isn't deprecated -- but it's still better to do it via CSS wether it be em's or big or whatever :thumbsup: that'll save you the hassle of having to update it later on if you need too, much less make the code smaller.

llizard
10-27-2004, 12:09 PM
It works on IE mac with AND without the workaround:) -- and it works in all the other Mac browsers I have to boot.

That's great - a relief as well.

Many thanks to all for the help and suggestions. I'm so happy to have resolved it at last.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum