CSS - problema con cabecera y margin css

   
Vista:

problema con cabecera y margin css

Publicado por luis (1 intervención) el 18/10/2011 23:03:50
Saludos, estoy empezando con css y mi problema es el siguiente:

Lo que yo quiero hacer es crear una cabecera dentro de la cual en una posicion determinada deseo escribir el titulo(estoy intentando colocar el titulo en la parte izquierda casi pegado, y a una distancia de 20 pixeles del borde superior de la cabecera).

Sucede que no se como ubicar el texto del titulo en la posicion que deseo. Para escribir el titulo tengo una caja titulo dentro de la cabecera, y dentro de esta utilizo <h3> para el texto, y quiero que la caja del titulo baje esos 20 pixeles respecto a la caja de la cabecera. Pero cuando intento asignarle un margin top de 20px al h3 o a la caja titulo, el margin no se aplica al h3 respecto a la caja titulo, o la caja titulo respecto a la caja cabecera, sino que se aplican ambos siempre respecto al borde superior de la pagina web completa y esto me mueve a la caja cabecera de su posicion original(a esta caja no la quiero mover). Quisiera saber como poner esta caja relativa respecto a su padre.

Aqui dejo el codigo que es muy simple:

ejemplo.html:

<html>
<head>
<title>Ejemplo</title>
<link rel="stylesheet" href="css/estiloPrincipal.css" type="text/css"/>
</head>
<body >
<div id="contenedor">
<div id="cabecera">
<div id="titulo">
<h3>Este es mi titulo</h3>
<h3>Con 2 lineas</h3>
</div>
</div>
</div>
</body>
</html>

estiloPrincipal.css:

root {
display: block;
}

html, body{
height: 100%;
margin: 0;
padding: 0;
}

body{
text-align: center;
}

#contenedor{
margin-left:auto;
margin-right:auto;/*alto tambien auto puede ser si no lo defino yo*/
margin-bottom: auto;
text-align: left;
}

#cabecera{
height: 150px;
background-color: green;
border-bottom: 1px solid black;
}

#cabecera h3{
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: black;
text-align: left;
margin-top: 10px;
margin-left: 20px;
}

#cabecera #titulo{
margin-top: 10px;
text-align: left;
background-color: aqua;
width: 400px;
height: 100px;
}

Quiero poder mover la caja titulo y la caja h3 respecto a su padre para poder ubicarla en la posicion deseada y escribir el titulo donde yo deseo, y que si aplico un margin top al alguna de ellas, el margin mueva a estas cajas, pero que la caja padre cabecera no se vea afectada por el margin.

Espero que se haya entendido. Gracias de antemano.
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 con cabecera y margin css

Publicado por Ronny (1 intervención) el 20/10/2011 20:03:01
Coloca los encabezados dentro de un contenedor, con ello controlas la posición, ejemplo

1
2
3
4
5
6
<div class="cabecera">
    <div class="titulos">
          <h3>Texto</h3>
          <p>Titulo</p>
    </div>
<div>


con esta estructura controlas el ancho de h3 y p, los cuales por default son del 100% y float:left;. Ahora, para el tema del margen en la cabecera, puedes controlarlo por medio de padding. Ejemplo:

1
2
3
.cabecera {width:940px; padding:10px;}
.titulos {width:300px; float:left;}
h3, p {width:100%; float:left;}


es una idea, espero sea de utilidad. Saludos.

pki
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