Justified List of Items

Does anyone know how to make a list of items (like you would see on a menu for a restaurant) appear on a web page as a fully justified list (meaning that both the left and right ends of all the lines are flush with the margins)? I have tried using a combination of regular HTML with CSS, but I have not gotten this to work. Any ideas?

 

Try posting code. That's the only suggestion I can give right now.

 

These are the files I'm working with. I need it to look more like a real menu, and I think the main problem is getting the left and right margins to line up nicely. Anyone have any ideas?

 

*working on it*

Thanks.

 

Any news or ideas on this?

 

*bump*

Solutions? Code? Ideas? Anything?

 

In your case the most common way to achieve this would simply be to use a table. If you insist on having the dots fill in the blanks I think the easiest way would involve tiling an image of dots, but it would be sorta confusing. Of course I suppose you could just fill in the dots manually since you arn't using a script to generate the list. I'm so used ot drawing from DB's that normally I couldn't cheat like that.

 

I meant to attach this to the last message but it won't let me edit it in.

I quickly edited the first few enteries to show you what I mean. I did use one or two depricated attributes. Which would still validate as being standards compliant but if you want to be picky you can convert them to the CSS equivalents, I was just being lazy. Also it would line up better if you didn't use the dots.

 

I know that the whole thing would probably be less complicated if there were no leading periods, but I think that that's just how they wanted it. I don't really care if the method used is up to standard or not, just so long as a solution is found (it isn't a professional website). I can't draw the data from a database, at least I do not believe so. I just wondered if there were a Javascript that could do this sort of function (creating leading periods) or some other method to get it to work.



EDIT: Do you think that making the leading periods inhabit their own cell/column in the table would work? The cell text could be right-aligned so that if gives the illusion that it lines up with the last column. But then, each cell would have to be able to be different lengths, or else they'd all have to be separate tables. Any ideas on this?

 

No you can't use another cell that's just for the periods because you can't change cell lengths like that. I don't see what you're problem is. I wrote up half the thing for you already. All you have to do is finish it. It's not a problem for you since you arn't drawing form a DB. Just use what I posted and you're done.

I realize the periods don't line up 100% perfect on mine, but if you want them to just used a fixed width font. Such as courier so that every character is the same width. Although I think that's getting kinda picky since the mis alignment is only 2 or 3 pixels tops. Anyways up to you.

 

Well, after thinking about it for a while, I used Word's Table of Contents wizard so I could get a better visualization of what I was looking for. After that, I got an idea, went with it, and it looks SO much better than what I was originally doing. Thanks Coco, for mentioning fixed width fonts, as that is part of my new code. I'll attach it so you can see what I mean.



EDIT: I tested it at 1400x1050, 1024x768, and 800x600 (OMG, MY EYES!!!) resolutions, and it seemed to work at all of them (at least on my screen). Typing the code may be a bit time consuming, but the visual result it achieves is really appealing in my opinion.

 

Hee hee, there is a better way to do that. Depends what you're looking for really. An image of a dot, set as a background image, repeating in the x direction only. But if you're not bothered about updatability, your solution is fine

Also, the way you've done it means that there is no real need for the table itself. You could replace the table with a div, use <p>'s or <br />'s to make the new lines. Much more efficient code that way.

 

Yeah I mentioned the idea of tiling an image of a dot but then it seemed like too much work to explain since you'd have to set it as a background image and then you'd have to set the background color of the text to white so that the periods weren't showing behind the text as well. But then I think some browsers won't display that properly, which means I'd have had to play with it for a bit to get it working on the main browsers. So for such a small list it made more sense this way, IMHO.

 

I considered the repeating image too, but I already have a working solution that seems to work okay for this particular web page. To use the repeating image idea, I'd have to get the code for it to work, and it would be using a LOT of images (cells with backgrounds). This would be hell on slower connections/PCs to load. Plus, not all browsers run CSS correctly (mostly older browsers) and I was taking that into consideration. It's not meant to be a top-of-the-line site, so I didn't think it would need an advanced solution.

Maybe on a personal site of my own, I would use CSS more, but I think that this worked out fine for now.