CODEWITHSUNDEEP
htmlcsswebhyperlink
WebDevDanno
WebDevDanno

Reputation: 1122

Why are my links on top of each other?

I'm developing the header section of a web project and I want to have links stuck at the top of it.

Here's the HTML:

    <div id="header_section">

    <a class="toplink" href="#">Contact</a> 
    <a class="toplink" href="#">Register</a>
    <a class="toplink" href="#">Staff Login</a>  
    <a class="toplink" href="#">Home</a> 

    <h1 class="welsh"> SAMPLE </h1>
    <h1> SAMPLE </h1>
</div>

And the CSS: 

a.toplink   
{
    font-family:        ‘Arial Narrow’, sans-serif;
    font-size:          12px;
    font-weight:        bold;

    position:           fixed;
    top:                0px;
    right:              10px;
    margin-right:       100px;

    padding:            6px;
    width:              100px;
    text-align:         center;

    color:              black;
    background-color:   #f3f3f3;
}

This has moved the links where I want them but they are all stacked on top of each when I want to display them next to each other. The only link displayed is 'Home' with the rest underneath. Any ideas?

Upvotes: 0

Views: 4235

Answers (5)

Mac
Mac

Reputation: 1201

Don't use:

position: absolute;

for the individual links. That will position them in the exact same place relative to their parent.

Use:

float:right;

Demo.

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hey now you can change some code in your html and css part

as like this

Css

.toplink
{ position:fixed; top:0px; margin-right:100px; padding:6px; right:0; width:700px; text-align:center; display:block; }

.toplink li{
float:left;
}
.toplink a {
font-family:        ‘Arial Narrow’, sans-serif;
    font-size:          12px;
    font-weight:        bold;
    color:              black;
    margin-left:10px;
    background-color:   #f3f3f3;
    display:block;

}

HTML

<div id="header_section">

<ul class="toplink">   
    <li> <a href="#">Contact</a></li>
   <li> <a href="#">Register</a></li>
  <li>  <a href="#">Staff Login</a>  </li>
    <li><a href="#">Home</a> </li>
</ul>

    <h1 class="welsh"> SAMPLE </h1>
    <h1> SAMPLE </h1>
</div>

Live demo http://jsfiddle.net/n9UKF/2/

Upvotes: 0

yarm
yarm

Reputation: 698

Your styles say take every link and position it 0px from top and 10px drom right and they will be position in one place.

to aboid it wrap links by div and set positioning to it not to links. 

 <div id="header_section">
    <div class="links">
        <a class="toplink" href="#">Contact</a> 
        <a class="toplink" href="#">Register</a>
        <a class="toplink" href="#">Staff Login</a>  
        <a class="toplink" href="#">Home</a> 
    </div>    

    <h1 class="welsh"> SAMPLE </h1>
    <h1> SAMPLE </h1>
</div> 

.links {
    position: fixed;
    top: 0px;
    right: 10px;
}

a.toplink   
{
    font-family:‘Arial Narrow’, sans-serif;
    font-size:12px;
    font-weight:bold;
    margin-right:100px;

    padding:6px;
    width:100px;
    text-align:center;

    color:black;
    background-color:#f3f3f3;
}

Upvotes: 1

Ajai
Ajai

Reputation: 99

Just Change 

position: fixed

To

position:related

Upvotes: 0

paddotk
paddotk

Reputation: 1440

add 

div#header_section {
  display:inline;
}

or

div#header_section a {
  display:inline;
}

one of these should work.

Upvotes: 0

Related Questions