Foros del Web » Creando para Internet » CSS »

usando css y viñetas

Estas en el tema de usando css y viñetas en el foro de CSS en Foros del Web. saludos he visto en webs que es posible mediante css hacer que las viñetas muevan un poco más su posición hacia la izquierda de lo ...
  #1 (permalink)  
Antiguo 28/01/2006, 12:27
Avatar de DracoWorld  
Fecha de Ingreso: julio-2003
Ubicación: Mérida - Venezuela
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 0
usando css y viñetas

saludos
he visto en webs que es posible mediante css hacer que las viñetas muevan un poco más su posición hacia la izquierda de lo que usualmente poseen por defecto, como se puede lograr esto? ya que al crear viñetas qdan con un margen elevado desde la izquierda y quisiera poder cambiar eso. (espero haberme explicado)

gracias de antemano.
  #2 (permalink)  
Antiguo 28/01/2006, 15:12
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola DracoWorld:

No estoy deguro de lo que planteas, pero pienso que esas viñetas son el contenido de los atributos title... y no se puueden modificar

Supongo que te refieres entonces a efectos javascript (tooltip) que muestran capas con el evento mouseover (y lo ocultan con mouseout)

En las FAQs javascript hay un par de temas al respecto...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 29/01/2006, 10:17
Avatar de DracoWorld  
Fecha de Ingreso: julio-2003
Ubicación: Mérida - Venezuela
Mensajes: 505
Antigüedad: 14 años, 4 meses
Puntos: 0
ok, veamos, te doy un eejmplo http://dvinci.outnloud.net/ mira el menu de la derecho y los enlaces, esos poseen viñetas pero con comportamientos diferentes cuando pasas el mouse, y eso es hecho en css, estuve viendo el codigo pero mes dificil comprenderlo ya que s algo complejo. algo asi es lo q estoy buscando, d igual forma vere los FAQ, gracias
  #4 (permalink)  
Antiguo 29/01/2006, 10:38
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola DracoWorld

Podría ser algo así:
Código:
<ul id="menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
Código:
#menu {width:100px}
#menu li {list-style: none}
#menu a {
  width:100%;
  display:block;
  padding-left:10px;
  text-decoration:none;
  background: url('li.jpg') left no-repeat }
#menu a:hover {
  background:silver url('li-over.jpg') left no-repeat;
  border-right:1em solid gray }
Espero que te sirva. Saludos,
  #5 (permalink)  
Antiguo 30/01/2006, 13:22
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Hola todos :

Creo que es con display: compact y run-in.

Busca el atributo display en Google o el sitio del W3C para más datos. Y no funciona en todos los navegadores.

[edit]
Iba a probar el display que sugerí arriba, pero estoy seguro de que no va a andar.

Preparé un par de ejemplos más

Código:
<html>
<head>
<title></title>
<style>
body {font-size:100%;}

.separ1 {font-size:1em}
.separ1 dd .cerca{position:relative; left:0.2em; font-size:1.2em}
.separ1 dd .normal{position:relative; font-size:1.2em}
.separ1 dd .lejos{position:relative; left:-0.2em; font-size:1.2em}

.separ1 .contMultilinea{position:relative; margin-top:1.5em; }
.separ1 dd .multilinea{position:absolute; }


ol {font-size:1em; list-style-type:upper-alpha; }
.mayor{padding-left:0.8em; }
</style>
</head>
<body>

<ol>
 <li>Letra normal.</li>
 <li class="mayor">Letra lejos.
<br /> Otra linea.</li>
</ol>

<hr />

<dl class="separ1">
   <dd><span class="cerca">&bull;.</span> Punto cerca.</dd>
   <dd><span class="normal">&bull;.</span> Punto normal</dd>
   <dd><span class="lejos">&bull;.</span> Punto lejos</dd>

   <dd class="contmultilinea"><span class="cerca">&bull;.</span> <span class="multilinea">Punto cerca.
<br /> Otra linea de Punto cerca.</span></dd>
</dl>

</body>
</html>
Se puede 'hacer como' si se separara más la viñeta del texto (lo que puse es una versión del código de JavierB ( ) sin imagen, pero no acercarlos, así que terminé simulando una lista con dl / dd y un caracter para conseguir el efecto.

Viñetas personalizables.

[/edit]

Última edición por furoya; 16/02/2006 a las 14:11
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:31.