The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> How can I justify an unordered list?
ahill92
post 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! wacko.gif

Thanks!!!!!!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wgabrie
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ahill92
post 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!

QUOTE(wgabrie @ Oct 9 2010, 05: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
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wgabrie
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ahill92
post Oct 11 2010, 02:23 PM
Post #6





Group: Members
Posts: 7
Joined: 9-October 10
Member No.: 12,905



It worked! biggrin.gif Thank you! Thank you! Thank you! It looks so much better lined up! Howerver, I lost my bullets. Any idea what happened?


QUOTE(wgabrie @ Oct 9 2010, 09:13 PM) *

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wgabrie
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ahill92
post 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.


QUOTE(wgabrie @ Oct 13 2010, 10:54 AM) *

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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ahill92
post 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. smile.gif

QUOTE(pandy @ Oct 14 2010, 01: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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wgabrie
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ahill92
post 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.


QUOTE(Frederiek @ Oct 16 2010, 01: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.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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ahill92
post 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! smile.gif 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! biggrin.gif


QUOTE(wgabrie @ Oct 16 2010, 09: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 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);}


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 02:51 PM