Posicionamiento de elementos CSS y revision

rubencontrerasc7 · #1 (**permalink**) 07/01/2012, 10:11

Buenas,

estoy haciendo un curso de HTML y CSS y me ha surgido un problema y no consigo resolverlo. Me gustaria poner el menu que hecho con photoshop (header) centrado respecto a la resolución de pantalla. ¿Como podria solucionarlo?

Código:

<style type="text/css">
body{
background-color: #750000;
background-image: url(images/background.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 50% 0%;
}
header img{
	position:absolute;
	top:0%;
}
#acessDiv {
	position:absolute;
	width:330px;
	height:14px;
	z-index:2;
	left: 440px;
	top: 198px;
}
#wrapper {
width: 100%;
text-align: center;
margin-top: 10px;
}
#container {
width: 750px;
margin-left:auto;
margin-right:auto;
} 
</style>
</head>

<body>
<div id="wrapper">
		<div id="container">
<header>
  <div id="acessDiv">
    <input name="user" type="user" id="user" placeholder="Número de socio">
    <input name="pass" type="password" id="pass" maxlength="8" placeholder="Contraseña">
  </div>
  <img src="images/header.png" name="headernav" width="1000" height="342" border="0" usemap="#headernavMap" id="headernav"> <nav>
<map name="headernavMap">
  <area shape="rect" coords="254,218,304,247" href="#">
  <area shape="rect" coords="327,219,403,248" href="#">
  <area shape="rect" coords="425,221,489,247" href="#">
  <area shape="rect" coords="515,220,639,246" href="#">
  <area shape="rect" coords="663,220,748,247" href="#">
  <area shape="rect" coords="663,174,740,197" href="#">
  <area shape="rect" coords="827,104,871,145" href="#">
  <area shape="rect" coords="878,104,919,144" href="#">
  <area shape="rect" coords="928,103,970,145" href="#">
</map> 
</nav>
</header>
        <section>  
</section>  

<footer>  
        <!-- Footer -->  
    </footer>
    </div> 
    	</div>
</body>

C2am · #2 (**permalink**) 07/01/2012, 10:25

Hola
El problema es que el header está con posicionamiento absoluto, pero su padre no tiene declarado el posicionamiento, en consecuencia dicho posicionamiento absoluto se realiza con respecto a la pantalla y no al container.

Solo debes declarar el position a container.

Ya que estás estudiando aquí un muy buen Manual

PD: en lo posible trata de usar mucho el position:absolute. Por ejemplo en este caso no es necesario.

rubencontrerasc7 · #3 (**permalink**) 07/01/2012, 10:42

Cita:

Iniciado por C2am

Hola
El problema es que el header está con posicionamiento absoluto, pero su padre no tiene declarado el posicionamiento, en consecuencia dicho posicionamiento absoluto se realiza con respecto a la pantalla y no al container.

Solo debes declarar el position a container.

Ya que estás estudiando aquí un muy buen [URL="http://www.librosweb.es/css/capitulo5/posicionamiento_absoluto.html"]Manual[/URL]

PD: en lo posible trata de usar mucho el position:absolute. Por ejemplo en este caso no es necesario.

Muchas gracias, ya he conseguio solucionar muchas dudas.
Echaré un vistazo al manual.

C2am · #4 (**permalink**) 07/01/2012, 10:49

Bárbaro, me alegro que hayas solucionado el problema.

Aclaración de P.D: PD: en lo posible trata de NO usar mucho el position:absolute. Por ejemplo en este caso no es necesario.
Aclaro porque daba la impresión de decir todo lo contrario, jajaja. Saludos

rubencontrerasc7 · #5 (**permalink**) 07/01/2012, 11:44

Cita:

Iniciado por C2am

Bárbaro, me alegro que hayas solucionado el problema.

Aclaración de P.D: PD: en lo posible trata de NO usar mucho el position:absolute. Por ejemplo en este caso no es necesario.
Aclaro porque daba la impresión de decir todo lo contrario, jajaja. Saludos

Jaja, si... me pareció un poco extraño la verdad.