www.webdeveloper.com
Results 1 to 2 of 2

Thread: Tableless CSS Menu Problems

  1. #1
    Join Date
    Jun 2003
    Posts
    72

    Question Tableless CSS Menu Problems

    I am trying to create a layout WITHOUT the use of any tables... (this is new to me, as I have always used table in the past).

    I setup the following page:
    http://www.amazingdg.com/clients/events/

    You will see some problems with the menu. First problem are the two buttons on the left. They have the link text ontop of them (there should be no link test, but the images should be buttons). Second problem are the main menu buttons ... they appear BELOW the menu. PLUS, the mouseover is not working correctly for them.

    The styles for the page are below (note, I have also commented on the problems going on in the style sheet)...

    Code:
    body {
    	background-color: #3a50a3;
    	background-image: url(i/page_back.jpg);
    	background-repeat: repeat-x;
    	margin: 0;
    	font-family:arial,helvetica,sans-serif;
    }
    	
    a:link, a:visited, a:hover, a:active { color : #003399 }
    
    FONT, TR, TD {font-size: 12px; font-family:arial,helvetica,sans-serif; }
    
    #ban728x90	{ margin: 3px; }
    
    #site_layout 					{ float:left; width:100%; position:static;}
    #site_header					{ margin:0; padding:0 0 0 0; z-index:1;}
    
    #pagewidth						{ margin:0 auto; width:960px; }
    
    #masthead						{ background: url(i/top_back_repeat.gif) repeat-x 0 0px; position:relative; height:72px; }
    #logo 							{ position: relative; top: 15px; left: 20px; width: 300px; }
    #loc 							{ position: relative; top: 15px; left: 20px; width: 200px; color: #FFF; font-size: 11px;}
    
    #site_nav						{ position: relative; height:31px; background: url(i/top_menu.gif) repeat-x 0 0; } 
    
    .eventsbut						{ position: relative; left: 20px; padding: 0; height: 31px; width: 67px; overflow:hidden;
    									background: url(i/top_events.gif) no-repeat; background-position: 0 5px} /* The test needs to disappear, and the image needs to be a button link */
    .eventsbut2						{ position: relative; left: 97px; bottom: 31px; height: 31px; width: 97px; overflow:hidden;
    									background: url(i/top_events.gif) no-repeat; background-position: 0 5px; }	/* See note for the button item above */
    .menuplace						{ position: relative; right: 20px; padding: 0; height: 31px; width: 530px; overflow:hidden; float:right} /* For some reason, menuplace is breaking to the next line, it should be to the right of the EVENT buttons. */
    
    ul#menu 						{ padding: 0; margin: 0; height: 31px; list-style-type: none; }  
    ul#menu li 						{ float: right; font-weight: bold; font-size: 11px; height: 31px; background: url(i/top_menu_b.gif) no-repeat;  }  
    ul#menu li a 					{ padding: 0 10px; display: block; color: #FFF; height: 31px;  }  
    ul#menu li a:hover 				{ background-position: 0 31px; background: url(i/top_menu_b.gif) no-repeat;  }  /* Should do the hover part of the image, but it is onlu moving the image down several pixels. The mouseover part of the image starts -31px below...  */
    ul#menu .profile, ul#menu .messages, ul#menu .calendar, ul#menu .friends, ul#menu .myevents, ul#menu .mylists, ul#menu .activity, ul#menu .logout	{ margin-top: -7px; padding-top: 14px; padding-bottom: -7px;} /* Without this, the text presses against the top of the box ... rather than centered */
    Here is the code for the menu which you can also view the source of on the page...

    Code:
        <div id="site_nav">
    
          <div id="pagewidth">  
    		<div class="eventsbut"><a href="#">Events</a></div> 
            <div class="eventsbut2"><a href="#">Events2</a></div>        
            <div class="menuplace">
                 <ul id="menu">
               	   <li>&nbsp;</li>   
                     <li><div class="logout"><a href="#">Log Out</a></div></li>  
    
                 <li><div class="friends"><a href="#">Friends</a></div></li>  
                     <li><div class="calendar"><a href="#">Calendar</a></div></li>  
                     <li><div class="messages"><a href="#">Messages</a></div></li>  
                     <li><div class="profile"><a href="#">Profile</a></div></li>  
               </ul>  
          </div>
         </div> 
    
        </div>
    Please help if you can. I've been trying to figure out what is wrong for about 5 hours now...

    J
    Last edited by jabbamonkey; 07-21-2009 at 09:05 AM.

  2. #2
    Join Date
    Jun 2003
    Posts
    72
    Got it to work. Thanks...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles