2011-01-12 36 views
16

Estoy creando un divisor vertical, que funciona bien. Pero el CSS es engorroso.Divisor vertical CSS

El CSS es:

.headerDivider1 { 
border-left:1px solid #38546d;height:80px;position:absolute;right:250px;top:10px; 
} 

.headerDivider2 { 
border-left:1px solid #16222c;height:80px;position:absolute;right:249px;top:10px; 
} 

El HTML es:

<div class="headerDivider1"></div><div class="headerDivider2"></div> 

El resultado es:

alt text

¿Cómo podría poner en orden el código HTML y CSS para arriba?

Respuesta

46
.headerDivider { 
    border-left:1px solid #38546d; 
    border-right:1px solid #16222c; 
    height:80px; 
    position:absolute; 
    right:249px; 
    top:10px; 
} 

<div class="headerDivider"></div> 
+0

@amosrivera perfecta gracias – 422

+0

Sé que se supone que debes evitar comentarios, pero gracias 'gracias' para esto! – Justin

3
<div class="headerdivider"></div> 

y

.headerdivider { 
    border-left: 1px solid #38546d; 
    background: #16222c; 
    width: 1px; 
    height: 80px; 
    position: absolute; 
    right: 250px; 
    top: 10px; 
} 
+0

gracias, sin embargo, prefiero @amosrivera versión – 422

Cuestiones relacionadas