Hola a todos!
Estoy elaborando un proyecto en PHP para la universidad, y tengo problemas en el diseño del index al momento de cargarlo en el mozilla y chrome!.
Pero, si lo cargo con IE y safari todo eta perfecto!
Creo que los errores nacen, porque no estoy usando el "float" y el "clear" adecuadamente. Asi que espero que me ayuden con esto.
A continuación comparto los códigos:
--------------------------------------------------------------
File: index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style01.css">
</head>
<body>
<div id="div_top1">
<div id="container_top1"></div>
</div>
<div id="div_top2">
<div id="container_top2">C</div>
</div>
<div id="div_body">
<div id="container_body">
<div id="body_left">
<div id="box1"></div>
<div id="box2"></div>
</div>
<div id="body_right">
<div id="box_a"></div>
<div id="box_b"></div>
<div id="box_c"></div>
</div>
</div>
</div>
<div id="div_footer">
<div id="container_footer"></div>
</div>
</body>
</html>
--------------------------------------------------------------
File: style01.css
@charset "utf-8";
#div_top1 {
}
#div_top1 #container_top1 {
width: 980px;
margin-right: auto;
margin-left: auto;
background-color: #6C9;
height: 100px;
}
#div_top2 {
}
#div_top2 #container_top2 {
background-color: #900;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#div_body {
}
#div_body #container_body {
background-color: #9F0;
margin-right: auto;
margin-left: auto;
width: 980px;
height: auto;
}
#div_body #container_body #body_left {
width: 200px;
background-color: #09F;
float: left;
clear: left;
margin-top: 10px;
height: auto;
}
#div_body #container_body #body_left #box1 {
background-color: #669;
height: 150px;
width: 200px;
}
#div_body #container_body #body_left #box2 {
background-color: #669;
height: 150px;
width: 200px;
margin-top: 10px;
}
#div_body #container_body #body_right {
background-color: #0CC;
height: auto;
width: 770px;
float: left;
margin-left: 10px;
margin-top: 10px;
}
#div_body #container_body #body_right #box_a {
height: 150px;
width: 770px;
background-color: #990;
}
#div_body #container_body #body_right #box_b {
height: 200px;
width: 380px;
margin-top: 10px;
background-color: #C09;
float: left;
margin-bottom: 10px;
}
#div_body #container_body #body_right #box_c {
height: 200px;
width: 380px;
background-color: #C09;
float: left;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
clear: none;
}
#div_footer {
}
#div_footer #container_footer {
background-color: #036;
margin-right: auto;
margin-left: auto;
width: 980px;
height: 150px;
clear: both;
}
--------------------------------------------------------------
Con todo esto, el index de ve asi en el mozilla:
Donde se puede observar que el background-color del #container_body es blanco.
Y si revisamos el css, tenemos que:
#div_body #container_body {
background-color: #9F0;
margin-right: auto;
margin-left: auto;
width: 980px;
height: auto;
}
Por lo que el index debería ser de la siguiente forma (se ve asi en IE y safari):
Espero que me hayan entendido, y si tienen una mejor forma para trabajar el diseño del index me gustaría que me lo hagan saber.
.
Mostrar Mensajes
