problemas ejercicio CSS

BramSt · #1 (**permalink**) 23/12/2015, 14:14

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 originalhtml {
  background: url("matrix.png") black repeat-y;
  color: white;
  font-family: monospace;
  padding-left: 140px;
  text-align: justify;
}
 
body {
  background: url("matrix2.png") repeat-y right;
  margin: 0;
  padding-right: 140px;
}

Con el HTML "virgen", es decir:

Código HTML:

Ver original<html>
    <head>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="Estilos.css"/>
        
    </head>
    <body>
    
        
        
            
        
        
        
        
    
        
    </body>
</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 originalhtml
 
{
    height:100%;
}
 
 
body
{
    background-color:black;
    height:100%;
    min-width:100%;
    font-family:monospace;
    
}
 
h2
{
    color:white;
    font-size:200%;
    background-color:green;
    border:1px solid white;
    margin:0;
    position:relative;
    left:40px;
    width:1000px;
    padding-left:5px;
    padding-right:5px;
}
 
p
{
    font-size:120%;
    text-align:justify;
}
 
 h1
{
    color: #04C204;
    font-size:250%;
    letter-spacing:0.5em;
    
    text-decoration:underline;
    
    
    
}
 
#izquierdo
{
    background:url('matrix.png') black repeat-y;
    background-attachment:scroll;
    float:left;
    
    height:100%;
    width:110px;
    
}
 
#derecho
{
    background:url('matrix2.png') black repeat-y right;
    
    float:right;
    height:100%;
    width:110px;
}
 
 
 
#centro
{
    padding-top:30px;
    padding-left:130px;
    position:relative;
    margin:0;
    
}
 
#cabecera
{
    width:59%;
    position:relative;
    left:190px;
    
    margin:30px;
    
    border-bottom:1px solid #04C204;
    
    
    
}
    
 
 
 
#cajapong
{
    border:5px solid #04C204;
    margin:0;
    padding:0;
    float:right;
    margin:10px;
    
}
 
#imgpong
{
    width:300px;
    height:225px;
    border:5px solid white;
    float:right;
    background:url('pong.png') no-repeat;
    margin:0;
}
 
#pong
{
    border:1px solid white;
    color:white;
    position:relative;
    left:40px;
    width:1000px;
    
    padding-left:5px;
    padding-right:5px;
    
    
}
 
#imgspace
{
    width:250px;
    height:300px;
    border:5px solid white;
    position:relative;
    left:30px;
    background:url('space_invaders.png') no-repeat;
    margin:0;
}

Con este HTML:

Código HTML:

Ver original<html>
    <head>
        <title>
        </title>
        <link rel="stylesheet" type="text/css" href="Estilos.css"/>
        
    </head>
    <body>
    
    
    
        
        
        <div id="izquierdo">
        
        
        </div>
        
        
            
        
        
        <div id="derecho">
        
        
        </div>
        
        <div id="centro">
        
            <div id="cabecera">
            
                <h1>VIDEOJUEGOS CLÁSICOS</h1>
            
            
            
            
            </div>
            <h2>Pong</h2>
            <div id="pong">
                
                <div id="cajapong">
                    <div id="imgpong">
                    </div>
                
                </div>
                <p>
                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.
                </p>
                <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>
                </div>
        
        
            <br/>
            <br/>
            <br/>
            
            <div id="imgspace">
            
            
            
            </div>
        
        
        </div>
        
    
        
    </body>
</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...

DesgraciadoGabo · #2 (**permalink**) 23/12/2015, 18:09

Lo ideal es lo siguiente amigo:
1.- Para tu fondo, colocalo en el body por ejemplo:

Código CSS:

Ver originalbody{
  background:url(laqueseatuimagen.jpg);
  margin:0;
  padding:0;
}

No veo la necesidad de que tengas que colocar de un lado un fondo y del otro una segunda imagen, además que vas a tener muchos problemas en otras resoluciones.

2.- Coloca un container o algo similar incluso un main para hacer la plasta negra, por ejemplo:

Código HTML:

Ver original<!doctype html>
<html>
<head>
<!-- bla bla bla...-->
</head>
<body>
<main> <!--o <div id="container">-->
Toda tu información
</main>
</body>
</html>

y en tu css solo al main o #container le poner un width 960px por decir alguna cosa y desde luego de poner un background:black o #000 para que se vea la plasta negra, espero haberme explicado amigo sino cualquier duda aquí estamos para ayudarle, saludos!

BramSt · #3 (**permalink**) 23/12/2015, 19:03

Muchas gracias compañero.

La etiqueta main es la primera vez que la veo, pero creo entender que entonces para hacer los backgrounds no es buena idea andar metiendo divs flotantes o algo así? Es que entonces no sé cómo meterlos... recuerda que tengo uno a cada lado de la web, y las soluciones que da mi profesora no me funcionan, no sé por qué...

EDIT: Poco a poco estoy encontrando la solución a algunos de los problemas, como el del background, y creo que empiezo a entender; cuando saque un rato editaré el post principal con las soluciones y posibles explicaciones por si pueden ayudar a alguien más (y por si alquien quiere corregirlas, claro).

Un saludo.