Foros del Web - Ver Mensaje Individual

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...