Nav bar not showing

kaz · #1 Jan 24th, 2008, 13:11

I'm trying to create a nav bar to to the right of the main table but it 's not showing. Here is the css code: the code for the nav table is last on the style sheet

Code: Select all

body {
background-color : #87ceeb;}
.ictdnews-stayinformed {
font-family : Arial;
font-weight : bold;
font-size : x-large;
text-align:left;}

#maincontent{float:left;width:500px;background-color:#ffffff;border-right:2px solid #000000;border-left:2px solid #000000;border-top:2px solid #000000;
border-bottom:2px solid #000;
margin-right:15px;
padding-bottom:20px;}
#network{font-family:Arial;font-weight:bold;font-size:16px; text-transform:capitalize;text-align:justify;}
#learn{font-family:Arial;font-weight:bold;font-size:16px; text-transform:capitalize;text-align:justify;
#systems{font-family:Arial;font-weight:bold;font-size:16px; text-transform:capitalize;text-align:justify;
#blind{font-family:Arial;font-weight:bold;font-size:16px; text-transform:capitalize;text-align:justify;
#training{font-family:Arial;font-weight:bold;font-size:16px; text-transform:capitalize;text-align:justify;



#rightnav {
float:right;
width:50px;
background:#ffffff;
border-right:2px solid #000000;
border-bottom:2px solid #000000;
margin-right:15px;
padding-bottom:20px;

here is the html:

HTML: Select all

<html>
<head>
<title>ICTD Bulletin</title>
<link href="news.css" rel="stylesheet" type="text/css" />
</style>
</head>
<body>
<p class="ictdnews-stayinformed">ictd ebulletin - Stay Informed</p>

<div id="maincontent">
<h4 id="network">New online Register to be installed</h4>
<p>This technique was famously chronicled by Jeffrey Zeldman in his ALA
article A Web Designer's Journey
<http://www.alistapart.com/stories/journey/>, and is an extremely easy
layout to implement requiring only a simple float:left declaration.</p>

<h4 id="learn">Video link connected with Canadian University</h4>
<p>This technique was famously chronicled by Jeffrey Zeldman in his ALA
article A Web Designer's Journey
<http://www.alistapart.com/stories/journey/>, and is an extremely easy
layout to implement requiring only a simple float:left declaration.</p>
<h4 id="systems">New Timing software installed at ICT Directorate labs</h4>
<p>This technique was famously chronicled by Jeffrey Zeldman in his ALA
article A Web Designer's Journey
<http://www.alistapart.com/stories/journey/>, and is an extremely easy
layout to implement requiring only a simple float:left declaration.</p>
<h4 id="blind">New technology installed at Assertitive lab</h4>
<p>This technique was famously chronicled by Jeffrey Zeldman in his ALA
article A Web Designer's Journey
<http://www.alistapart.com/stories/journey/>, and is an extremely easy
layout to implement requiring only a simple float:left declaration.</p>
<h4 id="training">New training session started </h4>

<p>This technique was famously chronicled by Jeffrey Zeldman in his ALA
article A Web Designer's Journey
<http://www.alistapart.com/stories/journey/>, and is an extremely easy
layout to implement requiring only a simple float:left declaration.</p>
<div id="rightnav">
<h4 id="contents">Contents</h4>

</div>

</body>
</html>

karinne · #2 Jan 24th, 2008, 13:28

For us lazy people, do you have a link?

kaz · #3 Jan 24th, 2008, 15:23

it's http://kazmania.110mb.com/index1.htm. Hope it works

karinne · #4 Jan 24th, 2008, 15:45

Hmmm ... I get this

FF.jpg

dab42pat · #5 Jan 24th, 2008, 15:56

your #training is not closed in your css nor is your #rightnav (} is missing)

karinne · #6 Jan 24th, 2008, 16:08

You're also missing a DOCTYPE

What the heck is this

HTML: Select all

<http://www.alistapart.com/stories/journey/>

You have a </style> close but nothing is open.

You probably could have solved your problem by validating first

That's why we ask the members to validate their site before posting for questions.

From PLEASE READ: How and When to post your question!

Quote:

Before you post
....Validate your CSS and Markup (HTML or XHTML).

unitedcraig · #7 Jan 24th, 2008, 16:12

Browsers display pages according to the W3C standards, (with the exception of IE6 which has a mind of it's own), the reason people urge you to make your code is valid is not just for a badge to put at the bottom of your site.

If you have valid code, your site will display properly in most browsers, there will always be some exceptions but validating your code will go a long way to ensuring that you have correctly displayed pages in most if not all of the modern browsers.

Listen to karinne, shes actually rather clever

Monie · #8 Jan 25th, 2008, 07:12

Quote:

Originally Posted by dab42pat

your #training is not closed in your css nor is your #rightnav (} is missing)

If one or two mistake can be consider as a typo! But this one, is a repetitive error. That means you need to learn more on how to write CSS!
To actually answer your PROBLEM anyway, you just have to bring out your <div id="rightnav"> from your <div id="maincontent">. Put it outside from the main content div!
For more info on learning some CSS layout, check this [Link] that I've recently found!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Borders not showing	Xyis	Web Page Design	3	Jul 17th, 2007 14:02
header not showing	srae	Web Page Design	2	Jan 9th, 2007 15:42
Why my signature is not showing???	alance	Webforumz Cafe	5	May 5th, 2006 15:52
background image not showing up in Firefox but showing in other browsers!	eskymo	Web Page Design	21	Jan 19th, 2006 23:10
php in html - not showing	chimp	Web Page Design	5	Dec 9th, 2005 00:13

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Nav bar not showing