PDA

: Q: Centering a an html nav bar?

Adrian.
Mar 4th, 2011, 03:42 PM
I should know how to do this, but I can't figure it out.

I just want to centre that nav menu at the top to the body:

Link: http://dl.dropbox.com/u/460029/blue/index.html

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!NAVIGATION_BAR>
<style type="text/css">
ul
{
list-style-type:none;
font-family: georgia, serif;

margin:0;
padding:0;
overflow:hidden;

width: 45em;
margin: auto;
}
ul a {
background-repeat: no-repeat;
background-position: right;
padding-right: 10px;
padding-left: 10px;
display: block;
line-height: 20px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
color: #371C1C;
text-align: center;
}

li
{
float: left;
list-style: none;
padding: 20 em;
}
a
{
display:block;
width: 90px;
background-color:#fff;
}

ul a:hover {
color: #BBB;
}

.my-table
{
padding: 0;
margin: 0;
border-collapse: collapse;
border: 1px solid #333;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #000;
background: #bcd0e4 url("widget-table-bg.jpg") top left repeat-x;
}

.my-table caption
{
caption-side: bottom;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 0;
}

.my-table th, .my-table td
{
border: 1px dotted #666;
padding: 0.5em;
text-align: left;
color: #632a39;
}

.my-table th[scope=col]
{
color: #000;
background-color: #8fadcc;
text-transform: uppercase;
font-size: 0.9em;
border-bottom: 2px solid #333;
border-right: 2px solid #333;
}

.my-table th+th[scope=col]
{
color: #fff;
background-color: #7d98b3;
border-right: 1px dotted #666;
}

.my-table th[scope=row]
{
background-color: #b8cfe5;
border-right: 2px solid #333;
}

.my-table tr.alt th, .my-table tr.alt td
{
color: #2a4763;
}

.my-table tr:hover th[scope=row], .my-table tr:hover td
{
background-color: #632a2a;
color: #fff;
}

</style>
</head>

<body>

<ul id="navbar">
<li><a href="#home" style="text-decoration: none;">Home</a></li>
<li><a href="#news" style="text-decoration: none;">Origins</a></li>
<li><a href="#contact" style="text-decoration: none;">Posidinius</a></li>
<li><a href="#about" style="text-decoration: none;">Media</a></li>
<li><a href="#about" style="text-decoration: none;">Video</a></li>
</ul>

<!/NAVIGATION_BAR>

<title>antikythera mechanism</title>
<style type="text/css">
<!--
#content {
background-color: #fff;
padding: 10px;
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;
}
h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
border-bottom: solid 1px #ccc;


}
p {
font-size: 12px;
}
img {
padding: 2px;
border: 0px solid #ccc;
noborder {padding:0 !important;}
float: left;
margin: 10px;
}

-->

</style>

<br>
</head>

<body>
<div id="content">
<h1> The Antikythera Mechanism </h1>
<IMG STYLE="position:absolute; TOP:39px; LEFT:775px; WIDTH:71px; HEIGHT:89px" SRC="images/logo.png">


<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>

<img style="border:1px solid #ccc;" src="images/antikytheramechanism.jpg" align="left"; border: 1px solid #ccc; alt="The antikythera mechanism is an ancient greek astrological calculating device">
<p>
The Antikythera mechanism is an ancient mechanical computer
designed to calculate astronomical positions. It was
recovered in 1901 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>

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 origins are from around 150-100 BCE.
<br>


</p>


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


<table class="my-table">


<tr>
<th scope="row">Books</th>
<td> <i>Ancient Inventions</i>, Thorpe (1996)</a></td>
<td><i>Gears from the Greeks</i>, de Solla (1976)</a></td>
<td><i>Decoding the Heaven</i>,Marchant (2008)</a></td>

</tr>
<tr class="alt">
<th scope="row">Articles</th>
<td><i>Nature</i>,2010</a></td>
<td><i>Astronomy & Geophysics</i>, 2001</a></td>
<td><i>Decoding an Ancient Computer</i>, Freeth (2009)</a></td>

</tr>
</table>

<p>
This website was made by Adrian Camara © 2011 All Rights Reserved.
</p>
</center>


</body>
kyoru
Mar 4th, 2011, 05:48 PM
ul {

width: 600px;

}
Adrian.
Mar 4th, 2011, 08:21 PM
ul {

width: 600px;

}

Thanks! that got me closer, but still no cigar.

Even this still won't get me all the way:

ul{
list-style:none;
margin:0 auto;
padding:0 auto;
width:600px;
}

link: antikythera mechanism (http://ricci.glendon.yorku.ca/camara/blue/)

On another note, any idea why a border collapse isn't working here?

ul a {
background-repeat: no-repeat;
background-position: right;
padding-right: 10px;
padding-left: 10px;
display: block;
line-height: 20px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 17px;
color: #371C1C;
text-align: center;
border-collapse: collapse;
border-left:1px solid #bbb;
border-right:1px solid #bbb;

}


Thanks for your help :)
kyoru
Mar 4th, 2011, 08:36 PM
Read that wrong, anyways.

Can't really use the margin:0 auto; without having a width defined for your UL. The thing is, is that the width is dynamic. Border collapse is a table property you should not be using it on anything else.

Anyways you can center the menu by wrapping it in a div, the modifying the float of the UL and LI. You will have to adjust the rest of your layout though.


<div style="width:100%"><ul menu goes here></div>

CSS changes

ul {
float:left;left:50%;
}

li {
float: right; right:50%
}


You need to get rid of any margin codes you have on those two items.
MacMagicianJunior
Mar 5th, 2011, 03:35 AM
The problem is that before we look at CSS styling issues we really need to fix the broken parts of your code. Here's what the W3C Markup validator says about your page: W3C (http://validator.w3.org/check?uri=http%3A%2F%2Fdl.dropbox.com%2Fu%2F460029 %2Fblue%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0)

I'll boil it down point-by-point:
line 1 - the doctype declaration should all be on the same line (although in this comment it won't appear that way 'cause it's too short) this isn't a big deal, but it's kind of bad form xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

line 3 - since you're using xhtml you need to include an xml namespace attribute in your opening html tag. It should look like this:
<html xmlns="http://www.w3.org/1999/xhtml">

line 5 - <!NAVIGATION_BAR> I'm not sure what you meant to do here, the syntax looks like a declaration similar to doctype but I've never encountered a declaration of this type in xhtml, nor have I been able to find any reference to it in the xhtml resources. If your intent was a comment it should be <!-- NAVIGATION_BAR --> is this for a blog by any chance?

line 12 & 17 - you define the margin for <ul> twice, while it won't hurt anything it doesn't make any sense since the second definition overrides the first (so the first is ignored)

line 31 - kyoru is right - border-collapse is useless here. I'm curious as to what you wanted to do with it, since you've added a defined border in the following two lines of code, if you don't want the border simply delete lines 31 & 32...

line 41 - there can't be a space between a value and it's unit 20 em needs to be 20em, otherwise the browser thinks you want the right and left padding of that object to be "em" rather than 20. As an aside it's probably a good thing this isn't working since 20em is huge for nav padding (it's almost half the width of the containing element, so each <li> would fill the entire width of the page).

line 56 - here you've defined the margins for <ul> a third time, negating the first two (but since this third one is what we actually want it to be you should leave it in and clear the ones on lines 12 & 17)

line 57 - can't use auto for padding, it is a value reserved for margins only

line 71 - url("widget-table-bg.jpg") doesn't appear to be working since no background image is displayed in the table on your site, your other pictures are stored in an images folder, maybe it should be url("images/widget-table-bg.jpg") unless it's a holdover from wherever the code originally came from in which case it's redundant and should be pulled. It looks a lot like Matt Doyle's example from elated.com except the table class is changed. If it is plug in code you should know that there's tons of extraneous stuff in the css you don't need

line 91 to line 106 - your table has no headers with scope=col, unless you're planning on adding them later this whole declaration does nothing.

line 114 to line 117 - again, no <tr> tags with an alt class added, therefore no need for this code.

line 126 - you've closed the <head> tag here but haven't yet defined a title or charset (you do define a title later, but it's in a spot it's not allowed to be) you need to add these lines right after the <head> opening tag:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Antikythera Mechanism</title>

line 138 - here you've added a closing tag for the odd declaration on line 5, again this looks like proprietary blogger code, if it is then line 5 should actually be on line 129 in order for the module to parse the code correctly (it would then wrap around the actual navigation bar <ul> element). If you aren't using this in a blogger/wordpress/google sites specialty environment then I would suggest removing the code on lines 5 & 138 (since they aren't proper xhtml)

line 140 - this can't be here, it must be in the <head> section as I said above, since you should've added it above you should delete this line entirely.

line 141 to line 179 - this can't be here, css needs to be in the <head> of the document, the entire section needs to be cut out and pasted ABOVE line 126 in order to work
>>>Inside that block - fix before moving<<<
line 172 - it looks like you meant to add a class with the name "noborder" here but forgot the "." and pasted it in the middle of the "img" tag declaration... line 169 to line 175 should look like the following lines instead, be aware though that you have no element on the page with a class of "noborder" so even placed correctly this isn't doing anything (but at least this way it isn't breaking the css for "img"):

img {
padding: 2px;
border: 0px solid #ccc;
float: left;
margin: 10px;
}

.noborder {
padding:0; !important
}

line 181, 204, 213 and 219 - in xhtml line break tags need to be closed so instead of <br> you need to have <br />

line 182 and 184 - you have closed the head and opened the body sections twice - both lines must be removed

line 185 - you open a <div> here but never close it, since you have a class of content on it I would recommend adding a closing tag on line 250, right before the closing body tag

line 187 - xhtml requires tags to be all in lowercase, no caps allowed.

line 187 - this image needs an "alt" attribute like the image on line 192 has, it's a short description of what the image does, it's there for users who have visual impairments that are using web-reader software, or for surfers with images off in their browser settings.

line 190 - allowTransparency is technically not valid, but the workaround is a complicated pain in the butt,, so you might as well leave it in...

line 192 - the section in bold red needs to go and you need to close the image tag by adding this (space slash) " /" before the closing angle bracket (bold green): <img style="border:1px solid #ccc;" src="images/antikytheramechanism.jpg" align="left"; border: 1px solid #ccc; alt="The antikythera mechanism is an ancient greek astrological calculating device" />

line 231, 232, 233, 238, 239 and 240 - all have closing </a> tags but no opening <a> tags (<a> tags are links, so it looks like these should have been or were links at one time) either the start tags should be added with the appropriate "href" attributes or the end tags should be removed.

line 232 - Jo Marchant's book is "Decoding the Heavens" you forgot the "s" (although I doubt you'll lose marks for that)

line 239 - & is a special character, in order to use an ampersand in xhtml you need to replace it in the code with &amp; (see here (http://htmlhelp.com/reference/html40/entities/special.html))

line 248 - you've closed a <center> tag here but never opened one, was this supposed to be the closing </div> for the one you opened on line 185

finally line 252 - you need to close your </html> tag

Once you've fixed all that: change your width for the ul on line 16 from 45em to 35em and pull the "width: 600px;" from line 58 and your navigation will center itself (you made the container too big, then left-floated the stuff inside it, slamming them into the left wall of the <ul> and leaving a big gap on the right).

Edited for spelling mistake...
Adrian.
Mar 5th, 2011, 09:42 AM
Wow! Thanks so much guys! You have all been very helpful. People like you make ebkac great.