DIV como ??

Reynier · #1 (**permalink**) 14/10/2005, 13:05

Hola a todos:
Pues dado que muchos me han recomendado que desarrolle mi web a base de DIV y ahora estoy incursionando en ello. Ya tengo claro como funcionan los mismos y he comenzado a cambiar el mal de las tablas a los DIV pero tengo varias dudas.
1) Como puedo poner dos DIV uno al lado de otro (lo que en una tabla seerían dos columnas)
2) Es mejor desarrollar todo el sitio con DIV o dentro de estos poner entonces las tablas?

Salu2

PD: A con los DIV solucione un problema que tenia al presentar el sitio en Firefox pues era que entre imagen e imagen me salia una linea blanca sin esta existir.

JavierB · #2 (**permalink**) 14/10/2005, 13:12

Hola Reyner

Te contesto a la primera pregunta:

<div style="float:left"></div>
<div></div>

Si poner varios <div> con la propiedad float:left irán quedando uno al lado del otro.

Saludos,

Reynier · #3 (**permalink**) 14/10/2005, 13:28

Hola JavierB:
He hecho esto pero no me ha funcionado:
style.css

Código PHP:

   #divContenido{ 
    margin-left: 2px; 
    margin-right: 2px; 
    margin-top: 2px; 
        margin-bottom: 2px; 
    font-style: normal; 
    font-weight: normal; 
    width: 760px; 
} 
 
#divContenidoIzq{ 
    float: left; 
} 
 
#divContenidoDer{ 
    float: right; 
} 
 
#divFecha{ 
    font-family: Tahoma; 
    font-size: 11px; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    color: #000000; 
    text-decoration: none; 
}

y en el código HTML esto otro:

Código PHP:

  <div id="divContenido"> 
  <div id="divContenidoDer"> 
    <a href="index.php"><img src="{#IMG_DIR#}grmnet_r1_c1.gif" class="cursor img align" border="0" /></a> 
  </div> 
  <div id="divContenidoIzq"> 
    <object type="application/x-shockwave-flash" data="{#IMG_DIR#}fla_1.swf" width="198" height="97"> 
        <param name="movie" value="{#IMG_DIR#}fla_1.swf" /> 
        <param name="Menu" value="0" /> 
        <param name="quality" value="high" /> 
    </object> 
  </div> 
  <div> 
    <a href="index.php"><img src="{#IMG_DIR#}grmnet_r2_c1.gif"  border="0" /></a><a href="historia.php"><img src="{#IMG_DIR#}grmnet_r2_c2.gif" alt="Historia de los Joven Club en la Provincia Granma" border="0" /></a><a href="objetivos.php"><img src="{#IMG_DIR#}grmnet_r2_c3.gif" alt="Objetivos que persiguen nuestras instalaciones en la Provincia" border="0" /></a><a href="eventos.php"><img src="{#IMG_DIR#}grmnet_r2_c4.gif" alt="Eventos que se llevan a cabo en nuestras instalaciones" border="0" /></a><a href="cursos.php?opt=mostrar&amp;cual=todos"><img src="{#IMG_DIR#}grmnet_r2_c6.gif" alt="Cursos que se imparten en nuestras instalaciones" border="0" /></a> 
    <div id=""> 
        {$smarty.now|date_format:"%d de %B de %Y"} 
    </div> 
  </div> 
</div>

pero no me funciona. Mira la imagen debajo.

Salu2

lizfranco · #4 (**permalink**) 14/10/2005, 15:30

Hola
Te sugiero que mires el foro de CSS. Hay muchos ejemplos.

1. dos columnas (un ejemplo):

estilos:

Código:

.content_box {
padding: 3px 3px 3px 3px;
margin-top: 0px;
text-align:left;
width:700px;
}

.contb_left {
width: 200px;
float: left;
}
	
.contb_right {
margin-left:205px;
font-size:16px;
padding: 5px;
}

Código HTML:

<body>
<div class="content_box">
	<div class="contb_left">Texto columna izquierda
		<ul><li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li></ul>
	</div>
	
	<div class="contb_right">
		rem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. 
		rem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. 
		rem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. 
		rem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. 
		rem ipsum dolor sit amet, consectetuer adipiscing elit, sed diamnonummy nibh euismod tincidunt ut laoreet dolore magna aliquam eratvolutpat. 
	</div>
</div>
</body>

Ejemplos tal ves mas claros:
http://www.tierradenomadas.com/tw003.phtml

2. Las tablas no deben usarse para dividir tu sitio web. Para eso estan los DIV. Con los DIV puedes usar propiedades similares que usarias con las tablas. Por ejemplo como el padding, o margin reemplazan lo que son en las tablas cellpadding y cellspacing. (mira en foro de CSS).
Cuando yo empece a trabajar con DIVs me recomendaron este articulo http://www.effectivetranslations.com...ything_es.html
Con eso entendi mejor por que no debia usar tablas para disenar mi pagina.

Reynier · #5 (**permalink**) 14/10/2005, 20:08

Como que no logro hacer las cosas bien o no se que pasa. Estoy tratando de maquetar el sitio usando DIV y CSS. Este es el código de la página HTML:

Código HTML:

{config_load file="portalgrm.conf" section="Portal"}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sp" lang="sp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Title" CONTENT="Portal de los Joven Club de Computación y Electrónica de Granma" />
<meta name="Author" CONTENT="Grupo de Desarrollo Joven Club de Computación y Electrónica Granma" />
<meta name="Description" CONTENT="La informatización de la sociedad cubana es una de los principales metas de la Revolución Cubana. Con la aparición de los Joven Club la sociedad se informatiza y se mantiene al corriente en lo que a teconolgías de la información y comunicaciones se refiere." />
<meta name="Keywords" CONTENT="joven club informatica cuba enseñanza granma revolucion programa revolucion cursos foros computacion electronica hardware software multimedia ftp descargas" />
<meta name="Copyright" CONTENT="Joven Club de Computación y Electronica Granma" />
<meta name="Language" CONTENT="Spanish" />
<meta name="REVISIT-AFTER" CONTENT="10" />
<meta name="Robots" CONTENT="Index" />
<title>{$title|default:#PORTAL_TITLE#}</title>
<link href="themes/css/csswithdiv.css" type="text/css" rel="stylesheet" />
</head>
    <body>
        <div style="float:left">
            <a href="index.php"><img src="{#IMG_DIR#}grmnet_r1_c1.gif" class="cursor img align" border="0" /></a>
        </div>
        <div>
            <object type="application/x-shockwave-flash" data="{#IMG_DIR#}fla_1.swf" width="198" height="97">
                <param name="movie" value="{#IMG_DIR#}fla_1.swf" />
                <param name="Menu" value="0" />
                <param name="quality" value="high" />
            </object>
        </div>
        <div style="float:left">
            <a href="index.php"><img src="{#IMG_DIR#}grmnet_r2_c1.gif"  border="0" /></a><a href="historia.php"><img src="{#IMG_DIR#}grmnet_r2_c2.gif" alt="Historia de los Joven Club en la Provincia Granma" border="0" /></a><a href="objetivos.php"><img src="{#IMG_DIR#}grmnet_r2_c3.gif" alt="Objetivos que persiguen nuestras instalaciones en la Provincia" border="0" /></a><a href="eventos.php"><img src="{#IMG_DIR#}grmnet_r2_c4.gif" alt="Eventos que se llevan a cabo en nuestras instalaciones" border="0" /></a><a href="cursos.php?opt=mostrar&amp;cual=todos"><img src="{#IMG_DIR#}grmnet_r2_c6.gif" alt="Cursos que se imparten en nuestras instalaciones" border="0" /></a>
        </div>        
        <div>
            <span class="divFecha">{$smarty.now|date_format:"%d de %B de %Y"}</span>
        </div>
        <div style="float:left">
            <a href="index.php"><img src="{#IMG_DIR#}grmnet_r3_c1.gif" border="0" /></a>
        </div>
    </body>
</html>

y este otro el código CSS:

Código HTML:

body{
	background:#FFFFFF;
	color:#000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding:0;
	scrollbar-3dlight-color:#F3F3EE;
	scrollbar-arrow-color:#4D6185;
	scrollbar-darkshadow-color:#EAE8E1;
	scrollbar-face-color:#C3D3FD;
	scrollbar-highlight-color:#FCFCFC;
	scrollbar-shadow-color:#EAE8E1;
	scrollbar-track-color:#F3F3EE;
}

a:link,a:active,a:visited{color:#006699; text-decoration:none; font-size: 11px;}
a:hover{color:#dd6900}

#divContenido{
   
	position:absolute; 
	top:2%; 
	left:50%; 
	width:760px; 
	margin-left:2px; 
	margin-top:2px;
}

#divContenidoIzq{
	float: left;
}

#divContenidoDer{
	float: right;
}

#divFecha{
	float: right;
	font-family: Tahoma;
	font-size: 11px;
	color: #000000;
}

pero me da algunos problemas. Por ejemplo el SPAN con clase divFecha no me aplica ese estilo y no logro centrar el contenido de la web.

Salu2

juanchilo · #6 (**permalink**) 14/10/2005, 21:28

el metodo fundamental es el que aplica en el css nuestro amigo lizfranco:

Cita:

.content_box {
padding: 3px 3px 3px 3px;
margin-top: 0px;
text-align:left;
width:700px;
}

.contb_left {
width: 200px;
float: left;
}

.contb_right {
margin-left:205px;
font-size:16px;
padding: 5px;
}

Es decir, la primera columna (.contb_left) ordenarla con float:left; y luego la segunda columna (.contb_right) aplicarle el margin-left: con un valor poco mayor al del ancho de la primer columna (osea mayor al width: 200px;); el cual lo vemos aqui: margin-left:205px;.

un saludo y espero que sume mi comentario...

salu2