28/12/2005, 08:37
| ||||
| ||||
| 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 |
|
28/12/2005, 09:01
| ||||
| ||||
| 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. |
|
28/12/2005, 09: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 |
|
28/12/2005, 10:16
| ||||
| ||||
| genera menus usando listas. lo del fondo si es compatible, aplica lo siguiente
Código:
y como te decia usa el buscador del foro y encontraras hartos links a tutoriales de como hacer menus 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 */
}
|
|
28/12/2005, 10:19
| ||||
| ||||
| 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 |
|
28/12/2005, 11:48
| ||||
| ||||
| 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:
y claro, así eliminas el background-image, background-position, padding... .ul{list-style:url(../imagenes/cuadradito_naranja.gif);}
__________________ Pasamos tus PSD a HTML Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. - |
|
28/12/2005, 12:56
| ||||
| ||||
| no te entendi muy bien
__________________ SEO en Medellin |
|
28/12/2005, 13:01
| ||||
| ||||
| la opcion que da webosiris es mejor siempre y cuando el condenado navegador la soporte, este codigo:
Código:
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. ul{list-style:url(../imagenes/cuadradito_naranja.gif);}
|
|
28/12/2005, 13:10
| ||||
| ||||
| Cita: es CSS básico, cualquier navegador con un pequeño soporte para css lo debería soportar (si, incluso el IE).siempre y cuando el condenado navegador la soporte 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. - |
|
28/12/2005, 13:25
| ||||
| ||||
| 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 :( |
|
28/12/2005, 15:35
| ||||
| ||||
| 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 |
|
28/12/2005, 17:00
| ||||
| ||||
| 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. - |
|
28/12/2005, 17:24
| ||||
| ||||
| Cita: Vaya que tienes paciencia.
Iniciado por webosiris Cita: Asi se ve en FF
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.  Excelente, mientras que en IE  mmmmmmm... supongo que no soporta esa propiedad |
|
28/12/2005, 22:16
| ||||
| ||||
| Si ves, lo que me temia, pero te lo agradezco...
__________________ SEO en Medellin |
