Tema: Problema con html y css
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/05/2011, 11:28
Avatar de PabloPF
PabloPF
 
Fecha de Ingreso: mayo-2011
Ubicación: Ciudadano de un lugar llamado mundo!
Mensajes: 137
Antigüedad: 12 años, 11 meses
Puntos: 5
Pregunta Problema con html y css
Hola tengo un problema con css y html el codigo html es:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es"><head>
  3.  
  4.   
  5.   <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /><title>Tú en Todo</title>
  6.   
  7.  
  8.   
  9.   
  10.   <link title="estilogeneral" media="all" href="estilos/estilogeneral.css" rel="stylesheet" type="text/css" />
  11.  
  12.  
  13.  
  14. <script>
  15. function hora(){
  16. meses = new Array("Enero","Febrero","Marzo","Abril","Mayo","Ju nio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre");
  17. data = new Date();
  18. index = data.getMonth();
  19. diasemana=new Array("Lunes","Martes","Miércoles","Jueves","Viern es","Sábado","Domingo");
  20. indexday = data.getDay();
  21. if (indexday == 0)
  22. indexday = 7;
  23. any = data.getYear();
  24. if (any < 1900)
  25. any = 1900 + any;
  26. var fecha= new Date();
  27. var horas= fecha.getHours();
  28. var minutos = fecha.getMinutes();
  29. var segundos = fecha.getSeconds();
  30.  
  31. if(horas < 10) { horas = '0' + horas; }
  32. if(minutos < 10) { minutos = '0' + minutos; }
  33. if(segundos < 10) { segundos = '0' + segundos; }
  34.  
  35. document.getElementById('hora').innerHTML='Hoy es: '+data.getDate()+' de '+meses[index]+' de '+any+' '+horas+':'+minutos+':'+segundos+'';
  36. setTimeout('hora()',1000);
  37. }
  38. </script>
  39.  
  40.  
  41.   <script language="javascript">
  42. function cerrar(){
  43.  document.getElementById('apDiv1').style.visibility = "hidden";
  44. }
  45. function muestra(){
  46. document.getElementById('apDiv1').style.visibility = "visible";
  47. }
  48.   </script>
  49.   
  50.   <script language="javascript">
  51. function ocultarimagen(){
  52. document.getElementById('dktc').style.visibility = "collapse"; width = "0px"; height = "0px";
  53. }
  54. function mostrarimagen(){
  55. document.getElementById('dktc').style.visibility = "visible";
  56. }
  57.   </script>
  58.   
  59.   
  60.   <meta content="tuentodo.com" name="author" /></head>
  61.  
  62. <body onload="leerEstilo(); hora()" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" topmargin="0" leftmargin="0" alink="#000099" link="#000099" marginheight="0" marginwidth="0" vlink="#000099">
  63.  
  64.  
  65.  
  66.  
  67.     
  68. <div id="pagina">
  69.       <div id="botones">
  70.         <div class="text-shadow" id="el">Inicio Deportes Tutoriales Foro
  71.           Juegos Cine <a href="ola.php">Televisión</a></div>
  72. <div id="hora"></div>
  73.       </div>
  74.       <div id="contenido">
  75.         <div align="center" id="content">
  76.     <div id="izquierda">izquierda</div>
  77.     <div id="centro">centro</div>
  78.     <div id="derecha">derecha</div>
  79.         </div>
  80.         <div align="center" id="pie"> Pié </div>
  81.       </div>
  82.     </div>
  83.  
  84.   
  85.  
  86. </body></html>

Y este es el css:

Código CSS: 
Ver original
  1. hr {
  2. color: #ededed;
  3. font-size: 10px;
  4. width: 95%;
  5. }
  6.  
  7. body { 
  8. background-color: #ededed;
  9.      background: -moz-linear-gradient(top, #65b6cf , #2c2c2c);
  10.  background: -webkit-gradient(linear, 0 0, 0 100%, from(#65b6cf),  to(#2c2c2c));
  11.  
  12.  
  13.     
  14.     /* For Internet Explorer 5.5 - 7 */
  15.     background: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#cbcbcb, color-stop(0.5, #fff), color-stop(0.5, #66cc00));
  16.     /* For Internet Explorer 8 */
  17.     background: -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ededed, endColorstr=#cbcbcb, color-stop(0.5, #fff), color-stop(0.5, #66cc00));
  18.  
  19. }
  20. .text-shadow {
  21.   font-size: 2em;
  22.     
  23.     /* Firefox, WebKit, Opera 9+ */
  24.     text-shadow: 3px 3px 5px #999;
  25. }
  26. #codigo {
  27.   margin-top: 15px;
  28.   margin-bottom: 15px;
  29.   text-align: left;
  30.   width: 70%;
  31.   height: 200px;
  32.   overflow: auto;
  33.   background-color: rgb(164, 164, 164);
  34.   background-image: none;
  35.   background-repeat: repeat;
  36.   background-attachment: scroll;
  37.   background-position: 0% 0%;
  38.   color: rgb(255, 0, 144);
  39.   -webkit-box-shadow: 1px 1px 10px rgb(0, 0, 0);
  40.   box-shadow: 1px 1px 10px rgb(0, 0, 0);
  41. }
  42. #el {
  43.   margin-left: auto;
  44.   max-width: 1400px;
  45.   margin-right: auto;
  46.   min-width: 740px;
  47. }
  48. #hora {
  49.   margin-left: auto;
  50.   max-width: 1400px;
  51.   margin-right: auto;
  52.   width: auto;
  53.   min-width: 740px;
  54. }
  55. #botones {
  56.   align: center;
  57.   padding-left: 70px;
  58.   margin-top: 0px;
  59.   margin-right: auto;
  60.   margin-bottom: 0px;
  61.   margin-left: auto;
  62. background: #000;
  63.     
  64.     /* For WebKit (Safari, Google Chrome etc) */
  65.     background: -webkit-gradient(linear, left top, left bottom, from(#5a5a5a), to(#202020));
  66.     /* For Mozilla/Gecko (Firefox etc) */
  67.     background: -moz-linear-gradient(top, #5a5a5a, #202020);
  68.     /* For Internet Explorer 5.5 - 7 */
  69.     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#5a5a5a, endColorstr=#202020);
  70.     /* For Internet Explorer 8 */
  71.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#5a5a5a, endColorstr=#202020)";
  72.     min-height: 100%;
  73.  
  74.   width: auto;
  75.   font-size: 12px;
  76.   height: 85px;
  77.   color: rgb(255, 255, 255);
  78. box-shadow: 5px -9px 3px #333;
  79. -webkit-box-shadow: #666 0px 2px 3px;
  80. -moz-box-shadow: #666 0px 2px 3px;
  81.  
  82. }
  83. #pagina {
  84.   padding-top: 0px;
  85.   padding-right: 0px;
  86.   padding-bottom: 0px;
  87.   padding-left: 0px;
  88.   width: auto;
  89.   min-width: 1000px;
  90.   margin-left: auto;
  91.   margin-right: auto;
  92. }
  93. #redondo {
  94.   width: 100px;
  95.   height: 100px;
  96.   margin-top: 5px;
  97.   margin-right: 5px;
  98.   margin-bottom: 5px;
  99.   margin-left: 5px;
  100.   background-color: rgb(255, 255, 51);
  101.   border-top-width: 1px;
  102.   border-top-style: solid;
  103.   border-top-color: rgb(0, 0, 0);
  104.   border-right-width: 1px;
  105.   border-right-style: solid;
  106.   border-right-color: rgb(0, 0, 0);
  107.   border-bottom-width: 1px;
  108.   border-bottom-style: solid;
  109.   border-bottom-color: rgb(0, 0, 0);
  110.   border-left-width: 1px;
  111.   border-left-style: solid;
  112.   border-left-color: rgb(0, 0, 0);
  113.   -webkit-border-radius: 50px 50px 50px 50px;
  114.   border-radius: 50px 50px 50px 50px;
  115. }
  116. #contenido {
  117.   margin-left: auto;
  118.   max-width: 1400px;
  119.   margin-top: 50px;
  120.   margin-right: auto;
  121.   width: 100%;
  122.   min-width: 740px;
  123. }
  124. #izquierda {
  125.   width: 10%;
  126.   height: 500px;
  127.   margin-bottom: 15px;
  128.   background-color: transparent;
  129.   float: left;
  130. }
  131. #derecha {
  132.   margin-bottom: 15px;
  133.   width: 10%;
  134.   background-color: transparent;
  135.   height: 500px;
  136.   float: right;
  137. }
  138. #centro {
  139.   margin-bottom: 15px;
  140.   width: 20%;
  141.   background-color: transparent;
  142.   height: 500px;
  143.   align: center;
  144. }
  145.  
  146. #pie {
  147. align: center;
  148.   margin-right: auto;
  149.   margin-left: auto;
  150.   border: 1px solid #000;
  151.   -moz-border-radius:15px 15px 15px 15px;
  152.   -ms-border-radius: 15px 15px 15px 15px;
  153.   -webkit-border-radius: 15px 15px 15px 15px;
  154.   border-radius: 15px 15px 15px 15px;
  155.   background-color: #000;
  156.   margin-bottom: 5px;
  157.   padding-top: 15px;
  158.   padding-bottom: 15px;
  159.   width: 80%;
  160.   clear: both;
  161. }
  162. #dktc {
  163.   width: 348px;
  164.   height: 304px;
  165.   border-top-width: 6px;
  166.   border-top-style: solid;
  167.   border-top-color: rgb(0, 0, 0);
  168.   border-right-width: 6px;
  169.   border-right-style: solid;
  170.   border-right-color: rgb(0, 0, 0);
  171.   border-bottom-width: 6px;
  172.   border-bottom-style: solid;
  173.   border-bottom-color: rgb(0, 0, 0);
  174.   border-left-width: 6px;
  175.   border-left-style: solid;
  176.   border-left-color: rgb(0, 0, 0);
  177.   -webkit-border-radius: 15px 15px 15px 15px;
  178.   border-radius: 15px 15px 15px 15px;
  179. }
  180. #apDiv1 {
  181.   background-color: rgb(0, 102, 153);
  182.   width: 80%;
  183.   z-index: 0;
  184.   position: relative;
  185.   height: auto;
  186.   visibility: hidden;
  187.   border-top-width: 1px;
  188.   border-top-style: solid;
  189.   border-top-color: rgb(0, 0, 0);
  190.   border-right-width: 1px;
  191.   border-right-style: solid;
  192.   border-right-color: rgb(0, 0, 0);
  193.   border-bottom-width: 1px;
  194.   border-bottom-style: solid;
  195.   border-bottom-color: rgb(0, 0, 0);
  196.   border-left-width: 1px;
  197.   border-left-style: solid;
  198.   border-left-color: rgb(0, 0, 0);
  199.   -webkit-border-radius: 15px 15px 15px 15px;
  200.   border-radius: 15px 15px 15px 15px;
  201. }
  202. #content {
  203.    align: center;
  204.   margin-left: auto;
  205.   max-width: 1400px;
  206.   margin-top: 50px;
  207.   margin-right: auto;
  208.   min-width: 740px;
  209. -moz-box-shadow: 1px 1px 10px #000;
  210.     -webkit-box-shadow: 1px 1px 5px #000;
  211.     box-shadow: 1px 1px 10px #000;
  212. -ms-box-shadow: 1px 1px 10px #000;
  213.  
  214.   -moz-border-radius:10px 10px 10px 10px;
  215.   -ms-border-radius: 10px 10px 10px 10px;
  216.   -webkit-border-radius: 10px 10px 10px 10px;
  217.   border-radius: 10px 10px 10px 10px;
  218.   width: 80%;
  219.   background-color: #fff;
  220.  margin-bottom: 15px;
  221. }
  222. .categorias {
  223.  
  224. padding-top: 12px;
  225. font-size: 20px;
  226. }
  227. a:link {
  228. color: #bdb9b9;
  229.     text-decoration: none;
  230. }
  231.  
  232. a:visited {
  233.     color: #bdb9b9;
  234.     text-decoration: none;
  235. }
  236. a:hover, a:active, a:focus {
  237.     color:#bdb9b9;
  238. text-decoration:underline;
  239. }

Este es el resultado que obtengo:


El resultado que queria obtener era: Izquierda, Centro y Derecha todos a la misma altura. Cual es el problema??