ajustar css

buenos dias, estoy haciendo una barra de navegacion para una pagina que contiene una cabecera y cuatro bloques con diferentes enlaces dentro de ella. Tres de ellas pueden tener el mismo tamaño pero la ultima deberia ajustarse segun el tamaño del texto ocupando asi la barra de navegacion los 800 px de la cabecera. Al final le coloque espacios en el html para que fuese lo suficiente grande... pero es una chapuza.

el codigo es el siguiente:

Código :

<div id="masthead">
  
  <h1 id="siteName"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=                                       "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="160" title="cabecera">
      <param name="movie" value="indexflash/cabecera.swf">
      <param name="quality" value="high">
      <embed src="indexflash/cabecera.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type=                     "application/x-shockwave-flash" width="800" height="160" ></embed>
    </object></h1>
   
  <ul id="globalNav"> 
        
      <li><a href="#">&nbsp;&nbsp;Coches
           </a></li>
        
        
      <li><a href="#">&nbsp;&nbsp;Motos
            </a></li>
                  
      <li><a href</a></li>
      
      
       <li><a href="#">&nbsp;&nbsp;Actualmente tenemos
        veh&iacute;culos a su disposici&oacute;n.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>      
      </li>
                          </ul>
                          </div>


**********************************************************

#masthead{
   padding: 0px 0px 0px 0px;
   width: 800px;
   /*border-bottom: 1px solid #cccccc;*/
   border:1px solid #333333;

}
#globalNav{
   list-style:none;
   margin:0;
   padding:0;
   width: 800px;
   height: 20px;
   background-color:#CCCCCC;
}

#globalNav li {
   margin:2px;
   padding:0px;
   float:left;
   border:1px solid #333333;
               
}

#globalNav li a {
   display:block;
   padding:4px O;
   text-decoration:none;
   text-align:justify;
   font-size:14px;
   color:#000000;
   font-weight: bold;         
}

#globalNav li a:hover {
   color:#FFFFFF;
   background-color:#3399FF;
   border-left-color:#CCCCCC;

prueba a definir el ultimo li que tienes, sino te va recomendaria que sacases los enlaces de la lista y pusieras unicamente los <a></a> que quieras con el display block que tienes y modidifandolos así a tu gusto
salud

buenas, aqui estoy de nuevo. muchas gracias por tu consejo, la verdad es que estaba probando eso en estos momentos, y funciona. ahora estoy con un problemilla mayor.
buscando por ahi vi una forma interesante de botones css con borde redondo y ajustables al texto y tamaño. pero bien, no consigo colocar un boton al lado del otro, simplemente me sale uno encima y el otro debajo. creo que estoy pasando por alto la verdadera solucion, y no paro de darle vueltas al asunto. si consiguiese editarlo uno al otro me podria centrar en el diseño. sobran algunas cosas pero las tenia ahi para ir probando diferentes posibilidades.

el html es el siguiente:

Código :

<div id="botones">
    
     <div>
      <ul>
      <li><div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>ANUNCIAR</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div></li>
      <li><div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>BUSCAR</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div></li>
      </ul> 
        <?php
   $statsresults=visitas($dbh);
   echo $statsresults[0];
   echo " visitas desde el ";
   echo " $visitas 01/02/2004";
         ?>
  </div> 
  </div>

y el css es este:

Código :

#botones {
   margin-top:0px;
   
   }
#botones li div{
   margin-top:0px;
   list-style:none;
   width:auto;
   }
   
#botones li{
   list-style:none;
   margin-bottom:0px;
   padding:0px;
   }
   
#botones li div{
   
   }

.inset {background: transparent; width:20%; margin:5px auto;}
.inset h1, .inset p {margin:0 0px;}
.inset h1 {font-size:1.2em; color:#fff; letter-spacing:1px; text-align:center;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:0.5px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#0099FF; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#0099FF; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#0099FF; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#0099FF; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#0099FF; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#0099FF; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#0099FF; border-left:1px solid #999; border-right:1px solid #fff;}

Tu único problema es que no usas padding... no necesitabas tanta chapuza, manejando bien los padding es suficiente, ATL los enlaces no pueden estar suelto al "ahí como van", deben estar dentro de algo, mínimo un párrafo, por otro lado la solución de los botnes me parece un poco rara... sobre lo que mencionas que te sucede, es porque en ningún momento veo que hagas un float en tu css...

buenas tardes. acabo de leer la respuesta. anoche despues de mandar el mensaje segui trasteando algo mas. pense que si editaba en un html solo los botones iba a ser bastante mas sencillo... y asi fue. Consegui editar los botones uno al lado del otro, ya solo me falta meterle el hover, y un padding algo mayor hasta cuadrarlo. el problema creo que es que viene alguna propiedad heredada de otro contenedor. seguire probando, insertando poco a poco cosas en el html para no liarme hasta que funcione.

eso si, agradeceria que gente mas experta que yo (esta es mi primera maquetacion con css) me dieran consejos o patrones a seguir para usar de la forma correcta las hojas de estilo.. postearia toda la pagina pero todavia le queda un largo trabajo. lo hare en cuanto acabe para que le echen un vistazo y me hagan sentir insatisfecho con mis errores (sseguro que muchos).

este es el codigo de los botones,

Código :

#BarraNavegacion{
   list-style:none;
   margin:0px;
   padding:0px;
   width: 400px;
   height: 20px;
   background-color:#CCCCCC;
   font-size:14px;
   /*ajusta el cuadro de la barra de navegacion*/
}
#BarraNavegacion li{
   margin:2px;
   padding:5px;
   border:1px solid#FFFFFF;
   float:left;
   font-family: Verdana,Arial,sans-serif;
   font-size:9px;
   vertical-align:bottom;
}
.inset {background: transparent;  margin:0px auto;}
.inset h1, .inset p {margin:0 0px;}
.inset h1 {font-size:1.2em; color:#fff; letter-spacing:1px; text-align:center;}
.inset p {padding-bottom:0.5em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:0.5px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#0099FF; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#0099FF; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#0099FF; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#0099FF; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#0099FF; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#0099FF; border-left:1px solid #eee; border-right:1px solid #fff;}


.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#0099FF; border-left:1px solid #999; border-right:1px solid #fff;}
</style>
</head>

<body>
<div id="header">
  <ul id="BarraNavegacion"> 
        
      <li><div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>ANUNCIAR</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div></li>

        
      <li><div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1>BUSCAR</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div></li>
                  
      <li><div class="inset">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
<div class="boxcontent">
<h1> 12222222 visitas desde 12/4/2006</h1>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div></li>
  </ul>

[/code]