Foros del Web » Creando para Internet » CSS »

Maquetar un menu

Estas en el tema de Maquetar un menu en el foro de CSS en Foros del Web. Como se les ocurre que puedo maquetar esto? habia pensado hacer un <h1> y debajo de el 4 <div> de color azul como los muestra ...
  #1 (permalink)  
Antiguo 28/12/2005, 08:37
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
Maquetar un menu

Como se les ocurre que puedo maquetar esto?



habia pensado hacer un <h1> y debajo de el 4 <div> de color azul como los muestra el dibujo y dentro de cada uno de estos 4 <div> meter un elemento de una lista <li> que tendra como fondo que no se repite el cuadrito naranja, pero no se si sea la mejor forma?

COmo lo harian ustedes?
__________________
SEO en Medellin
  #2 (permalink)  
Antiguo 28/12/2005, 09:01
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
no tienes que hacer 4 divs, solo usa un lista con 4 elementos
<h3>...</h3>
<ul>
<li>....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
y ahi le aplicas estilo, te paso un generador de menus con CSS que te ayudara con el marcado y luego ya tu lo modificas
http://www.webmaster-toolkit.com/css...enerator.shtml
tambien puedes usar el buscador del foro que hay haaaartos ejemplos de menus.
  #3 (permalink)  
Antiguo 28/12/2005, 09:24
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
Bien entiendo pero sera muy dificl que al poner el fondo azul y el fondo para le cuadro naranja quede compatible en el mozilla y en el explorer o se podra?

Por cierto el link que em pasas no genera listas....
__________________
SEO en Medellin

Última edición por mafima; 28/12/2005 a las 09:31
  #4 (permalink)  
Antiguo 28/12/2005, 10:16
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
genera menus usando listas.

lo del fondo si es compatible, aplica lo siguiente

Código:
ul{ list-style-type: none;}

li{
display:block;
width: 150px /*ancho que desees */
height: 40px; /* alto que desees */ 
background-color: blue; /* color de fondo */
background-image: url(cuadradito_naranja_en_fondo_azul.jpg); /* la imagen del cuadradito naranja en fondo azul */
background-position: left; /* alineas la imagen de fondo a la izquierda */
padding-left: 30px; /* espacio para que se vea el cuadradito y el texto no lo tape */
}
y como te decia usa el buscador del foro y encontraras hartos links a tutoriales de como hacer menus
  #5 (permalink)  
Antiguo 28/12/2005, 10:19
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
La ultima ves que ensaye poner un fondo de color y una imagen, colo me era compatible en mozilla no en el internet ex´plorer, por eso pense que no se podia, probare y les comentare como me fue
__________________
SEO en Medellin
  #6 (permalink)  
Antiguo 28/12/2005, 11:48
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
eso sí, te si ponés este nombre de archivo
Cita:
cuadradito_naranja_en_fondo_azul.jpg


Lo que te dijo RoQ debería de funcionar, pero es mejor, para seguir con la semántica, poner:
Código:
 .ul{list-style:url(../imagenes/cuadradito_naranja.gif);}
y claro, así eliminas el background-image, background-position, padding...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 28/12/2005, 12:56
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
no te entendi muy bien
__________________
SEO en Medellin
  #8 (permalink)  
Antiguo 28/12/2005, 13:01
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
la opcion que da webosiris es mejor siempre y cuando el condenado navegador la soporte, este codigo:
Código:
ul{list-style:url(../imagenes/cuadradito_naranja.gif);}
reemplaza el caracteristico · de las listas no ordenadas por la imagen que quieras, yo lo he usado y me ha dado mas dolores de cabeza que resultados, pero en fin puede que lo haya hecho mal tambien.
  #9 (permalink)  
Antiguo 28/12/2005, 13:10
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Cita:
siempre y cuando el condenado navegador la soporte
es CSS básico, cualquier navegador con un pequeño soporte para css lo debería soportar (si, incluso el IE).

Especificaciones del w3c sobre list-style
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #10 (permalink)  
Antiguo 28/12/2005, 13:25
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
es CSS2
como te digo de repente lo he aplicado mal y por eso he tenido problemas con IE, la pseudo clase :first-letter tambien funciona en IE pero cuando trato de usarla no me liga :(
  #11 (permalink)  
Antiguo 28/12/2005, 15:35
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
Creoq eu decidire hacerlo mejor de la primera forma, es decir, con DIV's
sucede que quiero lograr una apriencia similar en ambos navegadores (explorer y mozilla) para ello debo creo que debo omitir utilizar los atributos padding y border, es decir, estos, siempre los debere poner en 0 para que no se me presenten problemas en mi maquetacion.

Como veran en el dibojo que les mostre, el cuadrito y la letra empiza con un poco de sangria al lado derecho..... esto lo lograria poniendo un padding en cada atributo... y como les dije para hacer que me quede igual en ambos navegadores no creo poder utilizarlo.

no se si me entiendan.... o si creen que mejor no lo haga asi...
__________________
SEO en Medellin
  #12 (permalink)  
Antiguo 28/12/2005, 17:00
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
no te me vas a poder quejar... te hice esto para que vieras que no es complicado No lo probé en IE (estoy en linux) pero debería funcionar todo ok, salvo por algo que no se (si IE soporta la propiedad list-style-position). En caso que no la soporte (confirmá por favor) igualmente creo que se podría encontrar una solución + o - fácil.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #13 (permalink)  
Antiguo 28/12/2005, 17:24
Avatar de RoQ
RoQ
 
Fecha de Ingreso: abril-2005
Mensajes: 771
Antigüedad: 12 años, 7 meses
Puntos: 0
Cita:
Iniciado por webosiris
no te me vas a poder quejar... te hice esto para que vieras que no es complicado
Vaya que tienes paciencia.

Cita:
Iniciado por webosiris
No lo probé en IE (estoy en linux) pero debería funcionar todo ok, salvo por algo que no se (si IE soporta la propiedad list-style-position). En caso que no la soporte (confirmá por favor) igualmente creo que se podría encontrar una solución + o - fácil.
Asi se ve en FF

Excelente, mientras que en IE

mmmmmmm... supongo que no soporta esa propiedad
  #14 (permalink)  
Antiguo 28/12/2005, 22:16
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
Si ves, lo que me temia, pero te lo agradezco...
__________________
SEO en Medellin
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 01:17.