Foros del Web - Centrar web horizontal con 3 columnas y encabezado

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Centrar web horizontal con 3 columnas y encabezado (http://www.forosdelweb.com/f53/centrar-web-horizontal-con-3-columnas-encabezado-241376/)

Centrar web horizontal con 3 columnas y encabezado

Hola pues la verdad ya estoy al borde de la desesperacion ya que me estoy quebrando la cabeza desde hace muchos dias queriendo centrar my web en diferentes exploradores y en diferentes resoluciones pero la verdad no logro nada de nada...

Lo que pasa es que quiero my web solo con div y pues la verdad me esta costando mucho con el estilo que le quiero dar pues no logro lo que me propongo por ahora...

si alguien desea ayudarme les paso los codigos:

Este es my codigo html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>orochies web</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<LINK REL="StyleSheet" HREF="dj_style.css" type="text/css">
</head>

<body>

<div id="header">

</div>


<div id="izquierda">

</div>

<div id="central">

</div>

<div id="derecha">

</div>

</div>

<div id="pie">

</body>
</html>

Y este my codigo css:

body {
background-color: Blue;
padding: 0px;
margin: 20px;
font: normal normal normal 12px/normal "Times New Roman", Times, serif;
}

div#header {
width: 724px;
height: 100px;
border: 1px solid black;
background: white;
}

#izquierda {
width: 144px;
height: 300px;
border: 1px solid #0C2D83;
background-color: #CED3E5;
}

#central {
width: 432px;
height: 300px;
border: 1px solid #0C2D83;
background-color: White;
}

#derecha {
width: 144px;
height: 300px;
border: 1px solid #0C2D83;
background-color: #CED3E5;
}

div#pie {
width: 724px;
height: 100px;
border: 1px solid #0C2D83;
background: white;
}

El diseño del sitio que quiero lograr es el de la imagen un simple pero complicado encabezado mas abajo tres columnas en linea y abajo de estas el pie de pagina tal como podran ver en la imagen...

http://www.iespana.es/yquemasda/orochies.gif

Y pues la verdad no puedo lograr que todo esto me quede centrado eh usado float: left; para las columnas y se me han alineado perfectamente pero no me deja centrarlo en la pantalla...

Espero vuestra ayuda gracias...

Cambia los pixels por porcentajes, así se logra lo que tu buscas, chécate mi página pa que veas el ejemplo, y cambia la resolución de tu pc para que veas que aún así la página sigue estable, porque los width de la CSS están en porcentajes, si quieres avisame y te paso el código de mi css, ya que no es complicado, sino laborioso.

Saludos

Hola gracias por responder me eh fijado en tu web y la veo muy bien como tu dices que usaste porcentages pero my problema es que my web siempre tiene que estar centrada y solo ocupa 730px de ancho de pantalla y no el 100% como la tuya y esto es lo que no logro eh probado de varias maneras pero nada...

Espero que alguien me ayude a encontrarle solucion a my problema...

_Saludos...

Espera un momento, no veo el atributo LEFT de la css, también esa puede ir en porcentaje, recuerda que también tienes RIGHT.

Saludos

y al poner: left y right no me afectaria el ancho de my web?

Segun la resolucion porque eh probado solo poniendo left: 150px; y al cambiar la resolucion de pantalla a 800x600 me tira toda la pagina hacia la derecha sacando la barra de scroll horizontal...

Lo mismo me paso poniendo en porcentages pero en menor proporcion...

_Saludos y gracias por responder...

no, left y right te sirven para posicionar la capa, por ejemplo:

#capa {
left: 1%;
right: 1%;
width: 98%;
}

esto te daría, sea cual sea la resolución, 1% a la izquierda, 1% a la derecha y 98% de ancho, aunque :pensando: pensandolo bien, no sé si CSS permite usar left y right ^^ pero intentalo.

Saludos

Mira tengo esto para posicionar solo el encabesado:

div#header {
width: 724px;
height: 100px;
position: absolute;
top: 20px;
left: 150px;
}

Pero como os contaba al cambiar resolucion me lo tira asi la derecha y se ve muy mal y creo que al usar porcentages me cambiaria el ancho de my #header ¿no crees?...

_Saludos...

pues sí... te cambiaría el ancho...

Mientras no pruebes pues no creo que avances mucho, si no resulta, creo que vas a tener que recurrir a las odiosas tablas ñ_ñ

Tu crees que si hago estos cambios:

div#header {
width: 74%;
height: 25%;
position: absolute;
top: 5%;
left: 13%;
right: 13%;
}

A la hora de trabajar las demas medidas en pixeles se va aver afectada la web por las capas en porcentage...

por ejemplo my banner que va en el encabesado que tiene 369x83 pixeles cabra en el head con las medidas posicionadas en porcentage a la hora de verlas en 800x600 de pantalla me imagino que sera un quebradero de cabeza pero bueno hare la lucha gracias por tu ayuda...

_Saludos...

así es, no puedes (no debes) mezclar px con porcentajes, y los height no tienes que ponerlos en porcentajes, ya que el contenido del height se irá acomodando automáticamente.

Saludos

Por fin logre crear web con tres columnas!!!

Valla que si me tomo un buen rato pero por fin logre hacer lo que queria se trata de hacer un modelo de pagina con encabezado, tres columnas centrales y un pie de pagina...

Pero bueno de tanto luchar y luchar valla que lo logre os pongo el codigo por si a alguien le interesa...

Este es el codigo HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>web centrada con encabezado, tres columnas y pie de pagina</title>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<LINK REL="StyleSheet" HREF="columnas.css" type="text/css">
</head>

<body>
<div id="contenedor">

<div id="header">

</div>

<div id="izquierda">

</div>

<div id="central">

</div>

<div id="derecha">

</div>

<div id="pie">

</div>
</div>
</body>
</html>

Y este es el codio CSS:

#contenedor {
width: 700px;
height: 600px;
margin-left: auto;
margin-right: auto;
border: none;
}

#header {
width: 100%px;
height: 100px;
border: none;
background-color: red;
}

#izquierda {
width: 120px;
height: 350px;
border: none;
background-color: yellow;
float: left;
}

#central {
width: 460px;
height: 350px;
border: none;
background-color: black;
float: left;
}

#derecha {
width: 120px;
height: 350px;
border: none;
background-color: yellow;
float: left;
}

#pie {
width: 100%;
height: 100px;
border: none;
background-color: red;
clear: left;
}

Figense muy bien que nombre tiene vinculado a la hoja de estilo jejejeje...

Pues como podran observar este modelo siempre os aparesera centrado no importando la resolucion que os tengan (Al menos en 800x600 y 1024x768) siempre se vera bien...

Claro que si os gustaria con bordes tienen que disminuirle al ancho de las columnas laterales para que la suma os de los 700px que tiene el div #contenedor, sino la columna derecha se posicionara por debajo de la columna izquierda...

Bueno pues si tiene alguna duda pues no dejen de preguntarme o si algo a salido mal...

_Saludos...