usando css y viñetas

DracoWorld · #1 (**permalink**) 28/01/2006, 12:27

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.

caricatos · #2 (**permalink**) 28/01/2006, 15:12

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

DracoWorld · #3 (**permalink**) 29/01/2006, 10:17

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

JavierB · #4 (**permalink**) 29/01/2006, 10:38

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,

furoya · #5 (**permalink**) 30/01/2006, 13:22

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]