Question

i have the following problem:

i would like to create a footer. that footer should look like:

text headline           link 1    |    link 2    |    link 3  

my thoughts were to use a div as container. in html i still dont know what to use. would it be better to realize that by using dl or ul?

so i did it by dl with the following html:

<div id="footer">
      <dl>
        <dt>text headline</dt>
        <dd>link 1</dd>
        <dd>link 2</dd>
        <dd>link 3</dd>
      </dl>
  </div>

for css:

#footer {
    height: 200px;
    font-size: 14px;
    width: 1200px;
}
#footer dl {
    text-align: center;
    display: inline-block;
}
#footer dl dd {
    list-style-type: none;
    float: left;
    width: 100px;
    position: relative;
}

the problem is that i dont know how to add the hyphens. another problem is that the headline is positioned ahead the links. here is the example:

http://jsfiddle.net/fFddz/2/

so if there is someone who could help me out, i really would appreciate. thanks a lot.

Answer 1

If you really want the hyphens. This is the best I can do.
http://jsfiddle.net/fFddz/9/

If you could live without I would write the following.

HTML

<div id="footer">
<ul>
    <li><a>...</a></li>
    <li><a>...</a></li>
    <li><a>...</a></li>
    ....
</ul>
</div>

CSS

#footer div{
      /**what you already have***/
}

/**Makes the items appear in a line. But you can't define the width of an inline element.**/
#footer li{
    display:inline;
    float:left;
}

#footer a{
    display:block; /**Allows you to define a width.*//
    text-align:center;
}