Foros del Web » Creando para Internet » CSS »

Ayuda con diseño con DIVs y CSS

Estas en el tema de Ayuda con diseño con DIVs y CSS en el foro de CSS en Foros del Web. Hola gente del foro. Antes comienzo con decirles que soy programador y que en el diseño estoy algo virgen. He hecho algunos diseños con tablas ...
  #1 (permalink)  
Antiguo 13/08/2009, 18:07
Avatar de anjovi4  
Fecha de Ingreso: diciembre-2005
Mensajes: 37
Antigüedad: 12 años
Puntos: 0
Ayuda con diseño con DIVs y CSS

Hola gente del foro. Antes comienzo con decirles que soy programador y que en el diseño estoy algo virgen. He hecho algunos diseños con tablas pero ahora quiero aprender esto de diseñar en DIVs.
Bueno al grano. Tengo una pagina con la siguiente estructura:
- Cabecera
- Lado Izquierdo
- Lado Centro
- Lado Derecho
- Pie

Me sale bien pero el problema es que si el contenido de [Lado Centro] es menor al de [Lado Izquierdo] o [Lado Derecho], estos se quedan por encima de [Lado Pie].
No se si me entienden pero aqui les dejo el codigo para que lo revisen.

Este es el codigo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Maquetaci&oacute;n con DIVs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p{font:11px Verdana, Arial, Helvetica, sans-serif; color:#586885; line-height:120%;}
hr{display:none;}
h1{font:25px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#666666; margin:0px;}
h2{font:bold 20px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#486895; text-transform:capitalize;}
h3{font:18px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#666666;}
h4{font:bold 15px Verdana, Arial, Helvetica, sans-serif; text-align:left; color:#666666;}
h5{font:10px Verdana, Arial, Helvetica, sans-serif; text-align:center; text-transform:uppercase; margin:5px auto; ; color:#666666;}
a{font-size:12px; color:#325FA0;}
a:link{text-decoration:none;}
a:visited{text-decoration:none; color:#325FA0;}
a:hover{text-decoration:none; color:#000066;}
a:active{text-decoration:none; color:#0099CC;}
body{margin:0;background-color: #FFFFFF; text-align:center; line-height:10px;}
#contenedor{width:777px; height:auto; background-color: #DDE6AC; border-width:1px; border-style:solid; border-color:#000000; margin:0 auto; text-align:left;}
.cabecera{width:777px; height:140px; background-color:#CC9933; border-bottom-style:solid; border-bottom-color:#000000; margin:0 0 10px 0;}
.izquierda{width:100px; height:auto; background-color:#EFEFEF; border-style:solid; border-width:1px; border-color:#000000; margin:0 0 0 5px; float:left; padding:3px;}
.izquierda ul{font:11px Verdana, Arial, Helvetica, sans-serif; color:#586885; text-transform:capitalize;}
.izquierda ul li{margin:0 0 0 -20px; line-height:160%;}
.derecha{width:150px; height:auto; background-color:#FFFFDD; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 0; float:right; padding:5px; text-align:justify;}
.principal{width:465px; height:auto; background-color:#FFFFFF; border-style:solid; border-width:1px; border-color:#000000; margin:0 5px 0 118px; padding:10px;}
.pie{width:auto; height:30px; background-color:#FFFFFF; border-style:solid; border-width:1px; border-color:#000000; margin:5px;}
.pie h6{text-align:center; text-transform:uppercase; margin:5px auto; color:#666666; font:bold 10px Verdana, Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
  <div id="contenedor">
    <div class="cabecera">
	  <h1>WEB 2.0</h1>
    </div>
    <div class="izquierda">
      <h4>Categorías</h4>
      <ul>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>

        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>

        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
        <li>Vinculo</li>
      </ul>

    </div>
    <div class="derecha">
      <h3>1º Noticia</h3>
      <p>Aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p>
      <h3>2º Noticia</h3>
      <p>Aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p>
      <h3>3º Noticia</h3>

      <p>Aquí se podría colocar una imágen, anuncios, más vínculos, las típicas imagenes de Sindicar RSS, odio a neo_jp, etc...</p>
    </div>
    <div class="principal">
      <h2>Título del contenido</h2>
      <h3>1º Sub apartado</h3>
      <p>Escribo algo para rellenar...</p>
      <p>Escribo algo para rellenar...</p>
      <h3>2º Sub apartado</h3>
      <h4>Otra seccion más pequeña</h4>
      <p>Escribo algo para rellenar...</p>
      <p>Escribo algo para rellenar...</p>
    </div>
    <div class="pie">
      <h5>Pie de pagina de la web. Todo el C_C reservado</h5>
    </div>
  </div>
</body>
</html> 
Quisiera saber si estoy haciendolo bien. Otra pregunta que tambien queria realizarles es que si existe alguna diferencia importante entre indicar un estilo con class o id.

Bueno de antemano las gracias.
  #2 (permalink)  
Antiguo 13/08/2009, 20:35
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 6 meses
Puntos: 44
Respuesta: Ayuda con diseño con DIVs y CSS

Hola anjovi4

Seguro, seguro que este ejemplo de nuestro querido Mikmoro te puede ayudar mucho para ajustar tu diseño:

Enlace

Bye
  #3 (permalink)  
Antiguo 14/08/2009, 06:39
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda con diseño con DIVs y CSS

Hola Anjovi4, eso se suele conocer como columnas equilibradas o falsas columnas
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 17/08/2009, 22:31
Avatar de anjovi4  
Fecha de Ingreso: diciembre-2005
Mensajes: 37
Antigüedad: 12 años
Puntos: 0
Respuesta: Ayuda con diseño con DIVs y CSS

Gracias deirdre y kseso?. Ahora lo pruebo y les escribo como me va.
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 09:46.