CSS - problema margin y altura relativa css

   
Vista:

problema margin y altura relativa css

Publicado por Juan (1 intervención) el 21/10/2011 01:43:01
Lo que quiero hacer es colocar un borde personalizado a una caja en css, tomare como ejemplo al borde izquierdo, entonces este borde tendra la altura de la caja para que la ocupe toda(uso una pequeña imagen que se repetira por todo el alto), y utilizo el height: 100% para esta actividad ya que mi caja tendra altura variable dependiendo del contenido.

El problema es que quiero que el borde tenga un margin, que no pinte el 100% sino que lo haga a partir del pixel 7. Lo que sucede es que si le pongo este margin y el height 100% entonces el borde se correra 7 pixeles en el lado opuesto.

Que puedo hacer para colocarle un margin-top de 7 pixeles y que lo demas ocupe el resto del tamaño de la caja, si la caja sera de altura variable??

Espero que alguien me pueda ayuda. Saludos y gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

problema margin y altura relativa css

Publicado por DerangexMX (39 intervenciones) el 30/10/2011 00:16:05
Puedes controlarlo por medio de tres div's. Un hace las veces de contenedor, el segundo de borde personalizado con los atributos que mencionas y el tercero con el contenido. Ejemplo:

1
2
3
4
5
6
7
8
9
<style>
.contenedor {width:150px; float:left; background:#eee; min-height:300px;}
.encabezado {width:100%; float:left; height:10px;background:#ccc; margin:7px 0 0 0;}
.contenido {width:100%; float:left; background:#fff; margin:0; min-height:300px;}
</style>
<div class="contenedor">
	<div class="encabezado"></div>
	<div class="contenido">contenido</div>
</div>


Espero te sea de utilidad. Saludos.

ssl | pki | certificado de seguridad | certificado digital | cfdi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar