Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Link problem

  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link problem

    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
    Code:
    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello blink359,
    Try commenting out that bit of relative positioning, like this:
    Code:
    #navbarend {
    	padding:0px;
    	text-align: center;
    	/*position:relative;
    	left:1px; 
    	top:1px;*/
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, or add clear:both to that div.

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

    Code:
    border-bottom:3px solid #c0c0c0
    to #navbar.

  • #4
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Code:
    #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

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,951
    Thanks
    9
    Thanked 724 Times in 718 Posts
    To centre your navbar add text-align:center and remove float:right.

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

    Code:
    <a id="currentpage" href="index.php">Welcome</a>
    is fine. However, have a look at this post for a smart way to mark up and highlight the "current" page.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •