Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ General Web Design _ How can I justify an unordered list?
Posted by: ahill92 Oct 9 2010, 06:40 PM
I have a list I'm trying to create and I can't get it to look the way I want. I want the entire list centered on my page, but I want the list (each line) and my bullets to be lined up and justified. Right now each line is centered in the page. I've tried all sorts of things and nothing seems to work. I hope I'm explaining myself in a logical way, but here's my page link to help you see what I mean:
http://www.wondersofdisney.yolasite.com/logos
I mostly know html and a little css. Another dumb question - can you mix the two? Anyways, I would appreciate any help as I'm pulling my hair out having worked on this for 2 days! 
Thanks!!!!!!!!
Posted by: wgabrie Oct 9 2010, 07:12 PM
You can center the list with CSS. First, give the list a width, say 80% or whatever suits your site. Next, center the list with CSS
Also, Yes, you can mix HTML and CSS. Either inline with a style attribute on an HTML element, or with the http://htmlhelp.com/reference/html40/head/style.html in the head tag of your HTML file, and finally, you can link to an external style-sheet with the http://htmlhelp.com/reference/html40/head/link.html.
Posted by: ahill92 Oct 9 2010, 08:13 PM
Where do I insert the codes? Sorry to get so elementary, but my brain is fried from all the failed tries!
You can center the list with CSS. First, give the list a width, say 80% or whatever suits your site. Next, center the list with CSS
Also, Yes, you can mix HTML and CSS. Either inline with a style attribute on an HTML element, or with the http://htmlhelp.com/reference/html40/head/style.html in the head tag of your HTML file, and finally, you can link to an external style-sheet with the http://htmlhelp.com/reference/html40/head/link.html.
Posted by: Darin McGrew Oct 9 2010, 10:58 PM
Please see "Linking Style Sheets to HTML":
http://htmlhelp.com/reference/css/style-html.html
Posted by: wgabrie Oct 9 2010, 11:13 PM
To change the style rules in the look for:
If you want to change all the UL lists to center, add:
If you want to change one UL, first give your ul a "class" attribute, then add:
If 50% width is too narrow than increase the percent or use another unit of measure, or if the width is too wide than reduce the width. You have to play with it to make it fit the way you want it to fit.
Posted by: ahill92 Oct 11 2010, 02:23 PM
It worked! 
Thank you! Thank you! Thank you! It looks so much better lined up! Howerver, I lost my bullets. Any idea what happened?
To change the style rules in the look for:
If you want to change all the UL lists to center, add:
If you want to change one UL, first give your ul a "class" attribute, then add:
If 50% width is too narrow than increase the percent or use another unit of measure, or if the width is too wide than reduce the width. You have to play with it to make it fit the way you want it to fit.
Posted by: wgabrie Oct 13 2010, 12:54 PM
Your site link is broken so I can't see what is wrong.
Usually if the list had image bullets than maybe they were removed somehow, perhaps because of the auto margin on the left side... :S
Perhaps you should put the ul navigation list inside a div tag and apply width and margin: 0 auto; to the div instead of on the list. Some browsers place the bullet inside the margin and changing the margin properties can break the bullet appearance.
Posted by: ahill92 Oct 14 2010, 02:41 PM
Sorry about that. I forgot that I moved the page to a site that allowed me to use tags in a header. It's
http://wondersofdisney.webs.com/logos.htm
Unless I did it wrong, I tried what you suggested. I got the bullets back but the list was no longer lined up. For now, I just went back to the first way you suggested because it looks much nicer, but I would like to find out how to get my bullets back.
Your site link is broken so I can't see what is wrong.
Usually if the list had image bullets than maybe they were removed somehow, perhaps because of the auto margin on the left side... :S
Perhaps you should put the ul navigation list inside a div tag and apply width and margin: 0 auto; to the div instead of on the list. Some browsers place the bullet inside the margin and changing the margin properties can break the bullet appearance.
Posted by: pandy Oct 14 2010, 03:22 PM
I see bullets?
I wouldn't use 'justified' with short lines like that. It has no effect when there's just one line, but as soon as there are two you get the effect and I don't think it's what you want. Up the text size just a little in your browser and look what happens to the line "Walt Disney World".
'text-align: justified' tries to spread the words in each line evenly so both the left and right margins become straight. Not a good idea with just a few words on each line.
Posted by: ahill92 Oct 15 2010, 02:18 PM
As you suggested I changed my text alignment to left instead of justified. However, I had 2 sets of bullets. Little red circles for the indented lists and small red mickey heads for the main list. The circles are showing up, but the mickey head bullets are not. I'm still working on getting those to show up but am at a loss as what to do. 
I see bullets?
I wouldn't use 'justified' with short lines like that. It has no effect when there's just one line, but as soon as there are two you get the effect and I don't think it's what you want. Up the text size just a little in your browser and look what happens to the line "Walt Disney World".
text-align: justified' tries to spread the words in each line evenly so both the left and right margins become straight. Not a good idea with just a few words on each line.
Posted by: Frederiek Oct 16 2010, 03:11 AM
I see both the circles and the mickey heads (in Safari/Mac).
But you do have errors in the markup which you should fix. See the validator report: http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//wondersofdisney.webs.com/logos.htm&warnings=yes&input=yes .
You also have resources that are transferred with the wrong MIME type:
smredbullet2.png, disneylogostitle.png and redmickbullet.png - images transferred with MIME type application/octet-stream.
dot.gif and b, html;ord=1287215433288 and .i - images and scripts transferred with MIME type text/html.
And the init.php has a TypeError: Result of expression 'win.Meebo' [[object Object]] is not a function on line 6.
Posted by: wgabrie Oct 16 2010, 11:43 AM
I think the missing bullets is an Internet Explorer issue, with IE trying to hide the bullets when someone tries to alter the margin or padding on a list. Here's a workaround. It uses CSS's http://htmlhelp.com/reference/css/classification/list-style-position.html to put the bullet inside the list element.
ul ul {list-style:disc inside url(http://wondersofdisney.yolasite.com/resources/smredbullet2.png);}
Posted by: ahill92 Oct 21 2010, 02:32 PM
Thank you. Most of what you said went right over my head, but I did check the validator report. I'll try to fix those up.
I see both the circles and the mickey heads (in Safari/Mac).
But you do have errors in the markup which you should fix. See the validator report: http://www.htmlhelp.com/cgi-bin/validate.cgi?url=http%3A//wondersofdisney.webs.com/logos.htm&warnings=yes&input=yes .
You also have resources that are transferred with the wrong MIME type:
smredbullet2.png, disneylogostitle.png and redmickbullet.png - images transferred with MIME type application/octet-stream.
dot.gif and b, html;ord=1287215433288 and .i - images and scripts transferred with MIME type text/html.
And the init.php has a TypeError: Result of expression 'win.Meebo' [[object Object]] is not a function on line 6.
Posted by: ahill92 Oct 21 2010, 02:50 PM
Thank you, thank you, thank you again! It worked. At least I'm seeing the mickey head bullets in Internet Explorer. Hopefully the other web browsers can still see them too. I think all my problems (at least for this page and this issue) are resolved!
I think the missing bullets is an Internet Explorer issue, with IE trying to hide the bullets when someone tries to alter the margin or padding on a list. Here's a workaround. It uses CSS's http://htmlhelp.com/reference/css/classification/list-style-position.html to put the bullet inside the list element.
ul ul {list-style:disc inside url(http://wondersofdisney.yolasite.com/resources/smredbullet2.png);}
Posted by: pandy Oct 21 2010, 03:02 PM
So what did you do?
What Frederiek said above is about HTTP headers. The server is supposed to tell the browser what kind of file it's sending to it. This is done in headers that are sent before the actual file. Each type of file has a certain content-type or Mime type and this is what is sent in the header. For some of the file types on your site the content-type the server declares is wrong. That could cause the browser not to load the file or use it in the wrong way.
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)