Centering 2nd line of horizontal list

**Barnum** · Feb 15, 2011 18:06

How do I center the second line...?

Code:

</head>
<body>

   <div id="wrap">
    
      <ul id="navbar">
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->

      <li><a href="index.html"><font color ="black">Home</a></li>
      <li><a href="Introduction.html">Introduction</a></li>
      <li><a href="Aboutme.html">About Me</a></li>
         <li><a href="#">Articles</a>
	 <ul>
	  <li><a href="goodole.html">The Goodole days</a></li>
	  <li><a href="TreasureTips.html">Treasure Tips</a></li>
                    <li><a href="Oldfolks.html">Old Folks, Old Tales</a></li>
                    <li><a href="Bill.html">Cousin Bill</a></li>
                    <li><a href="BasicRules.html">Coin Hunting Rules</a></li>
                    <li><a href="Winter.html">Winter Treasure Hunting</a></li>
                    <li><a href="Productive.html">Finding Productive Sites</a></li>
                    <li><a href="Dan.html">Detector Dan</a></li>
		<li><a href="Writing.html">Sharing Your Experiences</a></li>
		<li><a href="Future.html">What the Future Holds</a></li>
		 <li><a href="cliff.html">Cliff Steffens Bio</a></li>
		 <li><a href="Mark.html">Mark Schuessler Bio</a></li>
		 <li><a href="Eleanor.html">Eleanor Hube Bio</a></li>
		 <li><a href="Packrat.html">Larry Bateham Bio</a></li>
	</ul>
	
		<li><a href="Photos.html">Photos</a><ul>
		<li><a href="Photos.html">Photos Set 1</a></li>
                    <li><a href="Photos2.html">Photos Set 2</a></li>
                    <li><a href="Photos3.html">Photos Set 3</a></li>
                    <li><a href="Photos4.html">Photos Set 4</a></li>
                    <li><a href="Photos5.html">Photos Set 5</a></li>
                    <li><a href="Photos6.html">Photos Set 6</a></li>
                    <li><a href="Photos7.html">Photos Set 7</a></li>
                    <li><a href="Photos8.html">Photos Set 8</a></li>
                    <li><a href="Photos9.html">Photos Set 9</a></li>
                    <li><a href="Photos10.html">Photos Set 10</a></li>
                    <li><a href="Photos11.html">Photos Set 11</a></li>
		<li><a href="Photos12.html">Photos Set 12</a></li>  
		 <li><a href="Photos13.html">Photos Set 13</a></li>
		 <li><a href="Photos14.html">Photos Set 14</a></li>        
		 <li><a href="Photos15.html">Photos Set 15</a></li>        
	</ul>

	     </li>
		<li><a href="Research.html">Research</a></li>
		<li><a href="equipment.html">Equipment</a></li>
		<li><a href="Coinhunting.html">Coinhunting</a></li>   
	
		<li><a href="Scattershooting.html">Scattershooting</a></li>
		
		<li><a href="Malamute.html">Malamute Saloon</a></li>
		
		<li><a href="Latest.html">LATEST NEWS</font></a></li>
		<li><a href="Recipes.html">Poor Gourmand</a></li>
		<li><a href="Link.html">Links</a></li>
		<li><a href="Books.html">Recommended Reading</a></li> 
		<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
	
	</ul> 
	
	
	  
         
   </div>
 

</body>
</html>

**ralph.m** · Feb 15, 2011 18:42

What second line?

That code looks like it needs some validation. There are some unclosed list items.

**Barnum** · Feb 15, 2011 18:56

Guess that'shy I am asking....I am a newbie at this..

**Barnum** · Feb 15, 2011 19:10

Sorry, that should have read "guess that's why I am asking"....

**ralph.m** · Feb 15, 2011 19:12

I ask again, though: "what second line?" It's too vague a question. The second list item?

**Barnum** · Feb 15, 2011 20:40

Latest News is lined up on left...want to have it centered, along with items that follow.

**ralph.m** · Feb 15, 2011 20:52

All you've given us is HTML, so if we view that code, everything is aligned left. Perhaps give us the whole page, with the CSS embedded in the <head> section inside these tags:

Code:

<style type="text/css" media="all">

</style>

**Black Max** · Feb 15, 2011 21:47

Better yet, give us a link to a demo page if you can.

**Victorinox** · Feb 16, 2011 06:06

In the absence of any CSS, the only likely candidate for the problem is the closing </font> tag after the link text "Latest News". The opening tag is way back before "Home".

The best course, for modern HTML, would be to do away with <font> altogether and apply styles with CSS.

So, two lines to edit:

Before

Code HTML4Strict:

<li><a href="index.html"><font color ="black">Home</a></li>
 
<li><a href="Latest.html">LATEST NEWS</font></a></li>

After

Code HTML4Strict:

<li><a href="index.html">Home</a></li>
 
<li><a href="Latest.html">LATEST NEWS</a></li>

**Barnum** · Feb 16, 2011 07:38

This is what I have....

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dropdown Menu</title>


<style type="text/css" media="all">


body {
   font: 75%/1.2 Arial, Helvetica, sans-serif;
   
   background-color: #DEB887; }
#wrap {
   font-size: 1.3em;
 
   width: 900px;
   padding: 20px;
   margin: 0 auto; 
   background-color: #DEB887;
   position: relativef; 
 }

/* These styles create the dropdown menus. */
#navbar {
   margin: 0;
   padding: 0;
   height: 1em; }
   
#navbar li {
   list-style: none;
   float: left; 
   }
   
#navbar li a {

   display: block;
   padding: 3px 8px;
   background-color: #DEB887;
   color: #000;

   text-decoration: none; 
     }
   
#navbar li ul {
   display: none; 
   width: 10em; /* Width to help Opera out */
   background-color:  #69f;}
   
#navbar li:hover ul, #navbar li.hover ul {
   display: block;
   position: absolute;
   margin: 0;
   padding: 0; 
  
}
   
#navbar li:hover li, #navbar li.hover li {
   float: none; }
   
#navbar li:hover li a, #navbar li.hover li a {
   background-color: #F5DEB3;
   border-bottom: 1px solid #fff;
   color: #000; 
  }

#navbar li li a:hover {
   background-color: #8db3ff; }
 
   
   
</style>



</head>
<body>


 <div id="wrap">


    
      <ul id="navbar">
      
      
      <!-- The strange spacing herein prevents an IE6 whitespace bug. -->

      <li><a href="index.html">Home</a></li>
      <li><a href="Introduction.html">Introduction</a></li>
      <li><a href="Aboutme.html">About Me</a></li>
         <li><a href="#">Articles</a>
	 <ul>
	  <li><a href="goodole.html">The Goodole days</a></li>
	  <li><a href="TreasureTips.html">Treasure Tips</a></li>
                    <li><a href="Oldfolks.html">Old Folks, Old Tales</a></li>
                    <li><a href="Bill.html">Cousin Bill</a></li>
                    <li><a href="BasicRules.html">Coin Hunting Rules</a></li>
                    <li><a href="Winter.html">Winter Treasure Hunting</a></li>
                    <li><a href="Productive.html">Finding Productive Sites</a></li>
                    <li><a href="Dan.html">Detector Dan</a></li>
		<li><a href="Writing.html">Sharing Your Experiences</a></li>
		<li><a href="Future.html">What the Future Holds</a></li>
		 <li><a href="cliff.html">Cliff Steffens Bio</a></li>
		 <li><a href="Mark.html">Mark Schuessler Bio</a></li>
		 <li><a href="Eleanor.html">Eleanor Hube Bio</a></li>
		 <li><a href="Packrat.html">Larry Bateham Bio</a></li>
	</ul>
	
		<li><a href="Photos.html">Photos</a><ul>
		<li><a href="Photos.html">Photos Set 1</a></li>
                    <li><a href="Photos2.html">Photos Set 2</a></li>
                    <li><a href="Photos3.html">Photos Set 3</a></li>
                    <li><a href="Photos4.html">Photos Set 4</a></li>
                    <li><a href="Photos5.html">Photos Set 5</a></li>
                    <li><a href="Photos6.html">Photos Set 6</a></li>
                    <li><a href="Photos7.html">Photos Set 7</a></li>
                    <li><a href="Photos8.html">Photos Set 8</a></li>
                    <li><a href="Photos9.html">Photos Set 9</a></li>
                    <li><a href="Photos10.html">Photos Set 10</a></li>
                    <li><a href="Photos11.html">Photos Set 11</a></li>
		<li><a href="Photos12.html">Photos Set 12</a></li>  
		 <li><a href="Photos13.html">Photos Set 13</a></li>
		 <li><a href="Photos14.html">Photos Set 14</a></li>        
		 <li><a href="Photos15.html">Photos Set 15</a></li>        
	</ul>

	     </li>
		<li><a href="Research.html">Research</a></li>
		<li><a href="equipment.html">Equipment</a></li>
		<li><a href="Coinhunting.html">Coinhunting</a></li>   
	
		<li><a href="Scattershooting.html">Scattershooting</a></li>
	
		<li><a href="Malamute.html">Malamute Saloon</a></li>
		
		<li><a href="Latest.html">LATEST NEWS</a></li>
		<li><a href="Recipes.html">Poor Gourmand</a></li>
		<li><a href="Link.html">Links</a></li>
		<li><a href="Books.html">Recommended Reading</a></li> 
		<li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
		</ul> 
	
	
	  
         
   </div>
 

</body>
</html>

**ralph.m** · Feb 16, 2011 08:03

Ah, it makes a difference with some CSS! Without it, we just saw a long, vertical list of links.

Hmm, to be honest, you've asked a tricky question. I've not seen floated list items centered once they've wrapped to a new line. Perhaps the CSS Ninjas could work out a solution, but short of that, you'll either have to live with it as is, or use a centered paragraph of links instead. However, given that there's a drop list involved, this makes things trickier.

**Barnum** · Feb 16, 2011 18:14

So it's pretty much something I have to live with? If so, no big deal...

**Barnum** · Feb 16, 2011 18:47

Okay, I know I am going to embarrass myself, but here goes... When I first created my site I used MS Expression for saving my first stylesheet. It was only a trial version. Now I have a need to create another stylesheet, but when I save it I cannot open it. The Expression trial program comes up and asks me to purchase.

I tried to save the info I listed above (horizontal list) as a stylesheet, but it didn't work, and I could not open it because I did not have Expression. Given that I have accepted the fact that the horizontal list will not be centered, how do I save it as a stylesheet, and to which program? Jeesuz if that didn't confuse you, nothing will....sorry.

**ralph.m** · Feb 16, 2011 19:08

So it's pretty much something I have to live with?

I believe so.

how do I save it as a stylesheet, and to which program?

You can copy all the code, then paste it into a simple program like Notepad (Windows) or TextEdit (Mac) and save it as a .css file.

**Barnum** · Feb 17, 2011 08:30

Okay, the code that I posted here gives me the horizontal menu I want.. How do I apply it to all my pages? Having trouble coming up with a style sheet. Sorry to be so dense...

**Barnum** · Feb 17, 2011 08:31

To clarify...have been told that my home, next back menu is old hat, and not appropriate anymore. Hence I am trying to get my first page menu at the top of each page.

www.stoutstandards.com

**Victorinox** · Feb 17, 2011 14:16

Originally Posted by Barnum

Okay, the code that I posted here gives me the horizontal menu I want.. How do I apply it to all my pages?

This is often done by means of a Server-side Include (SSI), which is a snippet of code added to each page to import code from an external file. This enables updating an element in multiple pages by editing a single included file.

Not all web servers allow SSI, so you'd need to check this with your hosting company and/or try a test.

Note that this will not work on your home computer unless you are running suitable web server software on it.

Testing SSI

Add a test page named test.html to the web root of your server, where your index/home page is. Add the following code to the file and save:

Code HTML4Strict:

<!--#include virtual="/includes/nav.html" -->

In the same directory, create a directory named "includes". This will hold your SSI files.

Create a new file named "nav.html" and add your menu code to it, no need for head or body elements, and put it in the includes directory.

So you'll have, alongside any other files in your web root ( / = web root ):

/test.html
/includes/menu.html

If you then visit the URL for the test page in your browser you should see the menu.

Code:

http://www.stoutstandards.com/test.html

If you see an error message it may mean that the server either does not allow SSI or needs to be configured to do so.

User Tag List

Thread: Centering 2nd line of horizontal list

Thread Tools

Display

Centering 2nd line of horizontal list

Bookmarks

Bookmarks

Posting Permissions