Foros del Web » Creando para Internet » CSS »

Como diseño un menu con viñetas?

Estas en el tema de Como diseño un menu con viñetas? en el foro de CSS en Foros del Web. Quiero un diseño igual a http://www.alternate.es/html/productDetails.html?artno=IMFLN2 funciona en internet explores y en firefox. Diseñe uno similar a la guerra, pero demora un monton en cargar ...
  #1 (permalink)  
Antiguo 12/07/2008, 18:35
 
Fecha de Ingreso: junio-2008
Mensajes: 343
Antigüedad: 9 años, 5 meses
Puntos: 4
Como diseño un menu con viñetas?

Quiero un diseño igual a http://www.alternate.es/html/productDetails.html?artno=IMFLN2 funciona en internet explores y en firefox.
Diseñe uno similar a la guerra, pero demora un monton en cargar y no funciona en firefox.
De css no se mucho, pero si de php, la lista del menu seran registrso de la bd, pero solo me interesa el diseño con css, como esta hecho este menu, con div o listas

Espero me ayuden con el codigo css

saludos
  #2 (permalink)  
Antiguo 12/07/2008, 20:14
Avatar de dacho  
Fecha de Ingreso: junio-2008
Ubicación: Argentina
Mensajes: 374
Antigüedad: 9 años, 5 meses
Puntos: 21
De acuerdo Respuesta: Como diseño un menu con viñetas?

Hola, el menu que quieres hacer se puede encontrar en la red. Te recomiendo que busques un poco en este foro o en google sobre eso. Yo siempre por casualidad he cruzado varios tutoriales sobre el tema. Si quieres puedes aprender a ahcerlo desde 0 pero creo que es algo complicado, principalemente para el caso de que sea compatible con los distintos navegadores.

No estoy 100% seguro pero creo que el menu que queres hacer en este caso necesita una pequeña ayuda en javascript.

Creeme que esta lleno de tutoriales y codigos para que puedas ver como crear el tuyo a partir de esos. Ademas al ser css y javascript te los puedes chupar para tu maquina y analizar el codigo de este que te gusta.

Saludos, Damian.
  #3 (permalink)  
Antiguo 13/07/2008, 19:27
 
Fecha de Ingreso: febrero-2008
Mensajes: 303
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Como diseño un menu con viñetas?

En este tutorial hay un ejemplo

basta con esto
#navi { list-style-image:url(images/vineta.png);}
  #4 (permalink)  
Antiguo 13/07/2008, 19:30
 
Fecha de Ingreso: junio-2008
Mensajes: 343
Antigüedad: 9 años, 5 meses
Puntos: 4
Respuesta: Como diseño un menu con viñetas?

hola a todos
las imagenes de las viñetas se descuadran miren la imagen
http://www.subetela.com/f/q/d/8/14464.png

Por favor algun experto en css, q me ayude a solucionar el problema, necesito un menu igual al del 1er post

saludos y espero su colaboracion
  #5 (permalink)  
Antiguo 13/07/2008, 19:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como diseño un menu con viñetas?

Ese menú no está hecho con viñetas; ni siquiera con listas (li).

Cada elemento del menú es un div, que tiene puesto de fondo un gráfico, un padding-left de 10px y dentro un enlace.

Mikel.
  #6 (permalink)  
Antiguo 13/07/2008, 19:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como diseño un menu con viñetas?

Mira un elemento cualquiera:

HTML:
Cita:
<div class="TreeFol_level1">
<a href="/html/highlights.html?hgid=9&tgid=66&treeName=HARDWARE&L evel1=Barebones&" target="">Barebones</a>
</div>
CSS:
Cita:
.TreeFol_level1 { padding-left:10px; margin-right:1px; background:url(/pix/icons/navArrowRight.gif) 2px 7px no-repeat }
Mikel.
  #7 (permalink)  
Antiguo 14/07/2008, 11:25
 
Fecha de Ingreso: junio-2008
Mensajes: 343
Antigüedad: 9 años, 5 meses
Puntos: 4
Respuesta: Como diseño un menu con viñetas?

Que tal mikmoro
Como podria optimizar el codigo, para utilizar un solo div y no estar repitiendolo
<div class="TreeFol_level1">
<a href="#" target="">Barebones</a>
</div>
o quizas otro codigo css que haga lo mismo?, de todos modos gracias
  #8 (permalink)  
Antiguo 14/07/2008, 11:58
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como diseño un menu con viñetas?

Mira, una manera de hacerlo es esta: coges su imagen (o una tuya)

http://www.alternate.es/pix/icons/navArrowRight.gif

la pones como fondo del elemento "a" y a este le das un espacio con text-indent y la desplazas hasta que esté donde tú quieres.

Mira este simple ejemplo:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#menu ul {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
list-style-type:none
}
#menu a {
display: block;
width: 100px;
background: url(img/navArrowRight.gif) no-repeat left 5px;
text-indent: 14px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</div>
</body>
</html>
Ellos lo han hecho con el div porque de esta manera que te pongo, si ahora hace que se subrayen al pasar el ratón (por ejemplo), se subraya todo, incluido el gráfico.
Hay más maneras, pero hay que meterle un rato.

Mikel.

Última edición por Mikmoro; 14/07/2008 a las 13:26
  #9 (permalink)  
Antiguo 14/07/2008, 13:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Como diseño un menu con viñetas?

Una forma mejor de hacerlo:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
#menu ul {
font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
list-style-type:none
}
#menu ul li {background: url(img/navArrowRight.gif) no-repeat left center;
}
#menu a{
display: block;
width: 100px;
text-indent: 14px;
text-decoration: none;
}
#menu a:hover {text-decoration: underline;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</div>
</body>
</html>
Mikel.
  #10 (permalink)  
Antiguo 26/12/2015, 03:33
 
Fecha de Ingreso: diciembre-2015
Mensajes: 2
Antigüedad: 2 años
Puntos: 0
Respuesta: Como diseño un menu con viñetas?

por fa, alguien que me diga como hacer este tipo de menu...

http://www.agccalidad.com.mx/index.html
  #11 (permalink)  
Antiguo 26/12/2015, 03:35
 
Fecha de Ingreso: diciembre-2015
Mensajes: 2
Antigüedad: 2 años
Puntos: 0
Exclamación Respuesta: Cómo diseño un menú con imágenes?

Cita:
Iniciado por Keyciiz Ver Mensaje

por fa, alguien que me diga como hacer este tipo de menú...

http://www.agccalidad.com.mx/index.html
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 17:25.