Crear columnas con etiquetas divs

claudiomacromediat1 · #1 (**permalink**) 23/10/2012, 21:47

Buenas amigos, Hice alguna que otra pagina usando divs pero el formato era muy comun, o sea creaba un div llamado "principal", y dentro de este mismo, el div para un baner, otro para la botonera, otro para el contenido y por ultimo el pie de pagina.

les muestro el codigo por si no se entendio:

Código HTML:

<body>
<div id="principal">
  <div id="banner">Colocar aquí el contenido para  id "banner"</div>
  <div id="botonera">Colocar aquí el contenido para  id "botonera"</div>
  <div id="contenido">Colocar aquí el contenido para  id "contenido"</div>
  <div id="pie de pagina">Colocar aquí el contenido para  id "pie de pagina"</div>
</div>
</body>

El problema esta en que me gustaría hacer columnas usando etiquetas divs y no se como.

El diseño seria un banner (encabezado) debajo de este banner dividir en 3 partes, lado izquiero, centro, lado derecho y por ultimo lo que seria el pie de pagina.

Si alguien me ayuda muchas gracias!

C2am · #2 (**permalink**) 24/10/2012, 00:45

Hola
¿Y el código css?
EL Manual salvador: www.librosweb.es, busca el de Introducción a CSS, y luego sigue con el resto.

En principio podrías aplicarle la propiedad css "float" o "display:inline-block"
Busca maquetar columnas div con css en San Google, te encontrarás con miles de ejemplos.
Pero siempre es bueno comenzar leyendo la teoría y luego la práctica.

Prueba, experimenta, y muestra lo que has hecho y entonces recibirás más ayuda en donde te quedes atascado.

Saludos

claudiomacromediat1 · #3 (**permalink**) 24/10/2012, 10:42

Gracias por contestarme C2am. ya anteriormente busque como me lo recomendastes y encontre un ejemplo como lo que andaba buscando,
pero cuando copio el codigo y lo inserto en Dreamweaver lo pruebo en el navegador y no se me visualiza el banner. El tutorial esta en la pagina remsr.com/articulos/css-trescol.php. Como podria solucionar este tema? gracias!

Lo estoy probando con internet explorer no porque a mi me guste, pero hay much agente q lo sigue usando y la verdad quiero q me funcione tmb en este explorador.

y el codigo:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 3 columas</title>
<style type="text/css">
body,html{
margin:0;
padding:0;
width:100%;
height-:100%;
background: url(../imagenes/blog/cabeza.jpg) repeat left top;
}

#container{
position:relative;
left:0;
top:0;
width:900px;
min-height:700px;
background:#000;
margin:0 auto;
overflow:hidden;
}

*html #container{
height-:700px;
overflow:visible;
}

#header{
position:relative;
left:0;
top:0;
width:896px;
height-:96px;
background: url(../imagenes/blog/blk5.png) repeat left top;
overflow:hidden;
border: 2px solid #fff;
}

#content{
position:relative;
left:0;
top:0;
width:100%;
min-height:500px;
overflow:hidden;
background:steelblue;
}

*html #content{
height-:500px;
overflow:visible;
}

#col1{
position:relative;
left:0;
top:0;
width:297px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk2.png) repeat left top;
border: 2px solid #fff;
border-right: 1px solid #fff;
}

#col2{
position:relative;
left:0;
top:0;
width:298px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk4.png) repeat left top;
border: 2px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}

#col3{
position:relative;
left:0;
top:0;
width:297px;
min-height:496px;
overflow:hidden;
float:left;
background: url(../imagenes/blog/blk2.png) repeat left top;
border: 2px solid #fff;
border-left: 1px solid #fff;
}

#footer{
position:relative;
left:0;
top:0;
width:896px;
height-:96px;
background: url(../imagenes/blog/blk5.png) repeat left top;
overflow:hidden;
border: 2px solid #fff;
}

</style>
</head>

<body>
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="col1">
</div>
<div id="col2">
</div>
<div id="col3">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>

flashmax · #4 (**permalink**) 24/10/2012, 10:59

Hola ya que utilizas DW por que no usas la pantilla que trae.
En la version cs6 trae varias como por ejemplo:
3 columnas fijas ,encabeza y pie

claudiomacromediat1 · #5 (**permalink**) 24/10/2012, 13:41

Gracias Flashmax por tu respuesta, es que preferiria diseñarlo yo mismo

Pude ordenar el lado izquierdo y el centro, Pero el lado derecho no me queda en su lugar, Dreamweaver me lo ubica abajo de todo y no se como ubicarlo aca el codigo si me pueden decir como lograr poner ese div id= "derecha" en su respondiente lugar ( o sea a la derecha).

Les muestro lo que hice:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#principal {
	height: 750px;
	width: 900px;
	margin:0 auto;
}
#principal #banner {
	height: 150px;
	width: 900px;
	background-color: #CCC;
}
#principal #botonera {
	height: 30px;
	width: 900px;
	background-color: #999;
}
#principal #izquierda {
	background-color: #F90;
	float: left;
	width: 200px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	height: 570px;
}
#principal #centro {
	float: left;
	width: 500px;
	background-color: #FC0;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	height: 570px;
}
#principal #derecha {
	float: left;
	background-color: #FF0;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	width: 200px;
	height: 570px;
}
.limpiar{
	clear:both;
}
</style>
</head>

<body>
<div id="principal">
  <div id="banner">Colocar "banner"</div>
  <div id="botonera">Colocar aquí"botonera"</div>
  <div id="izquierda">"izquierda"</div>
  <div id="centro">CONTENIDO TEXTO, IMAGEN ETC..</div>
  <div id="derecha">
    <p>derecha"d  </p>
  </div>
  <div class="limpiar"></div>
  </div>
</body>
</html>

fodsite · #6 (**permalink**) 24/10/2012, 15:12

El lado derecho no queda en su lugar porque el ancho sobrepasa el contenedor principal. Si reduces la capa del centro a 440px queda todo en su lugar.

Como recomendación quizás sería interesante que pudieras maquetar el sitio con etiquetas html5 (footer, aside, header, etc).

Saludos.

claudiomacromediat1 · #7 (**permalink**) 24/10/2012, 15:48

Gracias Fodsite dio resultado! no me habia dado cuenta de ese detalle del tamaño!
voy a averiguar lo que me sugeris de etiquetas hmtl 5. Toy saliendo un poco de lo que es el diseño de tablas por eso estoy con eso de los divs te agradezco!

flashmax · #8 (**permalink**) 24/10/2012, 18:35

Hola son los padding los que te desalinean los div si sumas los padding al tamaño del principal se soluciona

claudiomacromediat1 · #9 (**permalink**) 24/10/2012, 18:39

Al probar la web con Dreamweaver CS6 me sale un cartel que dice lo siguiente:

Cita:

Adobe Flash Player ha detenido uan operacion que no podria ser segura.

La siguiente aplicacion local de su equipo o red:

C:/Users/documentes/etc.../expressInstall.swf

esta intentando comunicarse con esta ubicacion apta para internet:

fpdownload.macromedia.com

para permitir que esta aplicacion se comunique con internet, haga click en configuracion.
despues de cambiar la configuracion debe reiniciar la aplicacion.

Sera por haber puesto contenido flash en el banner y botonera? le doy a configuracion pero de todas formas no me visualiza la botonera que esta hecha con flash.

Como hacer para que se me visualice el contenido Flash sin problema?

Les dejo el codigo de lo que hice:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor {
	background-color: #CCC;
	border: solid;0.5pt #333;
	width: 900px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 3pt;
	padding-right: 3pt;
	padding-bottom: 3pt;
	padding-left: 3pt;
}

#izquierda { background-color: #F90
	         padding: 3pt 3pt;
	float: left;
	width: 200px;
	background-color: #F90;
	text-align: center;
	height: 570px;
}
			
#centro { background-color: #FC0
	      padding: 3pt 3pt;
	float: left;
	width: 500px;
	text-align: left;
	height: 570px;
 }
			
#derecha { background-color: #FF0
	      padding: 3pt 3pt;
	float: left;
	width: 200px;
	background-color: #FC0;
	text-align: center;
	height: 570px;
}
#banner {
	width: 900px;
	background-color: #0C9;
	height: 212px;
}
#botonera {
	background-color: #FF0;
	height: 35px;
	width: 900px;
}

.limpiar{
	clear:both;
}
#piedepagina { background-color: #FF0

}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>
<div id="contenedor">
<div id="banner">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="212" id="FlashID" title="banner">
    <param name="movie" value="animaciones/banner.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="6.0.65.0" />
    <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="animaciones/banner.swf" width="900" height="212">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
      <div>
        <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>
<div id="botonera">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="900" height="35" id="FlashID2" title="menu">
    <param name="movie" value="animaciones/botonera.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="15.0.0.0" />
    <!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior que descarguen la versión más reciente de Flash Player. Elimínela si no desea que los usuarios vean el mensaje. -->
    <param name="expressinstall" value="Scripts/expressInstall.swf" />
    <!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a IE mediante IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="animaciones/botonera.swf" width="900" height="35">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="15.0.0.0" />
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      <!-- El navegador muestra el siguiente contenido alternativo para usuarios con Flash Player 6.0 o versiones anteriores. -->
      <div>
        <h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
</div>
<div id="izquierda">
  <p>Esto va a la izquierda </p>
  <p>Esto va a la izquierda</p>
  <p>Esto va a la izquierda</p>
  <p>Esto va a la izquierda</p>
</div>
<div id="centro">
  <blockquote>
    <p>Esto va al centro </p>
  </blockquote>
</div>
<div id="derecha">
  <p>Esto va la derecha</p>
  <p>Esto va la derecha</p>
  <p>Esto va la derecha</p>
  <p>Esto va la derecha</p>
</div>
<div class="limpiar"></div>
<div id="piedepagina">Pie de pagina</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
</script>
</body>
</html>