Foros del Web » Creando para Internet » CSS »

Un menu y bordes del fondo como esto

Estas en el tema de Un menu y bordes del fondo como esto en el foro de CSS en Foros del Web. Hola, Estoy intentando diseñar un template algo basico, encontre una imagen de un menu que me gusta, me gustaria que me hecharan una mano maso ...
  #1 (permalink)  
Antiguo 08/04/2011, 16:54
Avatar de BekoxD  
Fecha de Ingreso: mayo-2008
Ubicación: Perú
Mensajes: 220
Antigüedad: 9 años, 6 meses
Puntos: 11
Pregunta Un menu y bordes del fondo como esto

Hola,
Estoy intentando diseñar un template algo basico, encontre una imagen de un menu que me gusta, me gustaria que me hecharan una mano maso menos para tener idea de como funciona el stylo de ese menu.



Espero no causar molestia, no necesariamente quiero que me ayuden por completo, solo un inicio de como maso funciona el estilo :)

Muchas gracias de antemano!
Saludos
Beko
__________________
Si tú sabes lo que vales, ve y consigue lo que mereces.
  #2 (permalink)  
Antiguo 08/04/2011, 22:22
Avatar de Yefb  
Fecha de Ingreso: septiembre-2008
Ubicación: Medellín
Mensajes: 55
Antigüedad: 9 años, 3 meses
Puntos: 1
Respuesta: Un menu y bordes del fondo como esto

No entiendo :-/
  #3 (permalink)  
Antiguo 08/04/2011, 22:40
Avatar de BekoxD  
Fecha de Ingreso: mayo-2008
Ubicación: Perú
Mensajes: 220
Antigüedad: 9 años, 6 meses
Puntos: 11
Respuesta: Un menu y bordes del fondo como esto

Cita:
Iniciado por Yefb Ver Mensaje
No entiendo :-/
Lo que necesito es obtener como hacer en css y html lo que dejo marcado.



Gracias
Saludos
__________________
Si tú sabes lo que vales, ve y consigue lo que mereces.
  #4 (permalink)  
Antiguo 08/04/2011, 23:37
Avatar de javiandgo  
Fecha de Ingreso: septiembre-2010
Ubicación: Bogota, Colombia
Mensajes: 456
Antigüedad: 7 años, 2 meses
Puntos: 55
Respuesta: Un menu y bordes del fondo como esto

menu normal usando clases
ejemplo

Código HTML:
<style>
#menu-superior {background:#CCC;}
#menu-inferior {backgroun:#F1F1F1;}
#menu-superior .item {padding:5px 10px;}
#menu-superior .noselect {color:#444; border-left:1px solid #333; border-top:1px solid #333; border-rigth:1px solid #333;}
#menu-superior .active, #menu-superior .hover {color:#000; background:#F1F1F1; padding-top:2px;}
</style>

<div id="menu">
<div id="menu-superior">
     <ul>
             <li><a href="#" class="item noselect">Site Settings</a></li>
             <li><a href="#" class="item active">Site Pages</a></li>
             <li><a href="#" class="item noselect">Site Theme</a></li>
     </ul>
</div>
<div id="menu-inferior">
             <li><a href="#" class="active">Home</a></li>
             <li><a href="#" class="item">Galleries</a></li>
             <li><a href="#" class="item">Contact</a></li>
</div>
</div> 
seria algo así aunque tendrías que ver que niveles de capa se tiene para poder perfeccionar el efecto. El .hover y .active del menú superior tendrían que tener fondo del mismo color del menú inferior, para crear el efecto de fusión. Aquí solo muestro como es el css para el efecto pero tendrás que darle el estilo correspondiente para posicionar los menúes de forma horizontal.
  #5 (permalink)  
Antiguo 09/04/2011, 03:19
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Un menu y bordes del fondo como esto

Hola

Tambien tendrias que hacer el background con photoshop para que tubiera la sombra y los bordes redondeados , ya que el -moz-border no funciona en IE
  #6 (permalink)  
Antiguo 09/04/2011, 10:07
Avatar de BekoxD  
Fecha de Ingreso: mayo-2008
Ubicación: Perú
Mensajes: 220
Antigüedad: 9 años, 6 meses
Puntos: 11
Respuesta: Un menu y bordes del fondo como esto

Ya :)

Lo tengo algo avanzado miren en http://muchaonda.info/menu/

Pero necesito esto lo que esta señalado, por favor si me hechan la mano :)



puede sacar el codigo css de sitio.

Gracias
Saludos
__________________
Si tú sabes lo que vales, ve y consigue lo que mereces.
  #7 (permalink)  
Antiguo 09/04/2011, 13:21
Avatar de BekoxD  
Fecha de Ingreso: mayo-2008
Ubicación: Perú
Mensajes: 220
Antigüedad: 9 años, 6 meses
Puntos: 11
Respuesta: Un menu y bordes del fondo como esto

Ya hice algunos avances, necesito pulirlo, alguien me ayuda por favor?

el menu lo puede ver en este enlace http://muchaonda.info/menu/

Saludos
__________________
Si tú sabes lo que vales, ve y consigue lo que mereces.

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:41.