Foro sobre hojas de estilo CSS
DIV-Alinear texto vertical y horizontal
Volver al foro |
Responder |
Añadir nuevo tema
De: RalphFecha: 04/06/2013
Mensaje:Buenas noches.
Intento maquetar una web usando DIV. La parte superior tiene 3 DIV: izquierdo, derecho y centro. El centro tiene el ancho definido para el área que tendrá el contenido de la página web.Los DIV izquierdo y derecho son los espacios que están fuera.
El DIV central de la parte superior lo he dividido en 3 DIV, centro1 para el logotipo, centro2 para el nombre de la empresa y centro3 para otros datos.
Es en este DIV centro3 que cuando intento alinearlo verticalmente al centro y horizontalmente a la derecha, los textos de desplazan hacia abajo de tal forma que salen del espacio definido para la parte superior.
He notado que cuando quito la propiedad line-height del DIV que contiene toda la parte superior (codrops-top), el texto que intento alinear queda de la forma que quiero que queda, pero el problema es que el color de fondo que rellena toda la parte superior casi desaparece.
Os voy a colocar el código htm y el css para que una mejor visualización.
*Html*
<div class="container">
<!-- Inicio Barra superior -->
<div class="codrops-top">
<div class="codrops-topizquierdo"> </div>
<div class="codrops-topcentro">
<div class="codrops-top-centro1"><img src="images/logo.png">
</div>
<div class="codrops-top-centro2">
<div class="codrops-top-centro-top"><h1>Empresa</h1>
</div>
<div class="codrops-top-centro-bottom"><h2>Clínica/h2>
</div>
<div class="codrops-top-centro3">
<div class="codrops-top-centro-top1">
CC Carrefour
Planta 1ª
</div>
<div class="codrops-top-centro-top1">
Nº Telf.
</div>
<div class="codrops-top-centro-bottom1">
[email protected]
</div>
</div>
</div>
<div class="codrops-topderecho"> </div>
</div>
<!-- Fin Barra Superior -->
<!-- Inicio Barra Inferior -->
<div class="codrops-topinferior"> </div>
<!-- Fin Barra Inferior -->
</div> <!-- Fin clase contenedora -->
*CSS*
body{
font-family: 'Tahoma','Open Sans Condensed','Arial Narrow', serif;
background: #ddd url(../images/fondo1aclarado.jpg) no-repeat; background-position:center;
font-weight: 400;
font-size: 12px;
color: #333;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
overflow: hidden;
margin: 0;}
.container{
width: 100%;
position: relative;
height: 100%;
top: 0px;
bottom: 0px;
margin: auto;
}
.codrops-top{
position: relative;
margin: auto;
line-height: 100px;
background: rgba(255, 192, 0, 0.6);
z-index: 9999;
box-shadow: 5px 3px 2px rgba(0,0,0,0.2);
}
.codrops-topizquierdo{
background: inherit;
float: left;
width: 10%;
}
.codrops-topcentro{
background: inherit; /*hereda propiedades div contenedor codrops-top*/
float: left;
width: 80%;
vertical-align: top;
}
.codrops-topderecho{
background: inherit; /*hereda propiedades de div contenedor codrops-top*/
float: left;
}
.codrops-topinferior{
line-height: 0px;
z-index: 9999;
box-shadow: 0 8px 3px -5px rgba(0,0,0,0.2);
border-radius: 0px;
}
.codrops-top-centro1{
float: left;
width: 10%;
text-align: left;
margin-bottom: 0px;
line-height: 0; /*Borra espacio extra debajo que genera colocar imagen*/
}
.codrops-top-centro2{
float: left;
width: 45%;
text-align: center;
margin: 0 auto;
line-height: 0;
}
.codrops-top-centro3{
float: right;
width: 45%;
text-align: right;
margin:0;
}
.codrops-top-centro-top{
height:30px;
float: left;
clear: both;
vertical-align: middle;
}
.codrops-top-centro-bottom{
height:30px;
float: left;
clear: both;
text-align: center;
margin: 0;
padding: 0;
}
.codrops-top-centro-top > h1{
font-family: Lucida Handwriting;
font-size: 30px;
line-height: 40px;
margin-left: 200;
position: relative;
font-weight: 100;
text-align: center;
color: #00b050;
text-shadow: 1.5px 1.5px 1.5px rgba(255,255,255,1);
}
.codrops-top-centro-bottom > h2{
font-family: Papyrus;
font-size: 20px;
line-height: 40px;
margin-left: 200;
position: relative;
font-weight: 100;
text-align: center;
top: 0;
color: #000;
text-shadow: 1.5px 1.5px 1.5px rgba(255,255,255,1);
}
Alguna sugerencia para solucionar este problemilla?
Muchas Gracias.
Saludos.
Volver al foro |
Responder |
Añadir nuevo temaQuiz�s le interese:
WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.
Si te solucion� el problema pulsa en G+1
Gracias!
