• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Coding A Nav


#1
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.
 

Harry

Senior Member
#4
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.
 

Harry

Senior Member
#6
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]}
 

Harry

Senior Member
#8
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
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.
 
#11
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;
 

Harry

Senior Member
#12
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
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?
 

Harry

Senior Member
#16
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" />
 
#20
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