Foros del Web » Creando para Internet » HTML »

DIV como ??

Estas en el tema de DIV como ?? en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/10/2005, 13:05
Avatar de Reynier  
Fecha de Ingreso: noviembre-2002
Ubicación: Por ahí en algún sitio
Mensajes: 1.844
Antigüedad: 22 años
Puntos: 1
DIV como ??

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.
__________________
Ing. Reynier Pérez Mira
  #2 (permalink)  
Antiguo 14/10/2005, 13:12
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
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,
  #3 (permalink)  
Antiguo 14/10/2005, 13:28
Avatar de Reynier  
Fecha de Ingreso: noviembre-2002
Ubicación: Por ahí en algún sitio
Mensajes: 1.844
Antigüedad: 22 años
Puntos: 1
Pues no ...

Hola JavierB:
He hecho esto pero no me ha funcionado:
style.css
Código PHP:
 #divContenido{
    
margin-left2px;
    
margin-right2px;
    
margin-top2px;
        
margin-bottom2px;
    
font-stylenormal;
    
font-weightnormal;
    
width760px;
}

#divContenidoIzq{
    
floatleft;
}

#divContenidoDer{
    
floatright;
}

#divFecha{
    
font-familyTahoma;
    
font-size11px;
    
font-stylenormal;
    
font-weightnormal;
    
font-variantnormal;
    
color#000000;
    
text-decorationnone;

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
__________________
Ing. Reynier Pérez Mira
  #4 (permalink)  
Antiguo 14/10/2005, 15:30
 
Fecha de Ingreso: abril-2003
Mensajes: 150
Antigüedad: 21 años, 7 meses
Puntos: 1
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.
  #5 (permalink)  
Antiguo 14/10/2005, 20:08
Avatar de Reynier  
Fecha de Ingreso: noviembre-2002
Ubicación: Por ahí en algún sitio
Mensajes: 1.844
Antigüedad: 22 años
Puntos: 1
Pues ...

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
__________________
Ing. Reynier Pérez Mira
  #6 (permalink)  
Antiguo 14/10/2005, 21:28
 
Fecha de Ingreso: marzo-2004
Ubicación: Córdoba
Mensajes: 239
Antigüedad: 20 años, 8 meses
Puntos: 0
algo mas

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
__________________
Un gran desarrollador de soluciones webs -
-----------------------------
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 06:05.