Ver Mensaje Individual
  #12 (permalink)  
Antiguo 01/11/2004, 19:28
Avatar de orochies
orochies
 
Fecha de Ingreso: septiembre-2003
Ubicación: Guatemala
Mensajes: 260
Antigüedad: 20 años, 7 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