...

View Full Version : Link problem



blink359
11-22-2010, 04:48 PM
Hi there, I started css about 3-4 days ago and I have a css script for my web page however when i load it up on google chrome,firefox, or safari my links dont work as they are about 10pixels above the text and last for about a pixel in hieght
My body and navigation bar css is:
Live example: http://valiantflight.comlu.com/261/index.php


body {
background-color: rgb(0, 84, 147);
font-family: 'HelveticaNeue', 'Helvetica Neue', 'arial', sans-serif;
margin-top:12px;
font-size: 12px;
position:relative;
left:-10px;
top:-2px;

}

#container {
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
word-wrap:
break-word;
background: #FFFFFF;
text-align: left;
width: 700px;
}

#navbar {
float: right;
padding-top: 8px;
padding-bottom: 8px;
padding-right:15px;
}

#navbar a {
text-decoration: none;
font-weight:none;
font-family: 'HelveticaNeue', 'Helvetica Neue', 'arial', sans-serif;
font-size: 13px;
padding:8px;
font-weight:700;
color: #666666;
}
#navbar a:hover {
color: #999999;
}

If anyone can help me it would be great, Please if you can ammend the problem be sure to point out where i went wrong for future reference.

Thanks,

Blink359

Excavator
11-22-2010, 04:59 PM
Hello blink359,
Try commenting out that bit of relative positioning, like this:
#navbarend {
padding:0px;
text-align: center;
/*position:relative;
left:1px;
top:1px;*/
}

SB65
11-22-2010, 05:07 PM
Yes, or add clear:both to that div.

Alternately (better?) get rid of it entirely and apply


border-bottom:3px solid #c0c0c0

to #navbar.

blink359
11-22-2010, 05:28 PM
cheers thats worked, Another couple of questions, i cant seem to make 1 link a different colour to represent being on that page i tried somthing like


#currentpage {
font-family: fontname;
color:somecolor;
}
then
<div id="navbar"><div id="currentpage">link1</div> link 2.........</div>
or
<div id="navbar">link1<div id="currentpage">link2</div> link 3.........</div>


but they wernt inline
also i cant seem to center the navbar so that it looked like it was before i tried text-align:center; and padding but text align didnt work and padding just made the border the full 700px rather than the 660px and center i wanted

Thanks

Blink359

SB65
11-22-2010, 05:52 PM
To centre your navbar add text-align:center and remove float:right.

You don't need a div for your menu highlighting:


<a id="currentpage" href="index.php">Welcome</a>

is fine. However, have a look at this post (http://www.codingforums.com/showpost.php?p=605564&postcount=3) for a smart way to mark up and highlight the "current" page.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum