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:
so if there is someone who could help me out, i really would appreciate. thanks a lot.
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;
}