Foros del Web » Creando para Internet » CSS »

Centrar web horizontal con 3 columnas y encabezado

Estas en el tema de Centrar web horizontal con 3 columnas y encabezado en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/10/2004, 19:38
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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>
<!-- cabezera del documento -->
<div id="header">

</div>

<!-- col izquierda -->
<div id="izquierda">

</div>
<!-- panel central -->
<div id="central">

</div>
<!-- col derecha -->
<div id="derecha">

</div>

</div>
<!-- Pie de pagina -->
<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...



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...
__________________
QMD...
  #2 (permalink)  
Antiguo 23/10/2004, 20:24
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #3 (permalink)  
Antiguo 25/10/2004, 18:24
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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...
__________________
QMD...
  #4 (permalink)  
Antiguo 25/10/2004, 18:39
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #5 (permalink)  
Antiguo 25/10/2004, 18:46
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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...
__________________
QMD...
  #6 (permalink)  
Antiguo 25/10/2004, 18:49
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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 pensandolo bien, no sé si CSS permite usar left y right ^^ pero intentalo.

Saludos
  #7 (permalink)  
Antiguo 25/10/2004, 18:54
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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...
__________________
QMD...
  #8 (permalink)  
Antiguo 25/10/2004, 18:59
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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 ñ_ñ
  #9 (permalink)  
Antiguo 25/10/2004, 19:05
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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...
__________________
QMD...
  #10 (permalink)  
Antiguo 25/10/2004, 19:11
Avatar de jesusbet
(Desactivado)
 
Fecha de Ingreso: mayo-2004
Ubicación: Monterrey, MX
Mensajes: 2.667
Antigüedad: 13 años, 7 meses
Puntos: 2
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
  #11 (permalink)  
Antiguo 26/10/2004, 05:19
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
http://www.webproducer.at/flexible-layout/
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #12 (permalink)  
Antiguo 01/11/2004, 19:28
Avatar de orochies  
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 259
Antigüedad: 14 años, 2 meses
Puntos: 2
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">
<!-- Encabezado -->
<div id="header">

</div>
<!-- Columna izquierda -->
<div id="izquierda">

</div>
<!-- Columna Central -->
<div id="central">

</div>
<!-- Columna derecha -->
<div id="derecha">

</div>
<!-- Pie de Pagina -->
<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...
__________________
QMD...

Última edición por orochies; 01/11/2004 a las 19:30
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:26.