Ayuda Web personal.

[JonaLamper]

Up 

[EFEX]

Donde esta la libreria JQuery?

[JonaLamper]

Uhm... librería? ^^! no sé nada de JQuery jajaja Tengo los tres archivos en la misma carpeta O.o

[EFEX]

Ok, ahora me doy cuenta que quieres copiar un ejemplo de codepen.. veras es mas complicadito que un copy paste, ademas de necesitar JQuery tambien necesitas instalar sass (http://sass-lang.com/ ).

Esto se va del tema, primero aprende lo basico y te podemos ayudar mientras aprendes, pero si quieres copiar y pegar lo que encuentres sin aprender nada... cual es el punto entonces.

[JonaLamper]

Bueno, tampoco es exactamente así. Yo vi un ejemplo que había en esa página (solo tenía HTML y CSS) y me gustó la animación. La copie literalmente, pero después me tuve que pelear para arreglarlo y ponerlo a mi manera. Cambie los parámetros del CSS y tuve que ir uno por uno modificándolos para que quedara justo como debía quedar: a mi gusto.

Realmente sí es copiar, pero es copiar y también entender qué hace cada cosa.

El problema vino cuando me gustó el efecto ese que puse anteriormente que incluía JQuery... Entonces pensé que haciendo referencia al archivo JQuery (al igual que se hace referencia al archivo CSS) era suficiente. Pero veo que no es así  

[JonaLamper]

Una duda: estoy intentando que la web se vea igual en cualquier resolución y se me ha ocurrido la idea de hacer los alineamientos con % de esta forma:

Código (css) [Seleccionar] Expandir

.a {
position: absolute;
top: 15%;
left: 11%;
}

En vez de esta:

Código (css) [Seleccionar] Expandir

.a {
position: absolute;
top: 15px;
left: 11px;
}

Parece que funciona, pero... es buena idea? No sé por qué me da que voy a tener problemas cuando se vuelva más complejo  

[kaiserr]

Yo cuando quiero comprobar el responsive de una web reduzco el tamaño de la ventana del navegador o utilizo esta web http://quirktools.com/screenfly/

Cuando utilizas px, el elemento sera de ese tamaño siempre. Quizas cuando lo veas en resoluciones mas pequeñas te crea un scroll, por eso tambien se utiliza lo que te pusieron en este tema:

Código (css) [Seleccionar] Expandir


/* Resoluciones 800x600 */
@media screen and (min-width: 600px) and (max-width: 800px) {
   #container{
       /* Las propiedades que definas se sobre escriben */
   }
}

por mi parte utilizo poco la posicion absoluta, aunque no se que es lo que quieres hacer xD

[JonaLamper]

Llevo un buen rato con una cosa muy sencilla que no me sale y me esta mosqueando. Tengo un div y dentro de él, hay una frase y una imagen gris. Lo que pretendo es poner la imagen detrás del texto... a ver si alguien ve el fallo porque me tiene hasta el gorro.

Código (html4strict) [Seleccionar] Expandir

<div id="bot">
<p class="descripcion">Linker te ofrece una nueva forma de organizar Internet a tu manera</p>
<img class="pie" src="subfondo3.jpg">
</div>

Código (css) [Seleccionar] Expandir

/*Div Bot*/
#bot {
position:absolute;
width:100%;
height:25%;
        left:0%;
        top:75%;
}

#bot p {
position:relative;
        text-align: center;
font-weight: bold;
font-size: 30px;
color: #004AAB;
font: small-caps 100%/200% serif;
        left:0%;
        top:0%;
z-index: 2;
}

#bot .pie {
position:relative;
    background: url(subfondo3.jpg) repeat #fefefe
z-index: 1;
width:100%;
height:45%;
        left:0%;
        top:0%;
}


Adjunto una imagen de cómo me sale a mí:

[kaiserr]

pon la imagen con position:absolute o pon la imagen de background en el css

[JonaLamper]

Gracias. Cuando pensé en poner position: absolute; creía que era absoluto en cuanto al body, no en cuanto al div que lo contenía. E ahí el fallo