Question

I’m sure this is a stupid easy question, but with HTML I can never decide the best way to get a desired result… I just really wasn’t cut out for web coding.

Anyway… I have a page that I need to display a title with two links on either side of it and I need the title to be centered and use a different font/style than the links.

This is the setup I currently have, ignore the fact that I only have 1 link so far… I need to work out the first one first then worry about the other one

<div style="float:left clear:none width:100%">
<div style="width:20%"><a href="/queryReport.action?currentFacility=<s:property value="previousFacility"/>">Previous Facility</a></div>
<div style="width:20%" class="important-center">Facility <s:property value="currentFacility"/></div>
</div>

.important-center {
    font-size:20px;
    letter-spacing:1px;         
    text-align: center;
    position:center;
    padding: 6px;
    color: #314457;
}

The problem with this is that my link is constantly appearing on top of my title. If anyone can give me some pointers on how I can get this situation fixed I’d appreciate it!

Answer 1

If you want the links to neighbour the title, use this

<div style="text-align: center;">
    <a href="#">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#">Next Facility</a>
</div>

If you want the links to stick to the sides, use this

<div style="text-align: center;">
    <a href="#" style="float: left;">Previous Facility</a>
    <span class="important-center">Facility</span>
    <a href="#" style="float: right;">Next Facility</a>
</div>

CSS

.important-center {
    font-size:20px;
    letter-spacing:1px; 
    padding: 6px;
    color: #314457;
}

See it here.