Texto Vertical con Css! (No css3)

kadas99 · #1 (**permalink**) 06/04/2010, 05:41

Buenos dias! bueno, se me presento un desafio.... poner unos links pero en forma vertical. Entonces me acorde que cuando uno achica el width de un div y le pone, por ejemplo, width 30px; y no especifica el hegith se puede llegar a alinear de forma vertical una palabra o texto, haciendo el width mas chico aun, Yo lo hice de esta forma

Css

Código:

#links{
width:10px;
margin-top:-280px;
margin-left:368px;
text-align:center;
}

Html

Código:

<a href="creacion.php"><div id="links2>C r e a c i o n</div></a>

dejando un espacio en blanco por cada caracter, asi, se alinea solo en forma vertical!

Pero... (Siempre hay un "pero") a la hora de tocar esos links me encuentro con un problema, tengo 4 links, de izquierda a derecha, el tema es que cuando toco en el medio de los dos primeros links, me abre el 4to link! osea.... quiero apretar el 1er link, me movi 2 milimetros a la derecha y como aprete en el espacio vacio entre el 1ero y el 2do link, me abre el 4to link! eso pasa porque de fondo, el 4to link abarca todo el espacio comprendido entre el margen izquierdo y el margin-left de 368px! no se si es algo con el position: absolute/fixed o que.

¿alguien sabe que puede ser?
Muchas gracias!

kyedesigns · #2 (**permalink**) 06/04/2010, 11:33

Puedes probar dando un "padding-left: ...px". Podría funcionar de esa forma. Solo añade la linea de código al css que ya tienes creado.

DragonX · #3 (**permalink**) 06/04/2010, 14:41

proba con esto, es más fácil

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>New Document</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style>
    #links{overflow:hidden;list-style-type:none;}
    #links li{width:10px;float:left;margin:0 8px;} /* mas margin, mas espacio entre links */
    #links li a{text-decoration:none;display:block;}
    </style>
  </head>
  <body>
    <ul id="links">
      <li><a href="#" title="">C R E A C I O N</a></li>
      <li><a href="#" title="">C R E A C I O N</a></li>
      <li><a href="#" title="">C R E A C I O N</a></li>
      <li><a href="#" title="">C R E A C I O N</a></li>
    </ul>
  </body>
</html>

Impostor · #4 (**permalink**) 06/04/2010, 14:48

Muy Bueno DragonX

kadas99 · #5 (**permalink**) 06/04/2010, 16:07

La verdad es muy bueno lo que hiciste! Te Recontra felicito!

ya lo estoy utilizando!

un abrazo!

DragonX · #6 (**permalink**) 07/04/2010, 08:01

me alegra que te haya sido util

Slds.-