Cambiar barra navegador

disguiseddevil · #1 (**permalink**) 03/04/2011, 14:23

Buenas con este código tengo esta barra

Código HTML:

Ver original<style type='text/css'>
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 1px solid #204063;
border-top: 1px solid #204063;
background: url(http://img206.imageshack.us/img206/4038/menuactiveuv8.png) center center repeat-x;
}
.barrademenu li {display: inline;}
.barrademenu li a, .solidblockmenu li a:visited {
float: left;
padding: 9px 11px;
text-decoration: none;
color: #204063;
border-right: 1px solid #204063;
outline: none;
}
.barrademenu li a:hover {
color: #FFFFFF !important;
background: transparent url(http://img132.imageshack.us/img132/8325/menuhoveroa9.png) center center repeat-x;
outline: none;
}
</style>

Cómo sería el código para poner esta??

Otra cosa, lo que he marcado en rojo, como lo quito??? En que parte del código es??

uikekarallo · #2 (**permalink**) 03/04/2011, 18:40

Hola.

Para redondear los bordes se utiliza la propiedad border-radius. Para lograr el efecto borde-1px-borde sólo tienes que poner el fondo (en tu caso) blanco y darle 1px de padding al <li>.

Y eso del final, se ve así porque los <li> están flotados a la izquierda. La manera que tienes de solucionarlo sería calculando el ancho total y dividirlo entre el número de secciones. El resultado será el ancho total para cada <li>. Lo malo de esto es que "Inicio" tendrá el mismo ancho que "presupuesto".
Otra manera sería utilizando un padding derecha-izquierda en los <li>. Sería cuestión de ir probando hasta que desborde.

Saludos.

disguiseddevil · #3 (**permalink**) 04/04/2011, 02:26

ufff, que lio...
si alguien puede poner un ejemplo... es que ni se donde ir poniendo valores

uikekarallo · #4 (**permalink**) 04/04/2011, 03:01

Esta es la idea:

Código HTML:

<style type="text/css">

ul
{
  padding: 1px;
  border: solid 1px blue;
  background: white url(tuimagen.png);
}

ul li a
{
  float: left;
  display: block;
  margin: 0 5px; /* espacio entre cada <li> */
  padding: 5px 25px; /* según el segundo parámentro, fijaremos el ancho a mayores de cada <li>*/
}

</style>

A ver si eso te sirve. Un saludo.

disguiseddevil · #5 (**permalink**) 04/04/2011, 03:40

Gracias ;)

uikekarallo · #6 (**permalink**) 04/04/2011, 08:10

De nada, para eso estamos :)