Como crear un sólido vertical en HTML?

[saanteeh]

Buenas, tengo en mi web esto:


http://oi51.tinypic.com/2kplon.jpg

Y me gustaria crearle un sólido vertical como el que puse en esta imagén (lo puse en paint):


http://i55.tinypic.com/2087dky.png

Espero por sus respuestas,
Gracias.

[ArturoGallegos]

con un solido vertical quiero suponer que te refieres a la linea divisora, si es el caso basta con crear una imagen de 2x1 y la repitas en vertical

[DrFaust]

Hay dos formas muy sencillas:

- Crear un contenedor DIV con las proporciones deseadas, y el color de fondo que hayas elegido.

- Ponerle un borde ENORME al contenedor de la derecha.

La segunda opción parece ser, por mucho, la más semánticamente correcta. Usá algo como:

Código:

style="border-left:30px solid #303030;"

Fijate de reducir el tamaño del contenedor en 30px para balancear este cambio.

[saanteeh]

Gracias por sus respuestas.

[saanteeh]

Iniciado por DrFaust

Hay dos formas muy sencillas:

- Crear un contenedor DIV con las proporciones deseadas, y el color de fondo que hayas elegido.

- Ponerle un borde ENORME al contenedor de la derecha.

La segunda opción parece ser, por mucho, la más semánticamente correcta. Usá algo como:

Código:

style="border-left:30px solid #303030;"

Fijate de reducir el tamaño del contenedor en 30px para balancear este cambio.

Gracias realmente por tu respuesta pero me quedo asi:

http://i53.tinypic.com/68v69v.png

Y me gustaria crear un espacio entre el sólido y las letras. Y alargarlo un poco hacia arriba, lo de alargarlo me parece que deberia editar el espacio del sidebar o algo así.
Saludos y gracias.

[DrFaust]

El espacio entre el borde y las letras se logra con la propiedad padding:

Código:

padding-left:10px;

Y si le agregás padding arriba y abajo, el borde que agregaste se va a extender por encima y por debajo de las letras:

Código:

padding-top:10px;
padding-bottom:10px;

De nuevo, acordate de balancear el padding que agregues reduciendo las dimensiones del contenedor en igual cantidad.

[saanteeh]

Iniciado por DrFaust

El espacio entre el borde y las letras se logra con la propiedad padding:

Código:

padding-left:10px;

Y si le agregás padding arriba y abajo, el borde que agregaste se va a extender por encima y por debajo de las letras:

Código:

padding-top:10px;
padding-bottom:10px;

De nuevo, acordate de balancear el padding que agregues reduciendo las dimensiones del contenedor en igual cantidad.

Muchas gracias de verdad!