SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Centering 2nd line of horizontal list

    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>
    Last edited by Black Max; Feb 15, 2011 at 21:46. Reason: placed code inside tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    What second line?

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

  3. #3
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Guess that'shy I am asking....I am a newbie at this..

  4. #4
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, that should have read "guess that's why I am asking"....

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I ask again, though: "what second line?" It's too vague a question. The second list item?

  6. #6
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Latest News is lined up on left...want to have it centered, along with items that follow.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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>

  8. #8
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Better yet, give us a link to a demo page if you can.

  9. #9
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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>

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by ralph.m; Feb 16, 2011 at 08:00. Reason: added code tags

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  12. #12
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    So it's pretty much something I have to live with? If so, no big deal...

  13. #13
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,208
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  15. #15
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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...

  16. #16
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Barnum View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •