Coding a Several Item List on Two Lines

[gouri]

I posted a couple of questions in the following thread [webmasterworld.com...] about what to code a page. One of the questions that I asked is about what to code a footer and @g1smd suggested that I use a list to do this. I think that is a good idea, but I need some help in how to code this.

Below is an example of how the footer is going to appear (they are not keyword stuffed):

Phrase 1 Phrase 2 Phrase 3

Phrase 4 | Phrase 5 Phrase 6

I would like both lines to be centered and will also use the line-height feature to create space between the lines.

I think that display:inline and float:left can be used to have the items of a list appear on the same line instead of on separate lines. I am not sure which one to use (or if there is something else to use, I would appreciate if you could tell me), and I am also not sure if the coding for centering, having the items appear on the same line and also line-height would go with <ul> or <li>?

I think what I have below are the elements of the list:

<ul>
<li>Phrase 1</li>
<li>Phrase 2</li>
<li>Phrase 3</li>
<li>Phrase 4</li>
<li>|</li>
<li>Phrase 5</li>
<li>Phrase 6</li>
</ul>

and I have to make it look the way that I have it at the beginning of the post. Can you please look at the coding that I have done and tell me what additional coding to use and where it goes? Also, does the pipe symbol have to be in its on <li> tag?

I really appreciate your help with this. I have not coded something like this before.

[phranque]

i'm not a css guru but i would try doing something in css for the "Phrase 4" list item using display: block and the content property and :after pseudo-element.

[lucy24]

Is there a semantic break between items 3 and 4?

One option is to code it as two separate lists-- 123 and 456-- and set each one to {display: inline-block; text-align: center;} That way, if someone has a huge browser window they will display side by side, taking up less vertical space, but in smaller windows you'll get two rows.

What does the | represent? I assume you don't have a page called Pipe. If it's purely a visual feature, get it out of the html and into css.

[Fotiman]

I don't know what sort of browser support you need, but you might be able to do something like this:

<ul>
 <li>Phrase 1</li> 
 <li>Phrase 2</li> 
 <li>Phrase 3</li> 
 <li>Phrase 4</li> 
 <li>Phrase 5</li> 
 <li>Phrase 6</li> 
</ul> 

ul,
li {
 list-style: none;
 list-style-position: inside;
 margin: 0;
 padding: 0;
 display: inline-block;
 text-align: center;
}
ul {
 width: 200px;
 margin: 0 auto;
 background: #eee;
 display: block;
}
li:nth-child(4) {
 border-right: 1px solid black;
}

[gouri]

@lucy24,

Is there a semantic break between items 3 and 4?

Item 4, I feel, should start on a separate line. It helps the footer to flow well. Is this what you mean by semantic break?

One option is to code it as two separate lists-- 123 and 456-- and set each one to {display: inline-block; text-align: center;} That way, if someone has a huge browser window they will display side by side, taking up less vertical space, but in smaller windows you'll get two rows.

I am thinking that this would be better if it is one list and it appears on two lines. If the two rows appear side by side, it wouldn't make as much sense as if they are on two rows. I currently have it as two lines and it looks good, but I have to code it properly so it is read better by the search engines.

Would the display:inline appear with <ul> or with each individual <li>? I am not sure how this should be coded.

What does the | represent? I assume you don't have a page called Pipe. If it's purely a visual feature, get it out of the html and into css.

Each phrase does not represent a page. I think that my example could have been better. The | is to sort of separate Phrase 4 and Phrase 5. I would say that it is more than a visual feature; it is necessary to have that additional separation between Phrase 4 and Phrase 5. I thought it would be better to have it in its own <li> instead <li> Phrase 4 |</li> or <li>| Phrase 5</li>?

@Fotiman,

list-style:none will be necessary to include. Thanks.

The width of the container that the footer appears in is already set, so I don't think that I'll have to specify that?