PDA

: (x)HTML + CSS menu bar help

Adrian.
Mar 2nd, 2011, 09:56 AM
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 (http://ricci.glendon.yorku.ca/camara/blue/), 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&amp;layout=standard&amp;show_faces=fals e&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=3 5" 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=F010ABD4AE7A25F5702FCC5E5E1FD7 54.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+Myste ry+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
Mar 2nd, 2011, 10:13 AM
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.
Mar 2nd, 2011, 10:44 AM
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
Mar 2nd, 2011, 10:55 AM
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
Mar 2nd, 2011, 11:14 AM
This is a quick example you can use. It's pretty straight forward and easy to do: CSS UL LI - Horizontal CSS Menu (http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html)
SnowX
Mar 2nd, 2011, 01:07 PM
Some good tutorials on CSS: CSS Tutorial (http://www.w3schools.com/css/default.asp)
mguertin
Mar 2nd, 2011, 02:55 PM
w3schools is good for the most part, and they have a ton of valuable info on there.
groovetube
Mar 2nd, 2011, 04:05 PM
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
Mar 4th, 2011, 12:56 AM
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
Mar 4th, 2011, 08:29 AM
This is a quick example you can use. It's pretty straight forward and easy to do: CSS UL LI - Horizontal CSS Menu (http://www.secondpicture.com/tutorials/web_design/css_ul_li_horizontal_css_menu.html)

Never knew you could do stuff like this with CSS...that's pretty cool.
MannyP Design
Mar 4th, 2011, 09:23 AM
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.
mguertin
Mar 5th, 2011, 02:58 AM
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
Mar 5th, 2011, 09:16 AM
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
Mar 7th, 2011, 01:19 PM
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 (http://www.thegardenatnight.com/) this navigation menu is all CSS and Javascript.
mguertin
Mar 7th, 2011, 01:31 PM
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
Mar 7th, 2011, 01:38 PM
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.