Foros del Web » Creando para Internet » HTML »

Problema con html5

Estas en el tema de Problema con html5 en el foro de HTML en Foros del Web. Hola gente, vereis, es la primera página web que hago, sin embargo tengo bastante idea sobre la teoria, como usarlo, sintaxis, etc etc. He querido ...
  #1 (permalink)  
Antiguo 16/08/2011, 16:43
 
Fecha de Ingreso: marzo-2011
Mensajes: 54
Antigüedad: 5 años, 9 meses
Puntos: 11
Pregunta Problema con html5

Hola gente, vereis, es la primera página web que hago, sin embargo tengo bastante idea sobre la teoria, como usarlo, sintaxis, etc etc.
He querido hacer la web en html5, por ahora solo llevo el principio, casi nada, ni imagenes ni nada, solo el posicionamiento de cada cosa, pero estoy teniendo bastantes problemas y me gustaria que le echarais un ojo :)
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.     <head>
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.         <title>e-links</title>
  5.         <link rel="shortcut icon" href="favicon.jpg"/>
  6.         <link rel="stylesheet" href="style.css" media="screen" type="text/css"/>
  7.     </head>
  8.     <body>
  9.         <header id="cabecera">
  10.             <h1>e-links</h1>
  11.             <h2>Comparte tus links y gana dinero</h2>
  12.         </header>
  13.         <nav>
  14.             <ul>
  15.                 <li><a href="#">Inicio</a></li>
  16.                 <li><a href="#">Registrate</a></li>
  17.                 <li><a href="#">¿Quienes somos?</a></li>
  18.                 <li><a href="#">Logueate</a></li>
  19.             </ul>
  20.         </nav>
  21.         <div id="principal">
  22.             <section id="intro">
  23.                 <div id="papel">
  24.                     <!-- Imagen -->
  25.                     <img src="post-it.png"></img>
  26.                 </div>
  27.                 <div>
  28.                     <header>
  29.                         <p>Comparte</p>
  30.                     </header>
  31.                     <div id="drop-zone">
  32.                         <script>
  33.                             var dropzone = document.querySelector('#drop-zone');
  34.                            
  35.                             dropzone.addEventListener('dragover', function(event){
  36.                                 if(event.preventDefault) event.preventDefault();
  37.                                 event.dataTransfer.dropEffect = 'copy';
  38.                                 return false;
  39.                             }, false);
  40.                            
  41.                             dropzone.addEventListener('drop', function(event){
  42.                                 if(event.preventDefault) event.preventDefault();
  43.                                
  44.                                 this.innerHTML = '';
  45.                                 if(event.dataTransfer.getData('text')){
  46.                                     this.innerHTML = event.dataTransfer.getData('text');
  47.                                 }else if (event.dataTransfer.getData('text/plain')){
  48.                                     this.innerHTML = event.dataTransfer.getData('text/plain');
  49.                                 }
  50.                                
  51.                                 return false;
  52.                             }, false);
  53.                         </script>
  54.                     </div>
  55.                 </div>
  56.             </section>
  57.             <section>
  58.                 <header>
  59.                     <p>¿Como funciona?</p>
  60.                 </header>
  61.                     <video controls="true" loop="false" onended="this.stop()">
  62.                         <source src="http://studio.html5rocks.com/samples/video-cube/Chrome_ImF.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
  63.                     </video>
  64.             </section>
  65.             <section>
  66.                 <header>
  67.                     <p>Comentarios</p>
  68.                 </header>
  69.                 <!-- Tabla con comentarios -->
  70.             </section>
  71.         </div>
  72.         <footer>
  73.             <ul>
  74.                 <li><small><a href="#">¿Quienes somos?</a></small></li>
  75.                 <li><small><a href="#">Política de privacidad</a></small></li>
  76.                 <li><small><a href="#">Como ganar dinero</a></small></li>
  77.             </ul>
  78.         </footer>
  79.     </body>
  80. </html>

Código CSS:
Ver original
  1. div{
  2.     border: solid red 2px;
  3. }
  4. /*-------
  5. -----*/
  6. * {
  7.     margin: 0;
  8.     padding: 0;
  9. }
  10.  
  11. section, aside, header, footer, nav, article {
  12.     display: block;
  13. }
  14.  
  15. body{
  16.     background: white;
  17. }
  18. /*----------
  19. --> Header
  20. ----------*/
  21. header#cabecera{
  22.     background: #897a7a;
  23. }
  24.     header h1{
  25.         text-align: center;
  26.     }
  27.    
  28. /*----------
  29. -->Nav
  30. ----------*/
  31. nav{
  32.     width: 100%;
  33.     position: absolute;
  34.     left: 0;
  35.     background-color: orange;
  36.     padding-left: 15%;
  37.     padding-right: 15%;
  38. }
  39.     nav ul{
  40.         padding: 3px;
  41.         list-style: none;
  42.     }
  43.         nav ul li{
  44.            
  45.             text-align: center;
  46.             float: left;
  47.             margin: 10px 30px 10px 30px;
  48.         }
  49.             nav ul li a{
  50.                 display: block;
  51.                 text-decoration: none;
  52.             }
  53.  
  54.    
  55. /*----------
  56. -->Main div
  57. ----------*/
  58.  
  59. div#principal{
  60.     margin: 55px 15% 0 15%;
  61. }
  62.  
  63. section#intro{
  64.     border: solid black;
  65.     width: 100%;    
  66. }
  67.     section#intro div{
  68.         float: left;
  69.         margin: auto 5% auto 5%;
  70.     }
  71.    
  72. #drop-zone{
  73.     width : 200px;
  74.     height: 200px;
  75. }
  76.  
  77. /*---------
  78. -->Footer
  79. ---------*/
  80. footer{
  81.     background-color: #897a7a;
  82.     padding: 0 10% 0 10%;
  83. }
  84.     footer ul{
  85.         list-style: none;
  86.     }
  87.         footer ul li{
  88.             float: left;
  89.             margin-right: 10%;
  90.             margin-top: 2%;
  91.         }
  92.             footer ul li a{
  93.                 display:block;
  94.                 text-decoration: none;
  95.             }
La verdad es que hay varias cosas que me tienen pertubado en mi código:
  1. Aunque le ponga un background al footer el color del footer no cambia mientras tenga definido el estilo de la lista del footer (solo con atributos sobre el texto)
  2. Le he puesto borde a los div y a un section para saber donde estan, y el section (la linea de negro), aunque tiene contenido entre <section></section> lo que se supone que deberia estar dentro aparece debajo de este.
  3. El div#principal no respeta la posición del nav, y se superpone con esta, (ahi no se vera porque le tengo puesto un margin-top.
  4. Lo ultimo, aunque no es tan importante, es que no consigo hacer para que el section#intro me ocupe todo el ancho de la pagina, aunque le ponga width:100% el texto que se supone que esta fuera aparece a la derecha del section.

Si lo necesitais os marco las zonas que he señalado antes xD
OJALA PODAIS AYUDARME! :)
  #2 (permalink)  
Antiguo 16/08/2011, 17:32
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 8 años, 4 meses
Puntos: 1530
Respuesta: Problema con html5

lo que no entiendo es esto:

Código CSS:
Ver original
  1. section, aside, header, footer, nav, article {
  2.     display: block;
  3. }

¿porque todos estos elementos tienen que ser en bloque si ya lo son?.

antes de empezar con HTML5 debes de consultar manuales de (x)HTML sobre todo en materia de maquetación web, box model, layout y demás.

consulta:
http://librosweb.es/xhtml/index.html
http://librosweb.es/css/index.html
http://librosweb.es/referencia/css/index.html
http://librosweb.es/css_avanzado/
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 16/08/2011, 17:46
 
Fecha de Ingreso: marzo-2011
Mensajes: 54
Antigüedad: 5 años, 9 meses
Puntos: 11
Respuesta: Problema con html5

Eso es porque he estado leyendo este minitutorial http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/ y lo usan segun pone en el comentario del css "para decirle al navegador que lo renderize como un bloque"

Gracias por los links, por cierto, he resuelto lo del section con el borde negro cambiando id="intro" por class="intro"
  #4 (permalink)  
Antiguo 19/08/2011, 03:29
Avatar de cvander
Moderador
 
Fecha de Ingreso: abril-2001
Ubicación: Ciudadano del mundo
Mensajes: 13.630
Antigüedad: 15 años, 7 meses
Puntos: 1783
Respuesta: Problema con html5

El tema es que algunos navegadores viejos no van a entender que esos son bloques y por ello es útil declararlos.

Otra forma de saltarse esto es utilizando el HTML5 enabling script que además recomiendo muchísimo en todo proyecto que tenga HTML5.

http://remysharp.com/2009/01/07/html5-enabling-script/
__________________
- Christian Van Der Henst
Platzi

Etiquetas: html5
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 16:01.