Coding A Nav

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.
 
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.
 
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
 
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]}
 
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;}
 
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.
 
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;
 
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; }
 
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?
 
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" />
 
thanks again Harry, Ill take a look at this now.

PS: Clear out your PM inbox its saying you cant accept any more messages !
 
Harry said:
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" />

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