Hola a todos, tengo un problemilla.
Tenfo una cabecera que lo que debe tener es una imagen de fondo y una lista de
opciones en la parte derecha.Todas las opciones de la lista tienen una imagen
asociada pero cada una diferente.Cada elemento de la lista tiene un margen
derecho de 3 pixeles (este margen tiene que ser una imagen). El caso es que yo
toda la ul la meto en un div llamado secciones cabecera y lo floto a la
derecha. Es en esta capa en la que meto como imagen de fondo la esquina del
primer elemento de la lista (el que tiene esquina redondeada). Como imagen de
fondo de la ul meto una imagen de 3px de ancho y un alto fijo de 27px que va a
se la imagen del separador de elementos de la lista. Los li tienen una imagen
de fondo que es un degradado. y por ulitmo cada enlace de cada li tiene su
propia imagen de fondo.
Un poco rollo eh??
El caso es que el div que contiene toda la lista ocupa de ancho el ancho
completo de la capa a la que pertenece, cuando yo no le he dicho que lo haga.
Yo pense que el div se adaptaria en ancho en funcion de los elementos que tenga.
Como puedo hacer para que esa capa tenga de ancho solo lo que necesita???
os pego el codigo para que lo veais:
<div id="cabecera">
<div id="seccionescabecera">
<ul>
<li><a id="soporte" href="#">Soporte</a></li>
<li><a id="perfil" href="#">Mi gestor</a></li>
<li><a id="estadisticas" href="#">Estadísticas</a></li>
<li><a id="acercade" href="#">Acerca de</a></li>
<li><a id="ayuda" href="#">Ayuda</a></li>
<li id="lisalir"><a id="salir" href="#">Salir</a></li>
</ul>
</div>
</div>
Y el css:
div#cabecera
{
width: 1024px;
height: 103px;
margin:0;
padding:0;
border-width: 0px;
background-image:url(../img/cabecera.jpg);
background-repeat:no-repeat;
text-align:left;
}
div#cabecera #seccionescabecera
{
height: 27px;
margin:0;
padding:0;
border-width: 0px;
background-image:url(../img/separadorseccionescabecera.jpg);
background-position:top;
background-repeat:repeat-x;
float:right;
}
div#seccionescabecera ul
{
margin:0;
padding:0 0 0 6px;
list-style:none;
background-image:url(../img/esquinaseccionescabecera.jpg);
background-position:left;
background-repeat:no-repeat;
height:27px;
float:right;
}
div#seccionescabecera li
{
margin:0 3px 0 0;
padding:0;
background-image:url(../img/fondoseccionescabecera.jpg);
background-repeat:repeat-x;
height:27px;
float:left;
}
div#seccionescabecera #lisalir
{
margin:0;
padding:0;
}
div#seccionescabecera a
{
margin:0 0 0 6px;
padding:7px 12px 10px 23px;
font-size:.7em;
font-weight:bold;
color:#000000;
text-decoration:none;
}
div#seccionescabecera #soporte
{
background-image:url(../img/iconosoporte.gif);
background-position:left;
background-repeat:no-repeat;
}
div#seccionescabecera #perfil
{
background-image:url(../img/iconoperfil.gif);
background-position:left;
background-repeat:no-repeat;
}
div#seccionescabecera #estadisticas
{
background-image:url(../img/iconoestadisticas.gif);
background-position:left;
background-repeat:no-repeat;
}
div#seccionescabecera #acercade
{
background-image:url(../img/iconoacercade.gif);
background-position:left;
background-repeat:no-repeat;
}
div#seccionescabecera #ayuda
{
background-image:url(../img/iconoayuda.gif);
background-position:left;
background-repeat:no-repeat;
}
div#seccionescabecera #salir
{
background-image:url(../img/iconosalir.gif);
background-position:left;
background-repeat:no-repeat;
}
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
