Ayuda con un problema que debe ser muy sencillo
4 seguidores
Hola.
Estoy creando una web cuyo esbozo de index podéis ver aquí: http://mare-ingenieria.es/temporales/tren/index.html
Tengo todas las capas anidadas dentro de una principal que es el cuerpo. QUiero que esa capa y su contenido aparezca siempre centrado en cualquier ordenador.
He conseguido centrar el cuerpo con unas líneas de código que me pasaron, pero no se me centra su contenido a pesar de ser capas anidadas.
Necesito solucionar este problema que debe ser una tontería, seguro, cuanto antes para poder seguir con la web que es bastante urgente. ¿Alguien me puede ayudar?
Mil gracias.
Cloudstudio
Hola, centrar algo es muy sencillo, le das un width : X y añades : margin: 0 auto;
En tu caso quita todos los position absolute que le has puesto a la web.
Y al div cuerpo le añades un margin: 0 auto;
Con eso se centrara, pero ya te digo que esta todo muy muy chungo.
JCMartinez
El problema es que estas posicionando todos los elementos con absolute, por eso para centrar el contenido con margin:0 auto; vas a tener que eliminar todo eso y probablemente volver a maquetarlo usando el flujo normal y algún float.
Como consejo te diré que aprendas a posicionar usando primero el posicionamiento por defecto (static), luego floats, relative y por último absolute. Normalmente con static y floats no tendrás muchos problemas para posicionar.
Dale un vistazo a este tuto. http://www.oloblogger.com/2010/06/aprende-posicionamiento-css-en-10-pasos.html
roselopez
MUchas gracias a ambos, no me importa empezarla de nuevo porque llevo poco. Es lo que tiene en estos berengenales sin saber, a ver si me pongo las pilas a base de cursos.
roselopez
Perdonad mi ignorancia pero vuelvo a preguntar:
He conenzado de nuevo, he creado un div con vuestras instrucciones y efectivamente sale centrado. Pero cuando creo otros divs dentro de este no consigo que aparezcan superpuestos, sino que se me colocan en la parte más alta de la página.
¿Qué puedo hacer?
Cloudstudio
Errede
Hola Errede, te acabo de hacer en 2 min un código de ejemplo, para que veas como posicionar los divs.
Copialo y pegalo en tu editor y miras mas o menos como flotar los divs.
<style>
.contenedor{
width: 980px;
margin: 0 auto;
}
.header{
background-color: red;
height: 200px;
width: 100%;
}
.logo{
float: left;
width: 45%;
height: 150px;
background-color: blue;
margin: 20px;
}
.menu{
float: right;
width: 45%;
height: 150px;
background-color: blue;
margin: 20px;
}
.contenido{
background-color: yellow;
height: 300px;
}
.left{
float: left;
width: 45%;
background-color: green;
margin: 20px;
height: 150px;
}
.right{
float: right;
width: 45%;
background-color: green;
margin: 20px;
height: 150px;
}
</style>
<div class="contenedor">
<div class="header">
<div class="logo"></div>
<div class="menu"></div>
</div>
<div class="contenido">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
roselopez
MUchísimas gracias, Cloud, lo probaré
roselopez
Sólo una cosa más y no doy más la lata.
Gracias a este código he visto como colocar los divs para que se mantengan en su posición, pero en cuando introduzco una imagen dentro de ellos se va todo al traste.
He estado experimentando con el código pero no lo consigo. Con lo fácil que eran las capas en posición absoluta con el dreamweaver. Ay.
¿Cómo soluciono la cuestión?
De nuevo gracias a todos por la atención.
Cloudstudio
No tiene ningun setido lo de la imagen, pon el codigo para que lo vea.
roselopez
HOla de nuevo.
MIra, te adjunto el código de lo que llevo hecho, es muy simple, sólo dos divs y verás como se me descoloca aunque he seguido tus instrucciones. Me aparece arriba el cuerpo y debajo el logo, no superpuesto.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
<style type="text/css">
body {
background-image: url();
}
#cuerpo {
visibility:visible;
margin: 0 auto;
left:585px; top:12px;
width:860px;
height:1158px;
z-index:1;
}
#logo{
float: left;
width: 118;
height: 106px;
margin: 20px;
}
</style>
</head>
<body>
<div id="cuerpo" class="cuerpo"><img src="images/cuerpo.gif" width="860" height="1158" />
<div id="logo" class="logo"><img src="images/cabecera/logo.gif" width="118" height="106" /></div>
</div>
</div>
</body>
</html>
Rolan Gonzalez
El DIV cuerpo lo has cerrado dos veces, por lo que estás cerrando un DIV inexistente. Los estilos no se deben colocar en el html, tienen que ir en un archivo css externos, mas que nada para poder reutilizar estilos. El estilo cuerpo lo tienes posicionado con left top, elimina esa linea y si quieres poner el logo encima del cuerpo pon el cuerpo.gif como background-image del DIV cuerpo para que no esté en el flow, luego podrás colocar el logo manejando el margin-top y el margin-left.
Pero vamos, esto es un arreglo concreto pero creo que antes de seguir adelante deberías practicar lo básico de html y css, si no según vaya complicándose la página se irá complicando hasta tal punto que la página sea indominable y tendrás que empezar de 0 de nuevo.
Haz este curso que te sirve para lo básico (necesitas saber inglés)
http://www.codecademy.com/es/tracks/web