Pasar de tablas a DIV's

Citar

Escrito el 01 Feb 2009 02:43 pm

Soy uno de los tantos que quiere empezar a trabajar los html con div y css, en vez de tablas. Tengo una noción, pero no sé si es la forma correcta... y quiero armar esta web de la manera más óptima, para que después los programadores puedan manejar el código lo más limpio posible.
Dejo un esquema de la web que tengo que armar para ver si me pueden dar una mano...

[img]http://img528.imageshack.us/my.php?image=bocetofq2.gif[/img]

Estoy medio atascado con la creación de la estructura base.. no decido cual es la mejor forma.
¿Hay algun buen tutorial como para empezar a armar todo con DIV's y CSS?
Me gustaría no incluir tablas en lo más mínimo.
Algun alma caritativa que me ayude??

Por Argento1982

14 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 01 Feb 2009 07:37 pm

Cada uno de esos recuadros de colores representa un div, y luego desde el archivo .css les vas dando sus anchos y flotantes, te recomiendo que leas el Curso de CSS y XHTML que hay en este foro.

PD. no te recomiendo que uses una marquesina, ya pasaron de moda U_U

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino

Envíale un mensaje privado Web

Lima, Peru

@DraRock

Citar

Escrito el 01 Feb 2009 08:12 pm

Si, estuve leyendo eso.. pero no hay caso con el tema de tener 3 columnas.. no lo logro poner bien!!
La marquesina la quieren usar para mostrar información económica... no es mio el diseño.

Este es mi html:

Código :

<!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>ONCCA</title>
<link href="estilo.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<div id="contenedor">
   <div id="main">
     <div id="header">
       <div id="login">login
      </div>
        </div>
      <div id="marquesina">marquesina
         </div>
      <div id="menu">menu
         </div>
   <div id="contentwrap">
      <div id="maincontentwrap">
      <div id="mapa">
         <div id="selector">
            selector
           </div>
        mapa    
      </div>
   <div id="secondarycontentwrap">
      <div id="noticia1">noticia1</p></div>
      <div id="noticia2">noticia2</div>
      <div id="noticia3">noticia3</div>
    </div>
      <div id="pie">pie
       </div>
   </div>
   </div>
</div>
</body>
</html>

Este mi estilo CSS:

Código :

body {
font-family: Tahoma, Arial;
font-size: 12px;
color: black;
background-color: #CCCCCC;
text-align:center;
}

#contenedor {
border: none;
position: relative;
margin: 0 auto;
clear:both;
height:100%;
width:945px;
}

#main {
height:100%;
width:945px;
}

#header {
height:187px;
width:945px;
background-color:#009900;
background:url(img/header.jpg) no-repeat;
}

#login {
height:150px;
width:315px;
float:right;
background-color:#00FF00;
}

#marquesina {
height:30px;
width:945px;
background-color:#003399;
}

#menu {
height:24px;
width:945px;
background-color:#FF0000;
}

#contentwrap {
width:945px;
}

#maincontentwrap {
width:945px;
}

#mapa {
height:150px;
width:630px;
float:left;
background-color:#3300FF;
}

#selector {
height:150px;
width:315px;
float:right;
background-color:#00FFFF;
clear:both;
}

#secondarycontentwrap {
height:250px;
width:945px;
}

#noticia1 {
float: left;
height:250px;
width:315px;
background-color:#FFFF00;
}

#noticia2 {
margin-right:315px;
margin-left:315px;
height:250px;
width:315px;
background-color:#FFCC00;
}

#noticia3 {
float: right; 
height:250px;
width:315px;
background-color:#FF9900;
}

#pie {
height:50px;
width:945px;
background-color:#666666;
clear: both;
}

Alguna sugerencia para hacer que mi html se vea como el boceto que puse en el primer post??

Por Argento1982

14 de clabLevel

Envíale un mensaje privado Web

Citar

Escrito el 01 Feb 2009 08:22 pm

Solo recuerda que para que un elemento se posicione al lado de otro usa un float, en tu caso usa float:left; para cada elemento que va al lado de otro, y cuando quieras ya romper ese flujo en el elmento que sigue, ponte por ejemplo el footer, si esta directamente debajo footer debe tener la regla clear:both; y si no inicia directamente coloca directamente debajo un div vacio con clear:both; solamente.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino

Envíale un mensaje privado Web

Lima, Peru

@DraRock

Pasar de tablas a DIV's

Escribe una respuesta rapida