Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/05/2010, 10:30
c0w
 
Fecha de Ingreso: enero-2008
Mensajes: 146
Antigüedad: 16 años, 3 meses
Puntos: 0
Pregunta Divs + CSS (principiante)

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>