Div contenedor en un td

gVenom · #1 (**permalink**) 08/12/2008, 14:25

Saludos,

Es posible meter un div contenedor en un td de una tabla?

Estoy tratando de liberarme poco a poco de las tablas, y actualmente tengo una página que estoy tratando (conejillo de indias, jeje) de utilizar otras herramientas que no sean solo el uso de tablas. Actualmente tengo algo así:

Código PHP:

  <?php    include ("header.php");?>
        
    <tr>
        <td colspan="28">
            <img src="http://www.forosdelweb.com/images/about_52.jpg" width="850" height="641" alt=""></td>
        <td>
            <img src="http://www.forosdelweb.com/images/spacer.gif" width="1" height="641" alt=""></td>
    </tr>
<?php    include ("footer.php");?>

Esto era una tabla completa, que partí en 3 partes, el header con el menu, footer con el cierre de la página, y el centro que es el que va cambiar siempre. La diseñe así especificamente para tratar de usar los "div" en ese espacio de el centro que como pueden ver, es una imágen con su alto y ancho para todo el centro

Código HTML:

<img src="http://www.forosdelweb.com/images/about_52.jpg" width="850" height="641" alt=""

Esta imágen del todo la quito y pongo el fondo negro, o la pongo de fondo y le pongo lo demás encima. Lo que pasa es que intente poner un div contenedor dentro del td, donde van a ir los demas div con texto y fotos que el cliente quiere ahí, pero cuando trate de hacerlo, el header se fue abajo encima del footer y el div quedo arriba, porque? Obviamente algo hice mal. Asi quedo ese código:

Código PHP:

  <?php include ("header.php");?>
<th>
<td>

<div id="contenedor" style="background:URL(images/about_52.jpg)">    </div>
</td>
</th>
<?php include ("footer.php");?>

De paso aqui les dejo el link donde esta la página con el efecto que quiero lograr
http://www.napacrush.org/furaha.php

Esa esta hecha a puras tablas

willyfc · #2 (**permalink**) 08/12/2008, 15:11

hola, no estoy seguro si esto es lo que quieres pero checkalo:

Código HTML:

<div style=" width:800px; height:100px; margin:0 auto; background-color:#333333"></div>
<div style="width:800px; height:auto; margin:0 auto">
<table width="800">
	<tr>
	  <td>
	  	<div style="width:800px; height:auto; display:table;">
			<img src="imagenes/autos/dfm1-1.jpg" width="276" height="184" style="float:left; padding:20px" />
			lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
		lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor </div>
	  </td>
	</tr>
</table>
</div>
<div style="width:800px; height:80px;margin:0 auto; background-color:#666666;"></div>

Avisas, y si no es pon algo del código que utilizas para poner el header y el footer

gVenom · #3 (**permalink**) 08/12/2008, 15:28

Hola , gracias por responder.

Pues algo asi es lo que busco, pero sin usar tablas dentro, eso es lo que estoy tratando de evitar para aprender a usar los div. Arriba sale como va mi header, lo incluyo con código php al igual que el footer, de todas formas te los voy a poner por aqui para que los veas. Hasta el momento llevo la página asi(aunque solo puse texto mientras):

Código PHP:

  <?php    include ("header.php");?> 
         
    <tr> 
        <td colspan="28" style="background:URL(images/about_52.jpg)"  width="850"> 
        <div id="scroll" >  
        <br /> 
        <div id="divtitulo1" class="h1">BIOGRAPHY, QUALIFICATIONS AND DUTIES OF THE OFFICERS 
Of CRUSH INC.</div> 
 
 
<div id="divtitulo2left" class="h4">PRESIDENT:</div> 
 
    <p class="style2">Deedee Urbano, President, CRUSH INC. is currently working in the facilities engineering industry as a Project Administrator for Winzler and Kelly and has been there for two years.  Her background is a combination of project administration and management as well as computer drafting in the architectural and engineering fields and management for architectural and construction firms.  She also has experience as a business owner and manager of an interior design and architectural drafting firm.  She was born and raised in Napa and has worked for the past five years with the Napa Coats for Kids program as the Assistant Director and has experience with several fundraising events and charity programs and organizations.</p>     
     
<div class="style1">SECRETARY:</div> 
 
<p class="style2">Ray Urbano, Secretary, CRUSH INC. is a Police Officer for the City of Napa, CA. and has served this community for nine years. He has served on the Board of Directors of the First Baptist Church for a term of three years, one of which he served as moderator.  He is the Founder and Director of the Napa Coats for Kids charity program.  He has been a member of the Napa Elks Lodge #832 for over two years.  He has experience with several fund raising events and charities in the Napa community.</p>     
    </div> 
        </td> 
         
<?php    include ("footer.php");?>

gVenom · #4 (**permalink**) 08/12/2008, 15:28

el header:

Código PHP:

  <!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> 
<title>Crush INC - Furaha Community Center</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<meta name="author" content="gVenom" /> 
<meta name="subject" content="Charity, generosity, protect" /> 
<meta name="Description" content="Furaha Community Center is in the Huruma slums outside of the metropolis of Nairobi, Kenya. The center provides care and education for the children of Huruma as well as one daily meal with the new feeding program to help them through their school days.  /> 
<meta name="Geography" content="1068 Johnston Street, Napa CA." /> 
<meta name="Language" content="English" /> 
<meta http-equiv="Expires" content="never" /> 
<meta name="Revisit-After" content="21 days" /> 
<meta name="distribution" content="Global" /> 
<meta name="Robots" content="INDEX,FOLLOW" /> 
<meta name="country" content="U.S.A." /> 
<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> 
<script type="text/javascript" src="js/lightbox.js"></script> 
<link rel="stylesheet" href="css/styles.css" type="text/css" /> 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 
</head> 
<body bgcolor="#FFFFFF"> 
<table id="Header" width="851" border="0" cellpadding="0" cellspacing="0" align="center"> 
    <tr> 
        <td rowspan="21"> 
            <img src="images/about_01.jpg" width="25" height="234" alt="" /></td> 
        <td colspan="26"> 
            <img src="images/about_02.jpg" width="797" height="13" alt="" /></td> 
        <td rowspan="21"> 
            <img src="images/about_03.jpg" width="28" height="234" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="13" alt="" /></td> 
    </tr> 
    <tr> 
        <td rowspan="20"> 
            <img src="images/about_04.jpg" width="4" height="221" alt="" /></td> 
        <td colspan="6" rowspan="3"> 
            <img src="images/about_05.jpg" width="248" height="58" alt="" /></td> 
        <td colspan="8"> 
            <img src="images/about_06.jpg" width="287" height="18" alt="" /></td> 
        <td colspan="10" rowspan="3"> 
            <img src="images/about_07.jpg" width="256" height="58" alt="" /></td> 
        <td rowspan="20"> 
            <img src="images/about_08.jpg" width="2" height="221" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="18" alt="" /></td> 
    </tr> 
    <tr> 
        <td rowspan="2"> 
            <img src="images/about_09.jpg" width="38" height="40" alt="" /></td> 
        <td> 
            <img src="images/about_10.jpg" width="38" height="31" alt="" /></td> 
        <td> 
            <img src="images/about_11.jpg" width="30" height="31" alt="" /></td> 
        <td colspan="2"> 
            <img src="images/about_12.jpg" width="60" height="31" alt="" /></td> 
        <td colspan="3" rowspan="2"> 
            <img src="images/about_13.jpg" width="121" height="40" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="31" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="4"> 
            <img src="images/about_14.jpg" width="128" height="9" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="9" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="3" rowspan="2"> 
            <img src="images/about_15.jpg" width="217" height="24" alt="" /></td> 
        <td rowspan="17"> 
            <img src="images/about_16.jpg" width="9" height="163" alt="" /></td> 
        <td rowspan="19"> 
            <img src="images/about_17.gif" width="3" height="203" alt="" /></td> 
        <td colspan="8" rowspan="19"> 
            <img src="images/about_18.jpg" width="304" height="203" alt="" /></td> 
        <td rowspan="19"> 
            <img src="images/about_19.gif" width="2" height="203" alt="" /></td> 
        <td colspan="9"> 
            <img src="images/about_20.jpg" width="252" height="2" alt="" /></td> 
        <td rowspan="17"> 
            <img src="images/about_21.gif" width="4" height="163" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="2" alt="" /></td> 
    </tr> 
    <tr> 
        <td rowspan="16"> 
            <img src="images/about_22.jpg" width="4" height="161" alt="" /></td> 
        <td colspan="6" rowspan="2"> 
            <img src="images/about_23.gif" width="156" height="23" alt="" /></td> 
        <td rowspan="6"> 
            <img src="images/about_24.jpg" width="5" height="76" alt="" /></td> 
        <td rowspan="6"> 
            <img src="images/about_25.jpg" width="87" height="76" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="22" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="3" rowspan="2"> 
            <img src="images/about_26.jpg" width="217" height="25" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="6" rowspan="2"> 
            <img src="images/about_27.jpg" width="156" height="36" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="24" alt="" /></td> 
    </tr> 
    <tr> 
        <td rowspan="13"> 
            <img src="images/about_28.jpg" width="1" height="114" alt="" /></td> 
        <td colspan="2" rowspan="4"> 
            <img src="images/about_29.jpg" width="216" height="30" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="12" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="2" rowspan="2"> 
            <img src="images/about_30.jpg" width="26" height="17" alt="" /></td> 
        <td colspan="3"> 
            <img src="images/about_31.gif" width="75" height="8" alt="" /></td> 
        <td rowspan="2"> 
            <img src="images/about_32.jpg" width="55" height="17" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="8" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="3"> 
            <img src="images/about_33.jpg" width="75" height="9" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="9" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="8" rowspan="2"> 
            <img src="images/about_34.gif" width="248" height="5" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="2" rowspan="2"> 
            <img src="images/about_35.jpg" width="216" height="26" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="4" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="6" rowspan="2"> 
            <img src="images/about_36.gif" width="156" height="23" alt="" /></td> 
        <td rowspan="6"> 
            <img src="images/about_37.jpg" width="5" height="76" alt="" /></td> 
        <td rowspan="6"> 
            <img src="images/about_38.gif" width="87" height="76" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="22" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="2" rowspan="2"> 
            <img src="images/about_39.jpg" width="216" height="28" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="1" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="6" rowspan="2"> 
            <img src="images/about_40.jpg" width="156" height="40" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="27" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="2" rowspan="4"> 
            <img src="images/about_41.jpg" width="216" height="28" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="13" alt="" /></td> 
    </tr> 
    <tr> 
        <td rowspan="2"> 
            <img src="images/about_42.jpg" width="23" height="13" alt="" /></td> 
        <td colspan="3"> 
            <img src="images/about_43.jpg" width="74" height="11" alt="" /></td> 
        <td colspan="2" rowspan="2"> 
            <img src="images/about_44.jpg" width="59" height="13" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="11" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="3"> 
            <img src="images/about_45.jpg" width="74" height="2" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="2" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="8" rowspan="2"> 
            <img src="images/about_46.gif" width="248" height="4" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="2" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="2"> 
            <img src="images/about_47.jpg" width="216" height="2" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="2" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="6"> 
            <img src="images/about_48.gif" width="255" height="6" alt="" /></td> 
        <td colspan="12"> 
            <img src="images/about_49.jpg" width="286" height="6" alt="" /></td> 
        <td> 
            <img src="images/spacer.gif" width="1" height="6" alt="" /></td> 
    </tr> 
    <tr> 
        <td colspan="6"> 
            <img src="images/about_50.jpg" width="255" height="34" alt="" /></td> 
        <td colspan="12"> 
            <img src="images/about_51.jpg" width="286" height="34" alt="" /></td> 
            </tr>

gVenom · #5 (**permalink**) 08/12/2008, 15:29

La hoja CSS:

Código HTML:

@charset "iso-8859-1";
/* CSS Document */
.h1{ /*Titulos blancos grandes*/
	color:#FFFFFF;
	font-family:Tahoma;
	font-size:16px;
	text-align:center;
	font-weight:bold;
}.h4{ /*titulos amarillos*/
	color:#FFFF00;
	font-family:Tahoma;
	text-align:center;
	font-size:14px;
	font-weight:bold;
}
.style2{ /*texto normal*/
	color:#FFFFFF;
	font-family:Tahoma;
	font-size:12px;
	text-align:justify;
	padding: 0px 2px 5px 2px;
}
#divtitulo1{
	text-align:center;
}
#divtitulo2left{
	text-align:left;
}
#scroll { 
	width:100%; 
	height:640px; 
	background-color:#000000; 
	overflow:auto; 
}

willyfc · #6 (**permalink**) 09/12/2008, 08:18

según veo esa web que pusiste de referencia yo lo haría de esta manera:

Esto le aumente al CSS para lograr el un efecto como el que vez en esa web lo demás esta igual

Código:

.imgs_chicas{background-color: #666666;float:left;margin-left:5px;}
.img_grande{background-color: #666666; margin:10px; float:left}

llene una tabla para que veas como sería(solo para ejemplo).

Código HTML:

<table style="width:100%">
<tr>
	<td style="width:100%; height:100px; background-color:#333333; color:#FFFFFF">
			AQUI VA EL HEADER
	</td>
</tr>
<tr> 
        <td colspan="28" style="background:URL(images/about_52.jpg)"  width="850"> 
        <div id="scroll" >  
        <br /> 
        <div id="divtitulo1" class="h1">BIOGRAPHY, QUALIFICATIONS AND DUTIES OF THE OFFICERS 
Of CRUSH INC.</div> 


<div id="divtitulo2left" class="h4">PRESIDENT:</div> 
<img name="prueba" src="" width="400" height="400" alt="Imagen de prueba" class="img_grande" />
    <p class="style2">Deedee Urbano, President, CRUSH INC. is currently working in the facilities engineering industry as a Project Administrator for Winzler and Kelly and has been there for two years.  Her background is a combination of project administration and management as well as computer drafting in the architectural and engineering fields and management for architectural and construction firms.  She also has experience as a business owner and manager of an interior design and architectural drafting firm.  She was born and raised in Napa and has worked for the past five years with the Napa Coats for Kids program as the Assistant Director and has experience with several fundraising events and charity programs and organizations.</p>     
     
<div class="style1">SECRETARY:</div> 

<p class="style2">Ray Urbano, Secretary, CRUSH INC. is a Police Officer for the City of Napa, CA. and has served this community for nine years. He has served on the Board of Directors of the First Baptist Church for a term of three years, one of which he served as moderator.  He is the Founder and Director of the Napa Coats for Kids charity program.  He has been a member of the Napa Elks Lodge #832 for over two years.  He has experience with several fund raising events and charities in the Napa community.</p> 
<img name="prueba1" src="" width="100" height="100" alt="Imagen 1" class="imgs_chicas" />    
<img name="prueba2" src="" width="100" height="100" alt="Imagen 2" class="imgs_chicas" />    
<img name="prueba3" src="" width="100" height="100" alt="Imagen 3" class="imgs_chicas" />    
    </div> 
	
        </td> 
		</tr>
<tr>
	<td style="width:100%; height:100px; background-color:#333333; color:#FFFFFF">
		AQUI VA EL FOOTER
	</td>
</tr>
		</table>

Copialo y pegalo en tu editor asi como esta para si es ese el efecto por que al menos a mi así como esta no se me deforma
Espero te sirva

gVenom · #7 (**permalink**) 09/12/2008, 09:26

Hey, exactamente eso es lo que quiero, y pude ver que prácticamente las dos lineas de CSS son las que hacen el trabajo. El float left le indica a los elementos que se posicionen en el espacio a la iz de el elemento anterior cierto? Imagino que si no tiene espacio o no cabe, se pasa a la siguiente linea. El margin 10px, le indica un margen a todos los lados?obviamente el margin-left solo a la izquierda cierto'

willyfc · #8 (**permalink**) 09/12/2008, 09:49

que bueno que te sirva

el margin, padding, border si los escribes de esa manera y le das un valor lo aplicara a los 4 lados, ahora para ahorrar lineas de código puedes ponerlo así

Código:

  top     right  bottom   left
margin:15px  10px  5px        20px;

y la otra pregunta es no, se ven así por que el texto no es mas largo ahora si quieres que todas las imagenes se coloquen debajo de las otras cuando sobrepase el tamaño tendrías que poner un contenedor y dos columnas de esta manera:

Código:

#scroll { 
	width:100%; 
	height:640px; 
	background-color:#000000; 
	overflow:auto;
	display:table;
}
#col_izquierda{ width:420px; height:auto; float:left}
#col_derecha{ width:550px; height:auto; float:right;}
.imgs_chicas{background-color: #666666;float:left;margin:0 0 5px 5px;}
.img_grande{background-color: #666666; margin:10px; float:left}

Código HTML:

<table style="width:100%">
<tr>
	<td style="width:100%; height:100px; background-color:#333333; color:#FFFFFF">
			AQUI VA EL HEADER
	</td>
</tr>
<tr> 
        <td colspan="28" style="background:URL(images/about_52.jpg)"  width="850"> 
        <div id="scroll" >  
        <br /> 
        <div id="divtitulo1" class="h1">BIOGRAPHY, QUALIFICATIONS AND DUTIES OF THE OFFICERS 
Of CRUSH INC.</div> 


<div id="divtitulo2left" class="h4">PRESIDENT:</div> 
<div id="col_izquierda">
<img name="prueba" src="" width="400" height="400" alt="Imagen de prueba" class="img_grande" />
</div>
<div id="col_derecha">
    <p class="style2">Deedee Urbano, President, CRUSH INC. is currently working in the facilities engineering industry as a Project Administrator for Winzler and Kelly and has been there for two years.  Her background is a combination of project administration and management as well as computer drafting in the architectural and engineering fields and management for architectural and construction firms.  She also has experience as a business owner and manager of an interior design and architectural drafting firm.  She was born and raised in Napa and has worked for the past five years with the Napa Coats for Kids program as the Assistant Director and has experience with several fundraising events and charity programs and organizations.</p>     
     
<div class="style1">SECRETARY:</div> 

<p class="style2">Ray Urbano, Secretary, CRUSH INC. is a Police Officer for the City of Napa, CA. and has served this community for nine years. He has served on the Board of Directors of the First Baptist Church for a term of three years, one of which he served as moderator.  He is the Founder and Director of the Napa Coats for Kids charity program.  He has been a member of the Napa Elks Lodge #832 for over two years.  He has experience with several fund raising events and charities in the Napa community.</p>
<p class="style2">asdf sdfas df</p>
<p class="style2">asdf asdf asdf asd </p>
<img name="prueba1" src="" width="100" height="100" alt="Imagen 1" class="imgs_chicas" />    
<img name="prueba2" src="" width="100" height="100" alt="Imagen 2" class="imgs_chicas" />    
<img name="prueba3" src="" width="100" height="100" alt="Imagen 3" class="imgs_chicas" /> 
<img name="prueba4" src="" width="100" height="100" alt="Imagen 4" class="imgs_chicas" /> 
<img name="prueba5" src="" width="100" height="100" alt="Imagen 5" class="imgs_chicas" /> 
<img name="prueba6" src="" width="100" height="100" alt="Imagen 6" class="imgs_chicas" />    
    </div> 
</div>	
        </td> 
		</tr>
<tr>
	<td style="width:100%; height:100px; background-color:#333333; color:#FFFFFF">
		AQUI VA EL FOOTER
	</td>
</tr>
</table>

Espero haberme explicado bien..

gVenom · #9 (**permalink**) 09/12/2008, 10:33

Perfecto, gracias willyfc , tu karma se merece un aumento.