Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    joz
    joz is offline
    Member joz's Avatar
    Join Date
    May 2005
    Location
    bxl
    Posts
    36
    Member #
    10035
    Hi everyone
    Id like to replace a simple menu made with a table by one made with a list and css.
    Please have a look at this example.

    My problem is the width of my li-elements, that does not seem to obey !!

    here is my code
    html :
    Code:
    menu with css	
    <div id="menu-new">
    <ul>
    	<li id="ici">PRESENTATION</li>
    	<li id="mid"><a href="">PROJETS</a></li>
    	<li><a href="">CONTACT</a></li>
    </ul>
    </div>
    
    menu with table
    <div id="menu">
    <table cellspacing="0">
    	<tr>
    		<td id="ici">PRESENTATION</td>
    		<td id="mid"><a href="">PROJETS</a></td>
    		<td><a href="">CONTACT</a></td>
    	</tr>
    </table>
    css :
    Code:
    /* ----------------------------------------------------------------------------------------------table-menu*/
    div#menu{
    position: relative;
    width: 100%;
    background-color: transparent;
    margin:0;
    padding: 0;
    font-size: 15px;
    border: none;
    }
    div#menu table{
    	width:600;
    	height:30;
    }
    div#menu td {
    border:3px solid #ffffff;
    padding:0;
    width:200px;
    background-color:#999999;
    text-align:center ;
    font-weight: bold;
    }
    div#menu td#ici {background-color: transparent;}
    div#menu td#mid {border-left:none; border-right:none;}
    div#menu a:hover { text-decoration: none; color: #CC3333;}
    
    /* ----------------------------------------------------------------------------------------------list-menu*/
    div#menu-new{
    width: 600px;
    font-size: 15px;
    font-weight: bold;
    border: thin solid;
    margin: 0 0 50px 0;
    padding: 0;
    }
    div#menu-new ul{width:600px;}
    div#menu-new ul li {
    border:3px solid #ffffff;
    padding:3px 6px;
    margin: 0;
    background-color:#999999;
    text-align:center ;
    display:inline;
    list-style:none;
    width:33%;
    }
    div#menu-new ul li#ici {background-color: transparent;}
    div#menu-new ul li#mid {border-left:none; border-right:none;}
    div#menu-new a:hover { text-decoration: none; color: #CC3333;}
    any idea how to force my list to the width I want??
    thx
    joz
    <>

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    You can't use [minicode]display: inline[/minicode] with a set width, unfortunately. Inline blocks stretch to the size of their contents, but no further. I don't think there's a way to solve this, but I might be wrong and people will correct me if I am :-)

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    Here's what I came up with

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-CA" lang="en-CA">
    
    <head>
    
    	<title>a menu</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    <!--
    body {
      background-color: #CC3333;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size:11px;
    }
    /* ---| menu |-------------------------------- */
    #mainmenu {
      width: 597px;
    	height: 24px;
    	border: 3px solid #fff;
    }
    
    #mainmenu ul {
    	list-style: none;
    	display: inline;
    }
    		
    #mainmenu ul li {
    	float: left;
    	position: relative;
    }
    
    #mainmenu ul li.last {
    	margin-right: 0;
    }
    
    #mainmenu ul li a {
    	display: block;
    	text-decoration: none;
    	color: #fff;
    	font-weight: bold;
    	text-transform: uppercase;
    	font-size: 15px;
    	text-align: center;
    	width: 185px;
    	padding: 3px 6px;
    	background-color: #999;
    	border-right: 3px solid #fff;
    }
    
    * html #mainmenu ul li a {
      width: 200px;
    	w\idth: 185px;
    }
    
    #mainmenu ul li a:hover {
    	color: #c33;
    }
    
    #mainmenu ul li a.selected {
    	background-color: #c33;
    }
    
    #mainmenu ul li a.selected:hover {
    	color: #fff;
    }
    
    #mainmenu ul li a.last {
    	border-right: 0;	
    }
    
    -->
    </style>
    
    
    </head>
    <body>
    
    <div id="mainmenu">
    <ul>
      <li><a href="" class="selected">Presentation</a><li>
    	<li><a href="">Projets</a><li>
    	<li><a href="" class="last">Contact</a><li>
    </ul>
    </div>
    
    
    </body>
    </html>
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Senior Member -chris-'s Avatar
    Join Date
    Apr 2006
    Location
    SK
    Posts
    1,205
    Member #
    13102
    I went through and changed several things, and didnt get it to look like the table menu you have. There was more that I could have done, but I have to take my daughter to the doctor, so I had to stop.
    Portfolio | Blog | Twitter

    Was my post, or someone elses, helpful? Click the thumbs up to let everyone know!

  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Damn me for being stupid and forgetting the float: left trick that I've used more than once :-P

  7. #6
    joz
    joz is offline
    Member joz's Avatar
    Join Date
    May 2005
    Location
    bxl
    Posts
    36
    Member #
    10035
    Thanks a lot Karinne. You did it!

    I wouldn't have found that by myself...
    joz
    <>

  8. #7
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    With practice and LOTS of patience and trial and error you would have :laugh:
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:21 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com