Duda básica

jose_serrano · #1 (**permalink**) 03/12/2007, 11:34

Hola, primero me presento, es la primera vez que escribo en este foro y me llamo Jose.

He empezado hace bien poco con CSS por mi cuenta. Antes había tocado cositas ya hechas, con blogger y wordpress, pero comprendereis que entiendo lo básico.

Ahora estoy metido en un proyecto personal para crearme una web básica, html y css nada más, para poner enlaces a mis trabajos y a webs interesantes. Y nada más empezar, problemas. Estoy leyendo un manual de librosweb, pero no encuentro la solución a mi duda.

Mi duda es la siguiente:

Quiero que la página se quede centrada, he diseñado una imagen para el fondo bastante grande, con el hueco para el contenido de la web en medio. Ahora quiero meter una imagen que he hecho y cuando cambio el tamaño de la ventana del navegador, la imagen baila de lado a lado. Quiero simplemente saber cómo situar el contenido siempre en el centro de la web, tenga el usuario la resolución que tenga. Os dejo un ejemplo externo, ya que lo que hay de mi web aun no está colgado: http://www.ndesign-studio.com/ La imagen de fondo de colores que hay en esa web sería la imagen que yo ya he colocado centrada. Y, pongamos que todo el contenido de esa página sea la otra imagen que quiero dejar siempre en su sitio con respecto al fondo.

He probado poniéndole un margen izquierdo con porcentaje y ya digo, la imagen baila al no ir en concordancia con el fondo.

Un saludo y gracias por adelantado. No será mi último mensaje aquí seguro

atoleon · #2 (**permalink**) 03/12/2007, 12:50

lo mejor que pudes hacer es crear un box (div) contenedor el cual esté centrado en la web y luego todo lo metes ahí dentro. de esa manera siempre mantendrás ese contendero y todo su contenido centrado en la web.

ve a google y escribe "maquetación web css sin tablas" y te saldrán un montón de manuales en el que explican como maquetar una web y podrás ver como se centra una web.

P.D. Hasta que no lleve 30 mensajes no puedo escribir urls. si no te daba un par de direcciones con manuales muy buenos.

Ziongem · #3 (**permalink**) 03/12/2007, 16:14

Buenas, como estás?

No sé si entendí bien tu problema, pero aquí vamos:

1) Para poner el contenido centrado poné un div contenedor con un ancho con valores con porcentaje (si querés que se adapte a las diferentes resoluciones), y ponele margin:0 auto, para que se centre horizontalmente.

2) Lo de la imágen que decías podés ponerla como background del div y ponerle posición fija, así escrollea con el navegador.

Un saludo,

Zg

javiereguiluz · #4 (**permalink**) 11/12/2007, 05:27

Hola Jose, en el manual que dices que estás utilizando viene la respuesta a lo que quieres hacer.

Centrar una página en la ventana del navegador (independientemente de la resolución de pantalla y del tamaño de la ventana):

La solución consiste en encerrar los contenidos en un elemento <div> contenedor y asignarle unos márgenes laterales automáticos:

Código HTML:

#contenedor {
  width: 300px;
  margin: 0 auto;
}
 
<body>
  <div id="contenedor">
    <h1>Lorem ipsum dolor sit amet</h1>
    ...
  </div>
</body>

La solución anterior la puedes ver en http://www.librosweb.es/css/capitulo12/estilos_basicos.html