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.
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
0