Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Coding A Nav

Discussion in 'Website Design Forum:' started by glenwheeler, Jul 30, 2009.

  1. glenwheeler

    glenwheeler Senior Member

    Hi Guys,

    I have this header that I have coded in at the mioment

    UK Value Computing - Home

    when i tried to add a nav just to the right of it (In line with the bottom of the logo) it seems to pull the header off the top. What code should I be using to do this/ Any help would be great, thanks.
     
  2. Harry

    Harry Senior Member

  3. glenwheeler

    glenwheeler Senior Member

  4. Harry

    Harry Senior Member

    Okay well the logo needs to be an img for starters, and float that left.

    Then with the nav, float it right but set a width on it along with overflow:hidden;.

    Then on the header div, apply a width and overflow:hidden; once more.


    Of on lunch now, back soon to see if you made sense of that haha.
     
  5. glenwheeler

    glenwheeler Senior Member

    lol right ok, do I have too make that logo a seprate image then? can I not just have the links sat on top of the header?

    Ok ive made the logo separate and also have the header separate to the logo

    here is what I have now

    www.ukvaluecomputing.co.uk
     
  6. Harry

    Harry Senior Member

    Well as it's a logo, it's classed as content and therefore an img. So now you'll (roughly) need:

    HTML:
    <div id="header">
    <a href="./" title="Return home" id="logo"><img src="logo.gif" alt="UK Value Computing logo" /></a>
    <ul id="nav">
      <li><a href="./" title="Return home">Home</a></li>
      <li><a href="/about/" title="About UK Value Computing">About</a></li>
      <li><a href="/contact/" title="Contact UK Value Computing">Contact</a></li>
    </ul>
    </div>
    
    Code:
    #header{  width:950px;  overflow:hidden;  [other styles]}#logo{  width:widthOfLogo;  height:heightOfLogo;  display:block;  float:left;}#nav{  width:aWidthHere;  float:right;  overflow:hidden;}#nav li{  float:left;}#nav li a{  display:block;  [other styles]}
     
  7. glenwheeler

    glenwheeler Senior Member

    Hi Harry,

    really appreciating your help here, I have this now

    UK Value Computing - Home

    I know about the links because I have not started to style them yet but why is the full header now showing here?
     
  8. Harry

    Harry Senior Member

    You've missed your px off a couple of dimensions. Now use margins and paddings to move everything where you want it to be :)

    And now for extra bonus points add this to your markup:

    HTML:
    <ul class="accessibility">
    <li><a href="#nav">Skip to Navigation</a></li>
    <li><a href="#content">Skip to Content</a></li>
    </ul>
    <div id="header">
    ...rest of markup follows from here
    
    and this to your CSS right at the bottom:

    Code:
    .accessibility{position:absolute;left:-9999px;}
     
  9. glenwheeler

    glenwheeler Senior Member

    Hi Bud,

    got all that sorted now, thanks a lot for your help harry. Ill see how the rest of it progresses. I've learnt a lot from what you've said.
     
  10. Harry

    Harry Senior Member

    Happy to help mate, gimme a shout if there's anything else I can help with.
     
  11. glenwheeler

    glenwheeler Senior Member

    Hi Harry,

    everything is looking good now. I havent got the links where i want them as I am just styling them at the moment, I am having problems though.

    I have tried to apply a

    a:hover

    I have done the css and added

    text-decorate: underline;

    but when I hover nothing happens, I would also like the underline as dots, to do this do I need to make the border

    border-bottom;dotted;
     
  12. Harry

    Harry Senior Member

    text-decoration:underline; ;)

    That's a solid underline. A dotted underline you have to set a border which is different to an underline completely. Instead you need a:hover{ border-bottom:1px dotted #color; }
     
  13. glenwheeler

    glenwheeler Senior Member

    Hi Harry,

    Got everything going well at the moment. Yesterday you posted some code for the accessability class.

    .accessibility{
    position:absolute;
    left:-9999px;
    }

    What is the point of this code? I couldnt figure out a meaning for it? Its obviously shift a list away from the screen yes?
     
  14. Harry

    Harry Senior Member

  15. glenwheeler

    glenwheeler Senior Member

    Ahh I see, ok thanks.
     
  16. Harry

    Harry Senior Member

    Couple more tips for you. Use a Strict DTD, delete the following from reset.css:

    Code:
    /* remember to define focus styles! */:focus {	outline: 0;}
    and you need to rewrite:

    HTML:
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/pagestyler.css">
    
    as

    HTML:
    <link rel="stylesheet" type="text/css" media="screen" href="stylesheets/pagestyler.css" />
    
     
  17. glenwheeler

    glenwheeler Senior Member

    thanks again Harry, Ill take a look at this now.

    PS: Clear out your PM inbox its saying you cant accept any more messages !
     
  18. Greg

    Greg Active Member

    Just upped everyone's PM storage to 75 PM's. hopefully this will help in the future ;)
     
  19. glenwheeler

    glenwheeler Senior Member

    greg top man \m/
     
  20. glenwheeler

    glenwheeler Senior Member

    Whats the difference with the stylesheet links there mate? Am i missing something ? lol
     

Share This Page