<td width="561" height="541" colspan="2" rowspan="2" background="images/index_07.gif">
<div id="Tema">
<h1>Mensaje de Bienvenida</h1></p>
ACA IRIA EL MENSAJE DE BIENVENIDA</p></div></td><td colspan="2">
[img]images/index_01.gif[/img]</td>
<td rowspan="3">
[img]images/index_02.gif[/img]</td>
</tr>
<tr>
<td width="505" height="80" colspan="2" background="images/index_03.gif">
</td>
</tr>
<tr>
<td colspan="2">
[img]images/index_04.gif[/img]</td>Yaneth escribió:hola
ya hiciste el curso paso a paso con divs?????
Arian.- escribió:en lo primero, si, podes darle estilo al div, haciendo referencia a su nombre:
#Tema {el formato, margenes, colores, alineaciones que quieras poner}
lo segundo, para pasar de una tabla de 4 columnas a divs, lo que podes hacer es crear un div contenedor, y 4 divs dentro.
algo asi como:
<div id="contenedor">
<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div id="col4"></div>
</div>
y en los css dar el formato de como se comporta cada capa.
como te dije yo y la amiga Yaneth, tal vez estés un poco flojo con el css, y si no entendes bien esto, se te va a complicaa.
como recomendacion, te digo que leas esto:
http://www.wmasterfacil.com/0033maquetacion.html
seguro que te va a venir muy bien :wink:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Documento sin título</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="olive">
<div id="contenedor">
<div id="cabecera-der">esta seria la columna de la derecha</div>
<div id="cabecera1">primer fila</div>
<div id="cabecera2">segunda fila</div>
<div id="cabecera3">tercer fila</div>
</div>
</body>
</html>* { padding: 0; margin: 0; } /* ESTO SIEMPRE TIENE QUE ESTAR AL PRINCIPIO DE TU HOJA DE ESTILO */
#contenedor { /* ESTA VA A SER LA CAPA QUE CONTENGA A LAS OTRAS 4 */
height: 150px; /* ESTE VALOR EQUIVALE A LA SUMA DE LAS 3 FILAS */
width: 800px; /* ESTE VA A SER EL ANCHO TOTAL DE TODO */
margin-top: 15px; /* UN MARGEN DE ARRIBA PARA SEPARAR DEL MONITO =D */
margin-right: auto; /* ESTOS DOS MARGENES POSICIONAN AL CENTRO, EN DISTINTAS RESOLUCIONES SE VE MEJOR SU FUNCIONAMIENTO, TE RECOMIENDO QUE LOS DEJES */
margin-left: auto;
background-color:red; /* EL COLOR DE FONDO ESTE NO SE VA A VER YA QUE VA A ESTAR TAPADO POR LAS OTRAS CAPAS, PODES SACARLO SI QUERES */
}
#cabecera1 { /* PRIMER FILA */
height: 50px; /* ALTURA PRIMER FILA */
width: 700px; /* ANCHO DE LA PRIMER FILA, FIJATE QUE NO ES IGUAL QUE EL ANCHO TOTAL, YA QUE A LA DERECHA SE POSICIONA UNA CAPA MAS */
background-color:white; /* DE ACA PARA ABAJO ES SIMILAR A LA CABECERA 1*/
}
#cabecera2 {
height: 50px;
width: 700px;
background-color:blue;
}
#cabecera3 {
height: 50px;
width: 700px;
background-color:green;
}
#cabecera-der { /* ESTA ES LA CAPA QUE FLOTA A LA DERECHA */
height: 150px; /* EL ALTO ES IGUAL AL ALTO DE LA CAPA CONT, YA TE DARAS CUENTA POR QUE... */
width: 100px; /* EL ANCHO TERMINA DE COMPLETA AL ANCHO DE LAS ANTERIORES 3, Y AL SUMARLOS ME DA EL ANCHO DE LA CAPA CONTENEDORA */
float: right; /* ESTO ES LO QUE VA A HACER QUE SE POSICIONE A LA DERECHA */
background-color:yellow;
}
/* CUALQUIER DUDA VISITA MI SITIO [url]WWW.ZONA-WEBMASTER.COM.AR[/url], PRÓXIMAMENTE REABRO EL FORO! */Arian.- escribió:te voy a dejar un código que te hice para que entiendas como es la cosa, crea una hoja de estilo y pega lo siguiente:
index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Documento sin título</title> <link href="estilo.css" rel="stylesheet" type="text/css" /> </head> <body bgcolor="olive"> <div id="contenedor"> <div id="cabecera-der">esta seria la columna de la derecha</div> <div id="cabecera1">primer fila</div> <div id="cabecera2">segunda fila</div> <div id="cabecera3">tercer fila</div> </div> </body> </html>
estilo.css* { padding: 0; margin: 0; } /* ESTO SIEMPRE TIENE QUE ESTAR AL PRINCIPIO DE TU HOJA DE ESTILO */ #contenedor { /* ESTA VA A SER LA CAPA QUE CONTENGA A LAS OTRAS 4 */ height: 150px; /* ESTE VALOR EQUIVALE A LA SUMA DE LAS 3 FILAS */ width: 800px; /* ESTE VA A SER EL ANCHO TOTAL DE TODO */ margin-top: 15px; /* UN MARGEN DE ARRIBA PARA SEPARAR DEL MONITO =D */ margin-right: auto; /* ESTOS DOS MARGENES POSICIONAN AL CENTRO, EN DISTINTAS RESOLUCIONES SE VE MEJOR SU FUNCIONAMIENTO, TE RECOMIENDO QUE LOS DEJES */ margin-left: auto; background-color:red; /* EL COLOR DE FONDO ESTE NO SE VA A VER YA QUE VA A ESTAR TAPADO POR LAS OTRAS CAPAS, PODES SACARLO SI QUERES */ } #cabecera1 { /* PRIMER FILA */ height: 50px; /* ALTURA PRIMER FILA */ width: 700px; /* ANCHO DE LA PRIMER FILA, FIJATE QUE NO ES IGUAL QUE EL ANCHO TOTAL, YA QUE A LA DERECHA SE POSICIONA UNA CAPA MAS */ background-color:white; /* DE ACA PARA ABAJO ES SIMILAR A LA CABECERA 1*/ } #cabecera2 { height: 50px; width: 700px; background-color:blue; } #cabecera3 { height: 50px; width: 700px; background-color:green; } #cabecera-der { /* ESTA ES LA CAPA QUE FLOTA A LA DERECHA */ height: 150px; /* EL ALTO ES IGUAL AL ALTO DE LA CAPA CONT, YA TE DARAS CUENTA POR QUE... */ width: 100px; /* EL ANCHO TERMINA DE COMPLETA AL ANCHO DE LAS ANTERIORES 3, Y AL SUMARLOS ME DA EL ANCHO DE LA CAPA CONTENEDORA */ float: right; /* ESTO ES LO QUE VA A HACER QUE SE POSICIONE A LA DERECHA */ background-color:yellow; } /* CUALQUIER DUDA VISITA MI SITIO [url]WWW.ZONA-WEBMASTER.COM.AR[/url], PRÓXIMAMENTE REABRO EL FORO! */
el código esta comentado, asi que te aclaro para que puse cada cosa, de esta forma, seguramente vas a entender todo fácilmente.
un saludo y espero que te sirva :wink: