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 • 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"> </td>
</tr>
<tr>
<td> </td>
<td> </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.