How can I justify an unordered list? |
How can I justify an unordered list? |
ahill92 |
Oct 9 2010, 06:40 PM
Post
#1
|
Group: Members Posts: 7 Joined: 9-October 10 Member No.: 12,905 |
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!!!!!!!! |
wgabrie |
Oct 9 2010, 07:12 PM
Post
#2
|
Advanced Member Group: Members Posts: 148 Joined: 11-July 10 Member No.: 12,279 |
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
CODE margin-left:auto; margin-right:auto; or the shorthand:CODE margin:0px auto; . Finally, you can add the CODE text-align:justify; to set the text alignment.Also, Yes, you can mix HTML and CSS. Either inline with a style attribute on an HTML element, or with the style tag in the head tag of your HTML file, and finally, you can link to an external style-sheet with the link tag. |
ahill92 |
Oct 9 2010, 08:13 PM
Post
#3
|
Group: Members Posts: 7 Joined: 9-October 10 Member No.: 12,905 |
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 CODE margin-left:auto; margin-right:auto; or the shorthand:CODE margin:0px auto; . Finally, you can add the CODE text-align:justify; to set the text alignment.Also, Yes, you can mix HTML and CSS. Either inline with a style attribute on an HTML element, or with the style tag in the head tag of your HTML file, and finally, you can link to an external style-sheet with the link tag. This post has been edited by ahill92: Oct 9 2010, 08:14 PM |
Darin McGrew |
Oct 9 2010, 10:58 PM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Please see "Linking Style Sheets to HTML":
http://htmlhelp.com/reference/css/style-html.html |
wgabrie |
Oct 9 2010, 11:13 PM
Post
#5
|
Advanced Member Group: Members Posts: 148 Joined: 11-July 10 Member No.: 12,279 |
To change the style rules in the look for:
CODE <style type="text/css"> It's in the HEAD tag.If you want to change all the UL lists to center, add: CODE ul {width: 50%; margin:0px auto; text-align: justify;} .If you want to change one UL, first give your ul a "class" attribute, then add: CODE ul.[insert the name of your class] {width: 50%; margin:0px auto; text-align: justify;} .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. |
ahill92 |
Oct 11 2010, 02:23 PM
Post
#6
|
Group: Members Posts: 7 Joined: 9-October 10 Member No.: 12,905 |
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: CODE <style type="text/css"> It's in the HEAD tag.If you want to change all the UL lists to center, add: CODE ul {width: 50%; margin:0px auto; text-align: justify;} .If you want to change one UL, first give your ul a "class" attribute, then add: CODE ul.[insert the name of your class] {width: 50%; margin:0px auto; text-align: justify;} .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. |
wgabrie |
Oct 13 2010, 12:54 PM
Post
#7
|
Advanced Member Group: Members Posts: 148 Joined: 11-July 10 Member No.: 12,279 |
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. |
ahill92 |
Oct 14 2010, 02:41 PM
Post
#8
|
Group: Members Posts: 7 Joined: 9-October 10 Member No.: 12,905 |
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. |
pandy |
Oct 14 2010, 03:22 PM
Post
#9
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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. |
ahill92 |
Oct 15 2010, 02:18 PM
Post
#10
|
Group: Members Posts: 7 Joined: 9-October 10 Member No.: 12,905 |
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. |
Frederiek |
Oct 16 2010, 03:11 AM
Post
#11
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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.c...s&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. |
wgabrie |
Oct 16 2010, 11:43 AM
Post
#12
|
Advanced Member Group: Members Posts: 148 Joined: 11-July 10 Member No.: 12,279 |
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 List Style Position to put the bullet inside the list element.
CODE ul {width:50%; margin:0px auto; text-align:left; list-style:circle inside url(http://wondersofdisney.yolasite.com/resources/redmickbullet.png);} ul ul {list-style:disc inside url(http://wondersofdisney.yolasite.com/resources/smredbullet2.png);} This post has been edited by wgabrie: Oct 16 2010, 11:47 AM |
ahill92 |
Oct 21 2010, 02:32 PM
Post
#13
|
Group: Members Posts: 7 Joined: 9-October 10 Member No.: 12,905 |
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.c...s&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. |
ahill92 |
Oct 21 2010, 02:50 PM
Post
#14
|
Group: Members Posts: 7 Joined: 9-October 10 Member No.: 12,905 |
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 List Style Position to put the bullet inside the list element. CODE ul {width:50%; margin:0px auto; text-align:left; list-style:circle inside url(http://wondersofdisney.yolasite.com/resources/redmickbullet.png);} ul ul {list-style:disc inside url(http://wondersofdisney.yolasite.com/resources/smredbullet2.png);} |
pandy |
Oct 21 2010, 03:02 PM
Post
#15
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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. |
Lo-Fi Version | Time is now: 28th March 2024 - 02:51 PM |