Help please - Webmaster Forum - Web Design, Programming and SEO forums

03-07-2007, 06:47 PM

LeeP

Status: Member
Join date: Jan 2007
Location: West Midlands, UK.
Expertise:
Software:

Posts: 371

iTrader: 5 / 100%

LeeP is on a distinguished road

Help please

Site
CSS

The navigation is killing the rest of the layout, anybody know why and how to get the navigation done properly....

Navigation just needs to be all on one line without the bullet point, I can do the rest...

03-07-2007, 08:03 PM

localhost

Status: Dediport Hosting
Join date: Jul 2006
Location: Berkshire
Expertise: programming, business
Software: Dreamweaver

Posts: 1,316

iTrader: 17 / 100%

localhost is on a distinguished road

what exactly do you mean?

03-07-2007, 08:15 PM

jabberwocky

Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:

Posts: 278

iTrader: 0 / 0%

jabberwocky is on a distinguished road

one way is through a list;

Code:

<ul id="navigation">
  <li><a href="index.php">HOME</a></li>
 <li><a href="TOS.php">TOS</a></li>
 <li><a href="FAQ.php">FAQ</a></li>
 <li><a href="Contact.php">CONTACT</a></li>
</ul>

css

Code:

 
 ul {list-style:none;}
 ul li { display:inline; list-style:none;}

i think its that. then you can do your CSS for your links, hover, etc.

03-07-2007, 08:18 PM

RaZoR^

Status: Member
Join date: Feb 2006
Location:
Expertise:
Software:

Posts: 191

iTrader: 1 / 100%

RaZoR^ is on a distinguished road

That's a really hard-to-see bullet because of the background colour but fair enough. Firstly, make it compliant markup-wise. Change:

Code:

	<li>
	<a href="index.php">HOME</a>
	<a href="TOS.php">TOS</a> 
	<a href="FAQ.php">FAQ</a> 
	<a href="Contact.php">CONTACT</a>

	</li>

to:

Code:

<ul>
<li><a href="index.php" title="Home">HOME</a></li>
<li><a href="TOS.php" title="Terms of Service (TOS)">TOS</a></li>
<li><a href="FAQ.php" title="Frequently Asked Questions (FAQ)>FAQ</a></li>
<li><a href="Contact.php" title="Contact">CONTACT</a></li>
</ul>

You should have them all in one bullet point, because bullet points are used for listing. You can't have a 1-item list; it's not logical

So each link goes in it's own list item.

I also took the liberty of making the links a bit more accessible and adding title attributes for really strict text readers and such.

Next, implement this into your CSS as best you can speed-wise:

Code:

body #Wrapper #Header #Navigation ul{
list-style-type:none;
}

Enjoy!

03-11-2007, 09:01 PM

LeeP

Status: Member
Join date: Jan 2007
Location: West Midlands, UK.
Expertise:
Software:

Posts: 371

iTrader: 5 / 100%

LeeP is on a distinguished road

I got another problem. The links on the navigation in IE are at the top, how to I center them? Or make them sit at the bottom?

03-12-2007, 02:26 PM

jabberwocky

Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:

Posts: 278

iTrader: 0 / 0%

jabberwocky is on a distinguished road

you can use a conditional statement.

ie adds a bit of extra padding. so for ie browsers (using conditional statements) set your padding to 0 and see where that takes you.