Header para panel hecho en css.

bjorkman · #1 (**permalink**) 16/12/2014, 05:30

Buenas gente, necesito ayuda para estructurar una ventana con css, acá adjunto una muestra, está compuesta por 4 imágenes y dos textos.
Desde ya muchas gracias.

pzin · #2 (**permalink**) 16/12/2014, 13:50

Bienvenido al foro.

¿Cuál es el problema o la pregunta?

bjorkman · #3 (**permalink**) 16/12/2014, 14:40

Gracias Pzin, me lo recomendó un amigo y veo que hay de todo. Perdón por mi manera desprolija de postear mi primer thread.
La pregunta problemática es que tengo que crear un header para una panel pequeño en html usando css. Y no sé como armarlo, si con tablas o columnas de bootstrap. He hecho en ambos sistemas pero no se cual sería mejor, más efectivo. Y el otro problema es que tengo problema para alinear las imágenes. No se si con floats, position-relative. Me estoy comiendo un poco la cabeza. Ahora no tengo en este ordenador los html con los estilos.
Desde ya muchas gracias. Y felicitaciones a todos por esta comunidad.

bjorkman · #4 (**permalink**) 17/12/2014, 03:08

Lo que tengo es esto, soy nuevo en el tema. Necesito que me guíen para purificar o corregir esto. Gracias nuevamente

Código HTML:

<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
   
<style>
.panel--std {
	margin: 4px;
	padding: 6px;
	width: 623px;
	min-width:623px;
	height: 500px;
	border: 1px solid #d4d4d4;
	border-radius: 5pt;
	background: #f7f7f7;
	-webkit-user-select: none;
	cursor: default;
	-webkit-box-shadow: 0 0 4px 2px #001365;
}

.img--calendar {
	background-repeat: no-repeat;
	width: 28px;
	height: 28px;
	background-image: url(img/calendar.png);
	display:inline-block;
	vertical-align:top;
}


.titulos {
	list-style-type: none;
	display:inline-block;
	padding:0px;
	font:Verdana, Geneva, sans-serif;
	color:#001365;
	
}

.titulo1 {
	font-weight: bold;
	font-size: 14px;
	line-height: 1;
}

.titulo2 {
	font-size: 12px;
	line-height: 1;	
}

.img--doctor {
	background-repeat: no-repeat;
	width: 58px;
	height: 54px;
	background-image: url(img/medic.png);
	display:inline-block;
	vertical-align:top;
}
.btn--max__pan {
	background-repeat: no-repeat;
	width: 9px;
	height: 9px;
	background-image: url(img/btn--stats/bt_max_n.png);
	display:inline-block;
	vertical-align:top;
	margin-left:10px;
}
.btn--max__pan:hover {
	background-image: url(img/btn--stats/bt_max_h.png);	
}

.btn--cerrar__pan {
	background-repeat: no-repeat;
	width: 11px;
	height: 9px;
	background-image: url(img/btn--stats/bt_exit_n.png);
	display:inline-block;
	vertical-align:top;
	margin-left:3px;
}
.btn--cerrar__pan:hover {
	background-image: url(img/btn--stats/bt_exit_h.png);	
}

.alinear--derecha {
	 float:right;
}

.sinpadding [class*="col-"] {
    padding: 0;
}

</style>
</head>
<body>
	<div class="panel--std">
		<div class="container-fluid sinpadding">
            <div class="row">
                <div class="col-xs-8">
                    <div class="img--calendar"></div>
                    <ul class="titulos">
                        <li><div class="titulo1">Dr. Francesc Pujol</div></li>
                        <li><div class="titulo2">MEDICINA INTERNA</div></li>
                    </ul>
                </div>
                <div class="col-xs-4">	
                    <div class="alinear--derecha">
                        <div class="img--doctor"></div>  
                        <div class="btn--max__pan"></div>
                        <div class="btn--cerrar__pan"></div>
                   </div>
                      
                </div>
            </div>
		</div>    	    
  	</div>
</body>
</html>