Problemas con elementos de pagina web

nanotime · #1 (**permalink**) 10/03/2013, 22:52

Bueno ya esto es (creo yo) la ultima etapa de esta pagina estática que estoy haciendo, pero tengo ciertos problemillas, mas que todo con los distintos tipos de pantalla.

Primero que nada, no es que la pagina debe ser responsiva porque no se pretende extender a moviles o tablets en esta etapa, solo a computadoras. Pero yo soy novato y no conozco bien las resoluciones aun... lo que pasa acá es que no logro hacer que el fondo de pantalla ocupe todo el ancho y largo de la misma (aunque use background-size: 100% 100%;) ya en las pruebas mis clientes me dijeron que no ocupaba todo el ancho o el largo de la pantalla.

La segunda es que, como verán, a veces el reproductor y la imagen de arriba se salen del marco del fondo y esa no es la idea. Por los momentos como dije, no se busca un efecto responsivo, solo se busca que se vea bien en pantallas normales (17" en adelante) y aunque en mi pc con una pantalla de 1600x900 se ve bien, en las de ellos se ve recortado el fondo o salidos del fondo los elementos que mencioné. También me dicen que el logo del centro no se ve, pues, centrado (con la espiral) pero cuando trato de arreglar eso todo se deforma

Pueden ver el resultado actual en monociclo

Y el codigo como tal en [github

Podrían hecharme la mano al menos detectando los errores?

ArturoGallegos · #2 (**permalink**) 11/03/2013, 00:30

por donde empezar... creo que lo mejor sera mandarte a repasar HTML y CSS

tu principal problema es que usas position:absolute inadecuadamente existen mejores métodos para centrar las cosas y rematando que es html5 no es soportado por IE7 e IE8

en cuanto al fondo puedes colocar la imagen directamente en el body al inicio con posición absoluta y z-index -1 para que quede abajo de todo, esta de mas aclarar que tienes que usar width y height al 100%

nanotime · #3 (**permalink**) 11/03/2013, 01:26

Lo de repasar lo se, no dije que era un experto, estoy aprendiendo sobre la marcha.

Voy a probar lo que me dices

pzin · #4 (**permalink**) 11/03/2013, 01:57

Yo pondría la imagen como fondo de verdad, no como un elemento más.

Ya hace un par de días se venía haciendo la misma cosa, ayer otra vez y ahora otro. Me pregunto quien andará diciendo que es bueno hacerlo de esa manera...

Ponlo como fondo de body, usa background-size: cover y ya está.

nanotime · #5 (**permalink**) 11/03/2013, 12:34

Me gustaria que vieran esto... no se por que pasa, estuve siguiendo lo que me dijeron pero ahora se comporta extraño totalmente.

Le quité la imagen de centro para luego ponerla de fondo (no lo he hecho porque de la manera que vi, no funciona) les dejo el codigo como lo estoy moviendo para ver que tal.

Lo que no me explico es como puede afectar al fondo que se supone que es independiente, la eliminacion de un div con imagenes que no tienen nada que ver, y también eliminé los estilos relacionados a ellas para ver que pasaba... ahí lo podrán ver

https://github.com/nanotime/monocilo

pzin · #6 (**permalink**) 11/03/2013, 15:28

¿Tan difícil es poner el código aquí? En serio... Entre que te mandan a descargarlo, a mirarlo en github y espérate qué mas historias salen...

A mi no me anima nada si tengo que irme a otro lado a mirar el código. Pero aparte de mi, luego el día de mañana esos links de descargas desaparecen o sacan el repositorio de ahí y el que venga luego a resolver una duda leyendo el tema, se va a quedar con la duda porque no hay código.

Lo mejor, para todos, pienso, es que se ponga el código aquí a pelo, y como mucho si hace falta un código funcional —que a veces se requiere— pues que se ponga la URL del código funcionando. Pero lo básico y primero es pegar el código aquí en el foro.

nanotime · #7 (**permalink**) 11/03/2013, 16:07

Generalmente piden que no lo pongan en los foros por comodidad, pero vamos, lo pongo y ya no es tanto.

Ahora mismo hice algunos cambios y medio funciona:

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head lang="es">
    <meta charset="UTF-8">
    <title>Monociclo</title>
    <link href='http://fonts.googleapis.com/css?family=Patrick+Hand+SC|Freckle+Face|Julius+Sans+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/duxer.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <script type="text/javascript" src="js/tools/jquery-1.7.2.min.js"></script>
    <script src="js/tools/jquery.tools.min.js"></script>
    <script type="text/javascript" src="js/theduxer.js"></script>
</head>
<body>
        
    <aside id="social">
        <ul>
            <li><a href="http://www.facebook.com/pages/Monociclo/144774022254202?ref=ts&fref=ts"><i class="icon-facebook-sign"></i></a></li>
            <li><a href="https://twitter.com/_Monociclo"><i class="icon-twitter-sign"></i></a></li>
        </ul>
    </aside>
 
    <section id="player" data-autoplay="1" data-loop="1">
            <section id="player">
                    
                <section id="controls">
 
                    <section id="songTitle">
                        <span>Titulo de la Cancion</span>
                    </section>
 
                    <section id="playertrols">
                        
                        <div id="plauseStop">
                            <div id="plause"></div>
                            <div id="stop"></div>
                        </div>
 
                        <div id="progressBar">
                            <div id="timeLoaded"></div>
                            <div id="timePlayed"></div>
                        </div>
 
                    </section>
 
                    <section id="volumeTime">
                        <input type="range" min="0" max="1" step="0.1" value="0.5"/>
 
                        <div id="timeStatus">
                            <time id="played">00:00</time>
                            <span>/</span>
                            <time id="totalTime">00:00</time>
                        </div>
                    </section>
                </section>
 
                <section id="playlist">
 
                    <section id="tracks">
                        <article class="track trackPlaying" data-source="tracks/01_Pista">
                            <span>Libertad</span>
                        </article>
                        <article class="track" data-source="tracks/02_Pista">
                            <span>15 y ultimo</span>
                        </article>
                        <article class="track" data-source="tracks/03_Pista">
                            <span>Infiel</span>
                        </article>
                        <article class="track" data-source="tracks/04_Pista">
                            <span>Todo bien</span>
                        </article>
                        <article class="track" data-source="tracks/05_Pista">
                            <span>Gusano</span>
                        </article>
                        <article class="track" data-source="tracks/06_Pista">
                            <span>Alegría</span>
                        </article>
                        <article class="track" data-source="tracks/07_Pista">
                            <span>El rockero</span>
                        </article>
                        <article class="track" data-source="tracks/08_Pista">
                            <span>Un beso</span>
                        </article>
                        <article class="track" data-source="tracks/09_Pista">
                            <span>La última</span>
                        </article>
                        <article class="track" data-source="tracks/10_Pista">
                            <span>Nana</span>
                        </article>
                        <article class="track" data-source="tracks/11_Pista">
                            <span>Monociclo</span>
                        </article>
                    </section>
 
                    <section id="playlistControl">
                        <span>&#x25B2;</span>
                    </section>
 
                </section>
            </section>
        </section>
 
    <!-- <div id="currentTime">
        <time>00:00</time>
    </div> -->
 
    
</body>
</html>

Ese es html que limpié de imagenes.

Código CSS:

Ver originalbody
{
    background: url(../img/espiral.png);
    background-repeat: no-repeat;
    background-size: cover;
}
 
a
{
    color: #FFF;
    text-decoration: none;
}
 
 
#social
{
    color:#FFF;
    float: right;
    position: absolute;
    top: 5px;
}
 
#social ul li
{
    font-size: 4.3em;
    list-style: none;
    display: inline-block;
}

reconstruyendo el CSS...

Código CSS:

Ver original#player
{
    background:rgba(56,56,56,0.5);
    border-radius: 1em;
    float: right;
    width:400px;
}

La ubicacion del player actualmente.

Ahora bien mi problema con el fondo no lo entiendo, cuando le pongo 100% 100% se deforma totalmente, no cubre nada, se vuelve puras rayas extrañas sin sentido y cuando le pongo cover, si, cubre la pantalla, pero cuando la redimensiono un poco, no ocupa la pantalla y hace que se salga el reproductor...