Como tirar una linea vertical?.

Learing · #1 (**permalink**) 06/01/2003, 22:24

Hola gente...

Una pregunta sencilla.

¿Como tirar una linea vertical?.

caricatos · #2 (**permalink**) 07/01/2003, 01:17

Hola Learing:

La única forma que yo conozco es con una tabla en donde una columna se deja en blanco (con el color que quieras para la línea) de pocos pixel's de anchura y el resto de las columnas con el contenido...

ejemplo:
<table width=300><tr><td style="width:2;background-color:blue"></td><td>Contenido que se verá a la derecha</td></tr></table>

Saludos

Learing · #3 (**permalink**) 07/01/2003, 01:26

Gracias Caricatos, pero aun asi no es lo que andaba buscado.

De todos modos gracias.

mikel_gomez · #4 (**permalink**) 07/01/2003, 05:10

Caricatos ha hecho la línea como una celda estrecha de 2 pixels cuyo fondo ha cambiado de color

Otra forma, creo que más útil y práctica es, usando también una tabla, redefinir los bordes de la tabla o celdas que deseemos, sin preocuparnos de su contenido.

Código:

<td style="height: 400px; border-right: 2px ridge black;">
  Contenido
</td>

Ejemplo HTML completo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//ES"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Líneas verticales - 2001.07.30 - 2003.01.07 - Mikel Gómez -->
<html>
  <head>
    <title>Línea vertical</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
      .linverder400 {height: 400px; border-right: 2px ridge black;}
      .alisup       {vertical-align: top;}
    </style>
  </head>
  <body>
    <table>
      <tr class="alisup">
        <td class="linverder400">
          Ejemplo de línea vertical &nbsp;
          <br /><br />
          <img src="http://www.w3.org/Icons/valid-xhtml11"
            alt="xhtml 1.1 válido" height="31" width="88" />
          <img src="http://www.w3.org/Icons/valid-css"
            alt="Valid CSS!" height="31" width="88" />
        </td>
      </tr>
    </table>
  </body>
</html>

Si todavía no es lo que quieres Learing, podrías explicarte un poco más. ¿Qué es lo que andas buscando en realidad?

Saludos,
Mikel

Learing · #5 (**permalink**) 07/01/2003, 05:20

mikel_gomez Gracias era justo lo que necesitaba. Y gracias a Caricatos por su ayuda tambien.

duchamp · #6 (**permalink**) 08/01/2003, 07:25

Bueno, otra forma sería insertar un gif de 1 x 1 pixel y forzar la altura al 100% o a la medida en px que tu necesites, por ejemplo:

Cita:

De cualquier manera, una celda con un 'spacer' adentro es lo más aconsejable y ya casi un standard. (el gif transparente de 1x1 px es necesario para que la celda se ajuste al tamaño exacto que tu buscas).

Saludos

Snake-Prt · #7 (**permalink**) 23/09/2008, 22:20

y si kiero ponerla en la parte derecha con un texto similar ? como debo hacer :$ xD

blogdopata · #8 (**permalink**) 24/08/2012, 15:43

Hola bro si xD este post esta muerto puedes hacerlo de N formas -.-!! hacer un <hr> y jugar con transform:rotate(90deg) ;

o hacer un div con solo boder 1px solid PERU;