# (x)HTML + CSS menu bar help



## Adrian. (Nov 28, 2007)

Hey all

I am taking a web design course and I am trying to get a navigation bar up and running using xHTML and CSS. 

I cannot seem to get beyond making the HTML list without it giving me crap.

Here is the HTML list. If you go here, you cans see the weird stuff it is giving me. 

Any ideas? 


```
<div id="list-nav">
<ul> <li><a href="http://dl.dropbox.com/u/460029/blue/index.html">Home</a></li> <li><a href="http://dl.dropbox.com/u/460029/blue/Origins.html">Origins</a></li> <li><a href="http://dl.dropbox.com/u/460029/blue/nytimes.html">Media</a></li> <li><a href="http://dl.dropbox.com/u/460029/blue/Posidonius.html">Posidonius</a></li> <li><a href="http://ricci.glendon.yorku.ca/camara/">Portfolio Page</a></li> </ul>
</div>
```

Here is the entire page source:


```
<html>
<head>
<title>antikythera mechanism</title>
<style type="text/css">
<!--
#content {
background-color: #fff;
padding: 20px;
width: 600px;
margin-right: auto;
margin-left: auto;
}
body {
font-family: Verdana, Geneva, sans-serif;
background-color: #EAFFEF;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
border-bottom: solid 1px #ccc;
}
p {
font-size: 12px;
}
img {
padding: 2px;
border: 1px solid #ccc;
float: left;
margin: 10px;
}
-->
</style>


</head>

<body>
<div id="content">
<h1> The Antikythera Mechanism </h1>

<div id="list-nav">
<ul> <li><a href="http://dl.dropbox.com/u/460029/blue/index.html">Home</a></li> <li><a href="http://dl.dropbox.com/u/460029/blue/Origins.html">Origins</a></li> <li><a href="http://dl.dropbox.com/u/460029/blue/nytimes.html">Media</a></li> <li><a href="http://dl.dropbox.com/u/460029/blue/Posidonius.html">Posidonius</a></li> <li><a href="http://ricci.glendon.yorku.ca/camara/">Portfolio Page</a></li> </ul>
</div>


<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fricci.glendon.yorku.ca%2Fcamara%2Fblue%2F&layout=standard&show_faces=false&width=450&action=like&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

<p>

The Antikythera mechanism is an ancient mechanical computer 
designed to calculate astronomical positions. It was 
recovered in 1900ñ01 from the Antikythera wreck.Its 
significance and complexity were not understood until
decades later. Its time of construction is now estimated 
between 150 and 100 BCE. The degree of mechanical sophistication 
is comparable to a 19th century Swiss clock.Technological 
artifacts of similar complexity and workmanship did not reappear 
until the 14th century, when mechanical astronomical clocks were 
built in Europe.
<br><br>
<img src="images/antikytheramechanism.jpg" alt="The antikythera mechanism is an ancient greek astrological calculating device"> 

The mechanism is the oldest known complex scientific calculator. 
It contains many gears, and is sometimes called the first known 
analog computer,although its flawless manufacturing suggests that 
it may have had a number of undiscovered predecessors during 
the Hellenistic Period. It appears to be constructed upon theories 
of astronomy and mathematics developed by Greek astronomers and it 
is estimated that its <a href="http://dl.dropbox.com/u/460029/blue/Origins.html">origins</a> are from around 150-100 BCE.
<br><br>
In a 2008 New York Times <a href="http://dl.dropbox.com/u/460029/blue/nytimes.html">article</a>, John N. Wilford posited that the device may have been left on earth by aliens. 



</p>

<br><br>
<br><br>
<div align=center>
<h3>Recent Literature</span> <span class="mw-headline" id="Largest_commodities_exchanges"></span></h3>
<//div>

<table class="sortable" style="margin-left:auto;margin-right:auto">
<tr bgcolor="#ECECEC">
<th>Books</th>
<th>Articles</th>

</tr>
<tr>
<td><a href="http://www.amazon.ca/Ancient-Inventions-Peter-James/dp/0345401026/ref=sr_1_1?ie=UTF8&qid=1299029190&sr=8-1"><i>Ancient Inventions</i>, Thorpe (1996)</a></td>
<td><a href="http://www.nature.com/nature/journal/v444/n7119/full/444551a.html"><i>Nature</i>,2010</a></td>


</tr>
<tr>
<td><a href=http://www.amazon.ca/Gears-Greeks-Antikythera-Mechanism-Calendar/dp/0871696479/ref=sr_1_1?ie=UTF8&s=books&qid=1299029297&sr=1-1"><i>Gears from the Greeks</i>, de Solla (1976)</a></td>
<td><a href="http://onlinelibrary.wiley.com/doi/10.1046/j.1468-4004.2000.41610.x/abstract;jsessionid=F010ABD4AE7A25F5702FCC5E5E1FD754.d03t01"><i>Astronomy & Geophysics</i>, 2001</a></td>
</tr>
<tr>
<td><a href="http://www.amazon.ca/s/ref=nb_sb_noss?url=search-alias%3Dca-books-english-tree&field-keywords=Decoding+the+Heavens%3A+Solving+the+Mystery+of+the+World%27s+First+Computer"><i>Decoding the Heaven</i>,Marchant (2008)</a></td>
<td><a href="http://www.nature.com/scientificamerican/journal/v301/n6/full/scientificamerican1209-76.html"><i>Decoding an Ancient Computer</i>, Freeth (2009)</a></td>

</tr>

</table>



</div>


</body>
```
Thanks for any help!


----------



## screature (May 14, 2007)

I don't see a navigation bar of any kind. I see some links at the bottom of the page.. is that what you are talking about?


----------



## Adrian. (Nov 28, 2007)

I took it out, just going to scrap the idea and wait until the prof teaches it to us. I was just trying to get ahead of the game with DIY. Thanks! 

.


----------



## screature (May 14, 2007)

It is really quite straight forward especially for text only navigation... there is code all over the net for how to do it. If you have some specific outstanding questions after you cover that section with the prof I am more than happy to help out.


----------



## MannyP Design (Jun 8, 2000)

This is a quick example you can use. It's pretty straight forward and easy to do: CSS UL LI - Horizontal CSS Menu


----------



## SnowX (Feb 16, 2010)

Some good tutorials on CSS: CSS Tutorial


----------



## Guest (Mar 2, 2011)

w3schools is good for the most part, and they have a ton of valuable info on there.


----------



## groovetube (Jan 2, 2003)

not sure what exactly you're trying to accomplish with the list nav menu, but I don't see any definitions in the css for the list nav, list-nav li etc. 

Are you trying to pull off a basic 'suckerfish' style nav?


----------



## kyoru (Jan 15, 2009)

Well first off if you want a menu bar you have to make them display in a line:

#list-nav ul {list-style:none;}

From there you can style each section of the menu by styling the li

#list-nav ul li { background-color:black; }

You can modify the styling of text inside by targeting the anchor

#list-nav ul li a { color:white; }

Maybe some hover effects?

#list-nav ul li a:hover { color:blue; }


----------



## kps (May 4, 2003)

MannyP Design said:


> This is a quick example you can use. It's pretty straight forward and easy to do: CSS UL LI - Horizontal CSS Menu


Never knew you could do stuff like this with CSS...that's pretty cool.


----------



## MannyP Design (Jun 8, 2000)

kps said:


> Never knew you could do stuff like this with CSS...that's pretty cool.


I'm still trying to catch up with this stuff, myself…*CSS3 does even more amazing things as well.


----------



## Guest (Mar 5, 2011)

MannyP Design said:


> I'm still trying to catch up with this stuff, myself…*CSS3 does even more amazing things as well.


CSS3 has some really useful stuff. Now let's hope that all the rendering engines get it at least close .. you hear that *cough* microsoft *cough* ??!? IThe E9 betas have had some horrible horrible css2 + css3 issues  I haven't had time to play with the RC yet ... soon though.


----------



## groovetube (Jan 2, 2003)

that is the real wild cards in the move towards css3, I've used a few items and it's great when it works. I love using some well written js as well, but the worry I have is, just wait til we get really saturated with horribly written js. I've already had my browser crashing on some of that.

I haven't had the chance yet either to play with the betas, but you just know it'll be ie that screws things up for some really cool ccs3.


----------



## screature (May 14, 2007)

kps said:


> Never knew you could do stuff like this with CSS...that's pretty cool.


Oh yeah and lots more in conjunction with JavaScript. Even drop downs and slide outs and such... The Garden at Night this navigation menu is all CSS and Javascript.


----------



## Guest (Mar 7, 2011)

Javascript is a whole different world of things too ... but at least I think that it's tending towards working fairly well in most (modern) browsers. Jquery is fantastic for this sort of stuff .. they provide a very nice toolbox of all sorts of things that will make your life easier as a web programmer from UI elements and effects to amazing selector abilities to being super simple to extend. I avoided addon js for a long long time but finally caved in with jquery. I might also add that it's very stable and very well tested. One of my biggest concerns for ages with js addons was security and compatibility and jquery seems to have a really good handle on both. Just the selectors alone save me hundreds and hundreds of lines of js on a regular basis ... I can do things in 5 lines of jquery that would have taken hundreds (if not more) lines of hand coded custom js.


----------



## screature (May 14, 2007)

mguertin said:


> Javascript is a whole different world of things too ... but at least I think that it's tending towards working fairly well in most (modern) browsers. Jquery is fantastic for this sort of stuff .. they provide a very nice toolbox of all sorts of things that will make your life easier as a web programmer from UI elements and effects to amazing selector abilities to being super simple to extend. I avoided addon js for a long long time but finally caved in with jquery. I might also add that it's very stable and very well tested. One of my biggest concerns for ages with js addons was security and compatibility and jquery seems to have a really good handle on both. Just the selectors alone save me hundreds and hundreds of lines of js on a regular basis ... I can do things in 5 lines of jquery that would have taken hundreds (if not more) lines of hand coded custom js.


Thanks for the heads up on jQuery I just had a qucik peak... looks really interesting, I will have to take a closer look when I have some time.


----------

