menu css

herzbazi · #1 (**permalink**) 11/03/2012, 10:25

amigos tengo un pequeño problema pero no he logrado solución

muy agradecido desde ya por sus comentarios y ayuda...

tengo un menu

el cual es una imagen que va de background y logicamente texto

el problema es que no logro hacer que el texto se ajuste a la imagen por lo que se ve mal

asi es como la quiero

asi es como la tengo

lo que necesito es ajustar el texto a cada espacio de la imagen del menu

aqui les dejo el codigo y me cuentan

index.html

<html>
<head>
</head>
<body>
<div id="contenedor">
<div id="logo"></div>
<div id="menu">
<ul id="menu1">
<li>Inicio </li>
<li>quienes somos</li>
<li>catalogos</li>
<li>contacto</li>
</ul>
</div>
</div>
</body>
</html>

estilo.css

#contenedor {
position:absolute;
width:70%;
height:70%;
z-index:1;
left: 50%;
top: 0%;
margin-left:-35%;

}

#menu {
position:absolute;
width:402px;
height:37px;
z-index:2;
top:20%;
left:45%;
background:url(file:///C|/Users/amor/Desktop/trabajos%20realizados/celebrations/web%20celebrations/images/menu.png);
}

#menu1 li {
list-style:none;
float:left;
margin-top:-7px;
padding:0px 10px;
color:#FFF;
font-size:15;
}

Sirius381 · #2 (**permalink**) 11/03/2012, 22:38

Yo hice algo similar y lo arregle con padding, margin y posicionando todo con float, los extremos del menu son imagenes independientes y el "cuerpo" del menu si es un image background, con el HTML posicione las imagenes y los elementos del menu y ya con el CSS le di el estilo que necesitaba, espero haber ayudado.

Saludos!!

DanielRGB · #3 (**permalink**) 12/03/2012, 03:48

Se puede hacer de muchas maneras.

01. Si quieres que cada sección del menú tenga el mismo ancho y alto. Pues tienes que usar:

width, height y float: left.

Eso sí, tendrás que tener en cuenta el nombre de cada sección.
Si es "Home" o si es "Localización", uno se verá más vacío que el otro.

02. Pero si lo que quieres es que cada sección del menú se adapte al título de esta, y quieres que tengan la misma separación en cada sección, haz como indica nuestro amigo Sirius.

Usa padding y margin.

Que tienes que tener en cuenta?? con margin, si pones una separación de 20px, esa separación no se tendrá en cuenta como enlace. Pasaras el puntero por encima y el enlace no se activará.

Pero si usas padding. Sí.

Por ejemplo.

width: auto;
height: 30px;
float: left;
padding: 5px 25px;

En total sería un botón de largo "nombreseccion" + 50px; y de alto + 40px.

Y todo ese área sería la parte activa del link