Divs + CSS (principiante)

c0w · #1 (**permalink**) 24/05/2010, 10:30

Bueno gente, les cuento mi situacion. Yo hice TODAS mis webs con tablas, y nunca tuve problemas, mas que los comunes de los explorers pero siempre los resolvia. Ej: http://www.csland.com.ar/

Pero ahora intentando a aprender a usar DIVS, vi un videotutorial entero de como pasar una web de psd a divs + css. Y en el camino me LLENE de problemas, que con las tablas no tenia estos problemas...

Si alguien me da una mano de como hacer mas simple este codigo le agradeceria:

Código HTML:

<head>
<title>DIVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
<!--
* {margin:0px; padding:0px;}

/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,del {text-decoration: line-through;}
q:before, q:after {content: '';content: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
table {border-collapse: collapse;border-spacing: 0;}

/* ESTILOS */
h1 {font-size:18px}
h2 {font-size:16px}
h3 {font-size:14px}
h4 {font-size:12px}
h5 {font-size:11px}
h6 {font-size:10px}

body
{
margin:5px;
background-image:url(bg.gif);
background-repeat:repeat;
}

.header_left
{
  float:left;
  width:20px;
  height:51px;
}

.header_right
{
  float:left;
  width:20px;
  height:51px;
}

.header_logo
{
  float:left;
  width:20px;
  height:51px;
}

div#header_contain
{
  width:800px;
  height:51px;
}

.header_seccions
{
  width:740px;
  height:51px;
}

div#body_all
{
  width:786px;
  background-color:#005F7D;
  border-left:1px solid #222222;
  border-right:1px solid #222222;
  padding:7px;
}

div#body_select
{
  background-image:url(body_bg.gif);
  background-repeat:repeat;
  border:1px solid #474747;
  padding:7px;
  padding-bottom:20px;
}

.body_select_start
{
  float:left;
}

.body_boton
{
  float:left;
}
-->
</style>
</head>

<body>
<center>
<div id="header_contain">
  <div class="header_left"></div><!--End of header_left-->
  <div class="header_logo"></div><!--End of header_logo-->
  <div class="header_seccions"><h5><a href="#"><strong>DISEÑO WEB</strong></a><a href="#"><strong>DESARROLLO WEB</strong></a><a href="#"><strong>APLICACIONES</strong></a><a href="#"><strong>LOGOTIPOS</strong></a><a href="#"><strong>HOSTING</strong></a><a href="#"><strong>CONTACTO</strong></a></h5>
  </div><!--End of header_seccions-->
  <div class="header_right"></div><!--End of header_right-->
</div><!--End of header_contain-->

<div id="body_contain">
  <div id="body_all">
    <div id="body_select">
      <div class="body_select_left"></div><!--End of body_select_left-->
      <div class="body_select_start"><h5><strong>DISEÑO WEB:</strong></h5></div>
      <!--End of body_select_start-->
      <div class="body_boton">
      <h5><a href="#">PEDIDO PERSONALIZADO</a></h5>
      </div><!--End of body_select_1-->
      <div class="body_boton">
      <h5><a href="#">PLANES</a></h5>
      </div><!--End of body_select_2-->
      <div class="body_boton">
      <h5><a href="#">TRABAJOS REALIZADOS</a></h5>
      </div><!--End of body_select_3-->
      <div class="body_boton">
      <h5><a href="#">INFORMACIÓN</a></h5>
      </div><!--End of body_select_4-->
      <div class="body_select_end"></div><!--End of body_select_end-->
      <div class="body_select_right"></div><!--End of body_select_right-->
    </div><!--End of body_select-->
  </div><!--End of body_all-->
</div><!--End of body_contain-->
</center>
</body>
</html>

alexk · #2 (**permalink**) 24/05/2010, 16:18

ehm?... todos tenemos problemas... cual es el tuyo?
o yo no entendi..

c0w · #3 (**permalink**) 24/05/2010, 20:47

Es dificil de explicar :P

Mi problema principal es que como hacia los diseños con tablas tenia columns y rows, y ahora con divs, no se, es como todo desorganizado... me gustaria saber como hacer el mismo trabajo que se puede hacer con tablas pero con divs.

Por ejemplo, cuando hago un cuadro adentro del otro y pongo texto, es como que no baja el recuadro con el texto... es raro xD

Muchisimas gracias por intentar entender lo que digo... jaja

jcarlosfr · #4 (**permalink**) 24/05/2010, 22:24

Yo si te entiendo lo que tu quieres es una idea basica de como empezar a trabajar con los divs cierto?... pues ahi varias formas con las cuales puedes empezar si eres beginner en esto del maquetado con divs mira:

1.- Con adobe dream weaver ahi una opcion cuando creas un proyecto nuevo en el menu archivo en el cual puedes seleccionar un diseno ya hecho para empezar a trabjar con el que ya tiene disenos maquetados con puros divs y css puro tu puedes separar los estilos con los que se separa este css del codigo html para que veas como esta maquetado que estilos se aplican y todo ese show.

2.- Si ya sabes aplicar estilos pero no sabes como empezar puedes dibujar un mock up como se le dice en el ambito del diseno profesional y puedes crear una estructura basica para guiarte.

3.- Ahora que si no es eso lo que quieres y quieres saber un ejemplo de maquetado pues tambien te pongo este ejemplo:

Imagina que tienes el documento en blanco tu puedes crear un div contenedor padre o wrapper el cual contendra a todos los demas hijos o elementos dentro del documento tu a este contenedor le asignas con un estilo CSS un height y un width especifico para este div.

dentro de este div contenedor incluyes otro div el cual lo puedes utilizar como cabecera todo quedaria de la siguiente forma:

Código HTML:

Ver original<html>
     <head>
          <title>
               maquetado de ejemplo
           </title>
           <style>
                #contenedor_padre {
                     width: 500px;
                     height: 900px;
                }
                #cabecera {
                    width: 100%;
                    height: 90px;
                    border: 1px solid red;
                }
           </style>
     </head>
    <body>
        <div id="contenedor_padre">
            <div id="cabecera">
                 hola este es la cabecera!
            </div>
        </div>
    </body>
<html>

En lo sucesivo al asignar al estilo con id cabecera estamos dandole un id de cien po ciento para que se expanda en todos los limites del padre y si agregamos un nuevo div debajo de este aparecera debajo de la cabecera si quieres agregar digamos tres columnas debes agregar tres divs abajo de la cabecera y darles un width y un height especifico y nada mas utilizarias un solo tipo de estiloo y ya lo demas es cuestion de ir lo maquetando a tu gusto utilizando css te recomiendo que entres a la pagina de [URL="http://www.w3schools.com/css/"]http://www.w3schools.com/css/[/URL] si tienes cualquier duda asmelo saber.

c0w · #5 (**permalink**) 25/05/2010, 15:02

Muchisimas gracias jcarlosfr!

Pero ahora tengo otro problemita :P

Me ayudaste a hacer esto: (Mi primer diseño en divs)

Código HTML:

<!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>DIXENS &bull; Diseño web | Desarrollo web | Aplicaciones | Logotipos | Hosting</title>

<style type="text/css">
<!--
@charset "UTF-8";

/* RESET */
* {margin: 0; padding:0; outline: none; border: 0;}

/* ESTILOS */
body
{
  background-image:url(images/bg.gif);
  background-repeat:repeat;
  margin:5px
}

a:link {color: #007CA6; text-decoration:none;}
a:visited {color: #007CA6; text-decoration:none;}
a:hover {color: #007CA6; text-decoration:underline;}
a:active {color: #007CA6; text-decoration:none;}

#MAIN
{
  width:800px;
}

#head
{
  height:51px;
  overflow:hidden;
  margin:0 auto;
}

.head_left
{
  background-image:url(images/head_left.gif);
  background-repeat:no-repeat;
  height:100%;
  width:9px;
  float:left;
  display:inline;
}

.head_logo
{
  background-image:url(images/head_logo.gif);
  background-repeat:no-repeat;
  height:100%;
  width:129px;
  float:left;
  cursor:pointer;
  display:inline;
}

.head_links
{
  background-image:url(images/head_center.gif);
  background-repeat:repeat-x;
  height:100%;
  width:653px;
  float:left;
  display:inline;
}

.head_right
{
  background-image:url(images/head_right.gif);
  background-repeat:no-repeat;
  height:100%;
  width:9px;
  float:left;
  display:inline;
}

#head_links_table
{
  height:100%;
  width:100%;
}

.head_links_text
{
  padding-left:10px;
  font-size:11px;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:bold;
  color:#FFFFFF;
  vertical-align:middle;
  text-align:left;
}

.head_links_text a:link {color: #D5DEE3; text-decoration:none;}
.head_links_text a:visited {color: #D5DEE3; text-decoration:none;}
.head_links_text a:hover {color: #FFFFFF; text-decoration:none;}
.head_links_text a:active {color: #FFFFFF; text-decoration:none;}

.align_middle
{
  vertical-align:middle;
}

#body
{
  background-color:#005F7D;
  border-left:1px solid #222222;
  border-right:1px solid #222222;
  width:782px;
  padding-left:7px;
  padding-right:7px;
}

.body_contain
{
  background-image:url(images/body_bg.gif);
  background-repeat:repeat;
  border:1px solid #222222;
  border-top:0px;
  width:100%;
}

#foot
{
  height:30px;
  overflow:hidden;
  margin:0 auto;
}

.foot_left
{
  background-image:url(images/foot_left.gif);
  background-repeat:no-repeat;
  height:100%;
  width:9px;
  float:left;
  display:inline;
}

.foot_center
{
  background-image:url(images/foot_center.gif);
  background-repeat:repeat-x;
  height:100%;
  width:782px;
  float:left;
  display:inline;
}

.foot_right
{
  background-image:url(images/foot_right.gif);
  background-repeat:no-repeat;
  height:100%;
  width:9px;
  float:left;
  display:inline;
}

#foot_center_table
{
  height:100%;
  width:100%;
}

.foot_center_text
{
  font-size:11px;
  font-family:Arial, Helvetica, sans-serif;
  color:#FFFFFF;
  vertical-align:middle;
  text-align:center;
}

.foot_center_text a:link {color: #D5DEE3; text-decoration:none;}
.foot_center_text a:visited {color: #D5DEE3; text-decoration:none;}
.foot_center_text a:hover {color: #FFFFFF; text-decoration:none;}
.foot_center_text a:active {color: #FFFFFF; text-decoration:none;}

#body_table
{
  width:100%;
}
-->
</style>
</head>

<body>

<center>
<div id="MAIN">

  <div id="head">
    <div class="head_left">
    </div><!--End of header_left-->
    <a href="index.php">
    <div class="head_logo">
    </div><!--End of header_logo-->
    </a>
    <div class="head_links">
    <table id="head_links_table" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="head_links_text">
        
        <img src="icons/diseño web.gif" width="16" height="16" class="align_middle" title="Diseño web">
        <a href="#">DISEÑO WEB</a>
        <img src="images/head_spacer.gif" width="10" height="21" class="align_middle">
        
        <img src="icons/desarrollo web.gif" width="16" height="16" class="align_middle" title="Desarrolo web">
        <a href="#">DESARROLLO WEB</a>
        <img src="images/head_spacer.gif" width="10" height="21" class="align_middle">
        
        <img src="icons/aplicaciones.gif" width="16" height="16" class="align_middle" title="Aplicaciones">
        <a href="#">APLICACIONES</a>
        <img src="images/head_spacer.gif" width="10" height="21" class="align_middle">
        
        <img src="icons/logotipos.gif" width="15" height="15" class="align_middle" title="Logotipos">
        <a href="#">LOGOTIPOS</a>
        <img src="images/head_spacer.gif" width="10" height="21" class="align_middle">
        
        <img src="icons/hosting.gif" width="11" height="14" class="align_middle" title="Hosting">
        <a href="#">HOSTING</a>
        <img src="images/head_spacer.gif" width="10" height="21" class="align_middle">
        
        <img src="icons/contacto.gif" width="16" height="11" class="align_middle" title="Contacto">
        <a href="#">CONTACTO</a>
        
        </td>
      </tr>
    </table>
    </div><!--End of header_links-->
    <div class="head_right">
    </div><!--End of header_right-->
  </div><!--End of head-->
   
  <div id="body">
    <div class="body_contain">
      <table id="body_table" border="0" cellspacing="4" cellpadding="0">
        <tr>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </table>
    </div>
    <!--End of body_contain-->
  </div><!--End of body-->
  
  <div id="foot">
    <div class="foot_left">
    </div><!--End of foot_left-->
    <div class="foot_center">
    <table id="foot_center_table" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="foot_center_text">www.<strong>DIXENS</strong>.com.ar | <a href="#"><strong>[email protected]</strong></a></td>
      </tr>
    </table>
    </div><!--End of foot_center-->
    <div class="foot_right">
    </div><!--End of foot_right-->
  </div><!--End of foot-->

</div><!--End of MAIN-->
</center>

</body>
</html>

EN IE SE VE DE 2 PIXELS MAS DE ANCHO EL BODY Y CON FIREFOX SE VE PERFECTO.1

1 - ¿Como arreglo eso?

2 - Como no se mucho de CSS todavia, fui tirando codigos ej: "display: inline" para mejorar el diseño, pero no tengo ni idea de que es lo que hacen realmente. Lei en w3school su funcion, pero no te lo explica en criollo que es lo que hace.
¿Que consejos me darias de los codigos y de otras cosas para mejorar mi diseño?

Supongo que lo de los 2 pixels mas es porque el border lo suma en IE y en FF no.

jcarlosfr · #6 (**permalink**) 25/05/2010, 19:09

Pues no hay de que... ahora con el problema ese lo que pasa es que los navegadores web usan diferentes motores de renderizado para procesar y mostrar las paginas vaya que firefox utiliza uno llamado gecko, google chrome y safari estan basados en web kit un motor de renderisado basado en KSHML si mal no me equivoco que es el motor de renderizado con el que funciona konqueror el navegador web freesource de linux de esto se trata que cuando tu utilizas un estilo css las paginas s evean diferentes en todos los navegadores siendo que internet explorer utiliza uno llamado trident siendo el menos compatible con css si entras a esta url que es la direccion del acid test; entrando a esta direccion esta pagina realiza un test dependiendo del navegador y te va desplegando en una puntuacion de uno a cien que tan bueno es, siendo que el que pasa todas las pruebas mejor es opera con su motor de renderisado presto y safari y chrome tambien lo pasan casi al cien por ciento si no me equivoco yaa con esta informacion espero calmar tu frustracion a la hora de estar quebrandote la cabeza para asignar un estilo a cada pagina.

Con respecto a lo que me dices en la pagina de que se ven dos pixeles de diferencia deberias intentar realizar el siguiente hack estos hacks son estilos que nosostros aplicamos al css para apuntar a un navegador predeterminado para que solo este tome ese estilo y los demas lo ignoren hay varios tipos de hacks como los comentarios condicionales creados por microsoft para internet explorer... bueno existe uno que tienes que anteponerle una diagonal y despues escribir el estilo para que internet explorer lo tome osea por ejemplo

Código CSS:

Ver original#columna1 {
    width: 100&#37;; <--solo para firefox 
    / width: 70%; <--solo para internet explorer
}

Si esto no funciona otra alternativa es hacer el siguiente hack:

Código CSS:

Ver original#cabecera {margin-bottom:3em} <-- esto solo lo interpretara internet explorer
html>body #header {margin-bottom:1em} <-- Esto lo leera firefox junto con el resto de los navegadores

ya que si de plano nada de esto funciona recurreo a los comentarios condicionales te dejo un excelente tuto sobre este tema:

http://css-discuss.incutio.com/wiki/Css_Hack

ojala te haya servido de algo...:D

c0w · #7 (**permalink**) 25/05/2010, 20:34

Muchisimas gracias nuevamente, lo solucione con un <!-- if IE ...
Igual voy a hacerlo con tu metodo porque se puede hacer desde el CSS.

Me quedo una duda mas... Yo veo webs que estan enteramente echas en divs y ni 1 tabla. Yo intente hacerlo, pero por ejemplo donde tengo texto no toma los vertical-align, entre otras cosas.

Sabes como podria mejorar mi codigo? Es decir, como sacar las tablas, poner bien los floats: los position:, etc.

Conoces alguna programa para chequear como se ve mi web en otros navegadores?

Yo consegui el IETester pero es solo para todas las versiones de IE.

Un saludo, y desde ya muchas gracias...

SPAWN3000 · #8 (**permalink**) 25/05/2010, 21:28

Yo te aconsejo utilizar un framework y no te saques los ojos, recomiendo 960 GRID, y utiliza alguno de los reset CSS.

Un saludo,

BloodShadow · #9 (**permalink**) 26/05/2010, 10:08

Cita:

Iniciado por SPAWN3000

Yo te aconsejo utilizar un framework y no te saques los ojos, recomiendo 960 GRID, y utiliza alguno de los reset CSS.

Un saludo,

Naaa no te apoyo en eso.... a mi me gusta programar, no usar programas

c0w · #10 (**permalink**) 26/05/2010, 11:42

por mas de que use un programa, no me explica como hacerlo bien :P.

jomaruro · #11 (**permalink**) 30/05/2010, 03:17

Hola:

El paso de maquetar con tablas a maquetar mediante CSS provoca muchos dolores de cabeza, pero a la larga te resultará más sencillo.

Empieza por leerte estos manuales (y prácticar con los ejercicios).

1º Introducción a CSS.
2º CSS avanzado.

También te resultarán útiles las guías que Mikmoro aportó al foro.

Migración a XHTML+CSS (Parte I).
Migración a XHTML+CSS (Parte II).

Espero que estos enlaces te aclaren ideas.

Saludos.