CODEWITHSUNDEEP
css
kat_indo
kat_indo

Reputation: 422

Div won't move along with the other elements of the page

I'm working on WordPress, using a template I purchased. I have added a div at the top of the website and the only element in there is a link.

I need to have it aligned with the rest of the elements of the page, so I use a padding-left. The problem is that when I resize my window the rest of the elements of the pages are moving, but I cannot get the link to move the same way.

I have tried with 'position'but no luck there.

Here's the code I'm using: 

<div id="extra_header">
        <a class="specialLink" href="http://www.fitnessforum.gr">FITNESSFORUM.gr</a>
        </div>

CSS

#extra_header{
    height:26px;
    background-color: #ac0003;
    display: block;
    }

    a.specialLink:link {
    color: #eeeeee;
    font-size: 12px;
    font-family: arial;
    font-weight: normal;
    font-style: normal;
    line-height: 26px;
    float: left;
    margin-left: 260px;
    }


    a.specialLink:hover { 
    color: #FFFFFF; 
    font-size:12px;
    font-family: arial;
    font-weight:normal;
    font-style:normal;
    text-decoration:underline;
    float: left;
    margin-left: 260px;
    line-height:26px;
    }

Here's also a link to the website: www.topgreekgyms.fitnessforum.gr

Upvotes: 0

Views: 364

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

Add to the #extra_header

width:1020px;
margin:0 auto;

and adjust the margin-left:260px to what you want..

Also you do not need to duplicate all the properties on the :hover rule.

Just those that change from the normal state of the link.

So

a.specialLink:hover { 
    color: #FFFFFF; 
    text-decoration:underline;
}

Upvotes: 1

Related Questions