Tema: problemas ejercicio CSS
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/12/2015, 14:14
Avatar de BramSt
BramSt
 
Fecha de Ingreso: abril-2015
Mensajes: 117
Antigüedad: 9 años
Puntos: 5
problemas ejercicio CSS
Hola a todos, y felices fiestas.

Estoy haciendo 1º de DAW, y mi profesora nos ha mandado para navidades un ejercicio que me está volviendo loco. Lo mejor es que como "regalo de Navidad" nos ha dado parte del código y ni por esas me funciona...

El ejercicio es el siguiente:



Según ella, para meter esos backgrounds a los lados, una opción es meter uno de los backgrounds en la etiqueta HTML y la otra en el body... pero cuando hago eso, a mí no me funciona, sólo me muestra uno de los backgrounds en pantalla.

Ya digo que al final nos ha dado esa parte del código y es la siguiente:

Código CSS: 
Ver original
  1. html {
  2.   background: url("matrix.png") black repeat-y;
  3.   color: white;
  4.   font-family: monospace;
  5.   padding-left: 140px;
  6.   text-align: justify;
  7. }
  8.  
  9. body {
  10.   background: url("matrix2.png") repeat-y right;
  11.   margin: 0;
  12.   padding-right: 140px;
  13. }

Con el HTML "virgen", es decir:

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>
  4.         </title>
  5.         <link rel="stylesheet" type="text/css" href="Estilos.css"/>
  6.         
  7.     </head>
  8.     <body>
  9.     
  10.         
  11.         
  12.             
  13.         
  14.         
  15.         
  16.         
  17.     
  18.         
  19.     </body>
  20. </html>

Lo que me sale es esto:



¿Qué hago mal? Porque a otros compañeros parece que sí les funciona...


Por otro lado, intentando buscarme la vida por mi cuenta, conseguí hacer esto:



Mediante este código, sudando la gota gorda y me imagino que será una guarrada del 15...

Código CSS: 
Ver original
  1. html
  2.  
  3. {
  4.     height:100%;
  5. }
  6.  
  7.  
  8. body
  9. {
  10.     background-color:black;
  11.     height:100%;
  12.     min-width:100%;
  13.     font-family:monospace;
  14.     
  15. }
  16.  
  17. h2
  18. {
  19.     color:white;
  20.     font-size:200%;
  21.     background-color:green;
  22.     border:1px solid white;
  23.     margin:0;
  24.     position:relative;
  25.     left:40px;
  26.     width:1000px;
  27.     padding-left:5px;
  28.     padding-right:5px;
  29. }
  30.  
  31. p
  32. {
  33.     font-size:120%;
  34.     text-align:justify;
  35. }
  36.  
  37.  h1
  38. {
  39.     color: #04C204;
  40.     font-size:250%;
  41.     letter-spacing:0.5em;
  42.     
  43.     text-decoration:underline;
  44.     
  45.     
  46.     
  47. }
  48.  
  49. #izquierdo
  50. {
  51.     background:url('matrix.png') black repeat-y;
  52.     background-attachment:scroll;
  53.     float:left;
  54.     
  55.     height:100%;
  56.     width:110px;
  57.     
  58. }
  59.  
  60. #derecho
  61. {
  62.     background:url('matrix2.png') black repeat-y right;
  63.     
  64.     float:right;
  65.     height:100%;
  66.     width:110px;
  67. }
  68.  
  69.  
  70.  
  71. #centro
  72. {
  73.     padding-top:30px;
  74.     padding-left:130px;
  75.     position:relative;
  76.     margin:0;
  77.     
  78. }
  79.  
  80. #cabecera
  81. {
  82.     width:59%;
  83.     position:relative;
  84.     left:190px;
  85.     
  86.     margin:30px;
  87.     
  88.     border-bottom:1px solid #04C204;
  89.     
  90.     
  91.     
  92. }
  93.     
  94.  
  95.  
  96.  
  97. #cajapong
  98. {
  99.     border:5px solid #04C204;
  100.     margin:0;
  101.     padding:0;
  102.     float:right;
  103.     margin:10px;
  104.     
  105. }
  106.  
  107. #imgpong
  108. {
  109.     width:300px;
  110.     height:225px;
  111.     border:5px solid white;
  112.     float:right;
  113.     background:url('pong.png') no-repeat;
  114.     margin:0;
  115. }
  116.  
  117. #pong
  118. {
  119.     border:1px solid white;
  120.     color:white;
  121.     position:relative;
  122.     left:40px;
  123.     width:1000px;
  124.     
  125.     padding-left:5px;
  126.     padding-right:5px;
  127.     
  128.     
  129. }
  130.  
  131. #imgspace
  132. {
  133.     width:250px;
  134.     height:300px;
  135.     border:5px solid white;
  136.     position:relative;
  137.     left:30px;
  138.     background:url('space_invaders.png') no-repeat;
  139.     margin:0;
  140. }


Con este HTML:

Código HTML: 
Ver original
  1. <html>
  2.     <head>
  3.         <title>
  4.         </title>
  5.         <link rel="stylesheet" type="text/css" href="Estilos.css"/>
  6.         
  7.     </head>
  8.     <body>
  9.     
  10.     
  11.     
  12.         
  13.         
  14.         <div id="izquierdo">
  15.         
  16.         
  17.         </div>
  18.         
  19.         
  20.             
  21.         
  22.         
  23.         <div id="derecho">
  24.         
  25.         
  26.         </div>
  27.         
  28.         <div id="centro">
  29.         
  30.             <div id="cabecera">
  31.             
  32.                 <h1>VIDEOJUEGOS CLÁSICOS</h1>
  33.             
  34.             
  35.             
  36.             
  37.             </div>
  38.             <h2>Pong</h2>
  39.             <div id="pong">
  40.                 
  41.                 <div id="cajapong">
  42.                     <div id="imgpong">
  43.                     </div>
  44.                 
  45.                 </div>
  46.                 <p>
  47.                 Pong (o Tele-Pong) fue un videojuego de la primera generación de videoconsolas publicado por Atari, creado por Nolan Bushnell y lanzado el 29 de noviembre de 1972. Pong está basado en el deporte de tenis de mesa (o ping pong). La palabra Pong es una marca registrada por Atari Interactive, mientras que la palabra genérica «pong» es usada para describir el género de videojuegos «bate y bola». La popularidad de Pong dio lugar a una demanda de infracción de patentes y ganada por parte de los fabricantes de Magnavox Odyssey, que poseía un juego similar.
  48.                 </p>
  49.                 <p>Pong es un juego de deportes en dos dimensiones que simula un tenis de mesa. El jugador controla en el juego una paleta moviéndola verticalmente en la parte izquierda de la pantalla, y puede competir tanto contra un oponente controlado por computadora, como con otro jugador humano que controla una segunda paleta en la parte opuesta. Los jugadores pueden usar las paletas para pegarle a la pelota hacia un lado u otro. El objetivo consiste en que uno de los jugadores consiga más puntos que el oponente al finalizar el juego. Estos puntos se obtienen cuando el jugador adversario falla al devolver la pelota.</p>
  50.                 </div>
  51.         
  52.         
  53.             <br/>
  54.             <br/>
  55.             <br/>
  56.             
  57.             <div id="imgspace">
  58.             
  59.             
  60.             
  61.             </div>
  62.         
  63.         
  64.         </div>
  65.         
  66.     
  67.         
  68.     </body>
  69. </html>


Y uno de los problemas que me encuentro en ese, me imagino desastroso código, es que los background laterales, cuando bajo el scroll de la pantalla (para ver la imagen del space invaders), los background no se repiten...




¿Por dónde debería empezar para arreglar todo esto? ¿Qué debería de entender y no lo hago?

La verdad que me parece que estoy más perdido en esta asignatura que en todas las demás, y eso que dicen que es más fácil que programar...