Foros del Web » Creando para Internet » CSS »

Header para panel hecho en css.

Estas en el tema de Header para panel hecho en css. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/12/2014, 05:30
 
Fecha de Ingreso: diciembre-2014
Mensajes: 3
Antigüedad: 9 años, 3 meses
Puntos: 0
Header para panel hecho en css.

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.
  #2 (permalink)  
Antiguo 16/12/2014, 13:50
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Header para panel hecho en css.

Bienvenido al foro.

¿Cuál es el problema o la pregunta?
__________________
(:
  #3 (permalink)  
Antiguo 16/12/2014, 14:40
 
Fecha de Ingreso: diciembre-2014
Mensajes: 3
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Header para panel hecho en css.

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.
  #4 (permalink)  
Antiguo 17/12/2014, 03:08
 
Fecha de Ingreso: diciembre-2014
Mensajes: 3
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Header para panel hecho en css.

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> 

Etiquetas: header, hecho, panel
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:28.