Linea vertical repetida en CSS

[jalimm]

Hola tengo este código de un borde en forma de linea vertical, pero no se como hacerlo que se repita automáticamente.

Código:

#linea {
border-left: 2px solid #FFF;
width: 2px;
height: 500px; repeat-y;
}

Como le hago para que se repita automáticamente ?
Saludos.

[memoadian]

a que te refieres con que se repita automáticamente?

es una pregunta un poco ambigüa

[jalimm]

Iniciado por memoadian

a que te refieres con que se repita automáticamente?

es una pregunta un poco ambigüa

Con bajar me refiero a que siga al contenido, por ejemplo :


Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |
Lorem ipsum dolor. |<----------[LINEA SIGUIENDO AL CONTENIDO]

No se si me explique bien.

[memoadian]

en vez de usar #linea como id usala como class

Código HTML:

.linea{border-left:1px solid #ccc}
<ul>
    <li class="linea">Lorem...</li>
    <li class="linea">Lorem...</li>
    <li class="linea">Lorem...</li>
    <li class="linea">Lorem...</li>
</ul>
 

o de otro modo

Código CSS:

ul li{border-left:1px solid #ccc}
 

pero eso depende de a que quieras aplicarlo, usa selectores.

[jalimm]

Iniciado por memoadian

en vez de usar #linea como id usala como class

Código HTML:

.linea{border-left:1px solid #ccc}
<ul>
    <li class="linea">Lorem...</li>
    <li class="linea">Lorem...</li>
    <li class="linea">Lorem...</li>
    <li class="linea">Lorem...</li>
</ul>
 

o de otro modo

Código CSS:

ul li{border-left:1px solid #ccc}
 

pero eso depende de a que quieras aplicarlo, usa selectores.

Mira es que quiero usar esa linea para poder separar el contenido del menú, así como una linea divisora, y pues necesito que la linea quede bien con el contenido.
me explico bien?

[memoadian]

Pue si, y de hecho ya te di la respuesta.

usa selectores.

[jalimm]

Se ve bastante feo D:, mejor les pongo fondo al sidelbar de la pagina.

[jalimm]

Pero igual gracias!

[memoadian]

Es que no sabes usarlo, checa este menu:

http://comprar-web.com

no tiene ninguna imagen de fondo :)

[jalimm]

Mira: [URL="http://ripweb.0fees.net/"]http://ripweb.0fees.net/[/URL] si ves el box y el contenido, bueno los quiero separar con una linea vertical o asi se ve bien ?

[memoadian]

El problema es más que nada de percepción, evidentemente si quieres separar linea por linea con un border solido, se ve bastante feo y cargado, pero si estas tienen una separeción margin o padding mayor y un border dashed claro se verá bien.

si quieres separar los posts que son bloques grandes, lo mejor es poner lineas gruesas y marcadas. Sin excesos claro.

[jalimm]

Mejor lo dejo como esta, a propósito si ves el buscador de Google, bueno como le hago para que este muestre los resultados en una pagina nueva, por ejemplo:
'resultados.html#resultados', te dejo el codigo del buscador.

<div id="cse" style="width: 100%;">Cargando...</div>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'es', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
'016670306488624475692:95qooafc0cg', customSearchOptions);
customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>

Y el css

.gsc-control-cse {
font-family: Arial, sans-serif;
border-color: #FFFFFF;
background-color: #ffffff;
}
.gsc-control-cse .gsc-table-result {
font-family: Arial, sans-serif;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
border-color: #3366ff;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
border-color: #2F5BB7;
background-color: #357AE8;
background-image: none;
filter: none;
}
.gsc-tabHeader.gsc-tabhInactive {
border-color: #CCCCCC;
background-color: #ffffff;
}
.gsc-tabHeader.gsc-tabhActive {
border-color: #CCCCCC;
border-bottom-color: #ffffff;
background-color: #ffffff;
}
.gsc-tabsArea {
border-color: #CCCCCC;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
border-color: #FFFFFF;
background-color: #FFFFFF;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
color: #1155CC;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
color: #1155CC;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
color: #1155CC;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
color: #1155CC;
}
.gsc-cursor-page {
color: #1155CC;
}
a.gsc-trailing-more-results:link {
color: #1155CC;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
color: #333333;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
color: #009933;
}
.gs-webResult div.gs-visibleUrl-short {
color: #009933;
}
.gs-webResult div.gs-visibleUrl-short {
display: none;
}
.gs-webResult div.gs-visibleUrl-long {
display: block;
}
.gs-promotion div.gs-visibleUrl-short {
display: none;
}
.gs-promotion div.gs-visibleUrl-long {
display: block;
}
.gsc-cursor-box {
border-color: #FFFFFF;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
border-color: #CCCCCC;
background-color: #FFFFFF;
color: #1155CC;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
border-color: #CCCCCC;
background-color: #ffffff;
color: #1155CC;
}
.gsc-webResult.gsc-result.gsc-promotion {
border-color: #F6F6F6;
background-color: #F6F6F6;
}
.gsc-completion-title {
color: #1155CC;
}
.gsc-completion-snippet {
color: #333333;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
color: #1155CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
color: #1155CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
color: #1155CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
color: #1155CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right * {
color: #333333;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
color: #009933;
}

[Simon_Echecopar]

Aqui una linea horizontal gradiente, no se si les sirva.

Código HTML:

.lineaHor2
{
background: -webkit-linear-gradient(orange, red);
background: -moz-linear-gradient(orange, red);
background: -o-linear-gradient(orange, red);
width: 70%;
height: 5px;
}