Comunidad de diseño web y desarrollo en internet online

guia html5 o css3 para ajustar los divs con porcentajes

Citar            
MensajeEscrito el 19 Dic 2012 04:24 am

wolas, ustedes no se merecen que les hable de esta forma, pero ando de perros... en fin:



Ya no soy tan nuevo en el mundo del css, ni del html y actualmente estudio el html5, soy diseñador gráfico y no soy ingeniero, aclaro. Solo (por ahora) me dedico al diseño y maquetación frontend y en el futuro espero al backend (muy ilusamente)

Pero mi problema es con el HTML5 y el responsive design en estos momentos Y DESEO MATAR!!! porque me siento usando un estándar viejo para ajustar los divs a la resolución de la pantalla del dispositivo y antes de perder mi empleo que disfruto y no me siento esclavizado, cosa que tanto me costo conseguir y porque ser freelance ya no es tan guay como cuando salí al mercado laboral hace 3 años, quisiera pedirle a algún buen sabio del inframundo ciberlabtiano que esta consciente de las buenas y actuales practicas 2012 para ajustar automáticamente el tamaño por porcentajes, que me lo diga, así sea que tenga que bajarme de 1% del salario mínimo nacional en Colombia para pagar este conocimiento, que no lo encuentro.

Boilerplate, no me lo dice o por lo menos yo con mi maldito nivel de ingles, no lo encuentro. Alguien. Es con el meta viewport? porque la verdad no parece funcionarme... Y no se si siquiera lo estoy diciendo bien o explicando bien cual es mi problema.

Ej: Hago esto.

Linkeo el estilo, que dice que todo lo que se llame "#cabrón no me quiero poner al 100% sino con un Javascript del 2006." va a tener un width al 100%

luego en el Body, creo un div con el id "cabrón no me quier... ....el 2006" y lo cierro.

Y luego no se ve un CUATRO LETRAS porque obvio en ningun lado le indique la resolución y como mucho sale una linea.

No se si alguien me saque de mi duda y sobre todo escribiendo con una vena en la frente tipo DBZ.

Por una futura HTML5 sin basofia. gracias de antemano.

g3kdigital.

Por g3kdigital

15 de clabLevel



Genero:Masculino  

comunicador visual creativo

chrome
Citar            
MensajeEscrito el 19 Dic 2012 04:33 am
No entendí , quieres una guia de rresponsive design ?

Por Gamernoob

71 de clabLevel



Genero:Masculino  

Front-end :D

chrome
Citar            
MensajeEscrito el 19 Dic 2012 12:23 pm
Investiga sobre media queries.

Saludos!

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

firefox
Citar            
MensajeEscrito el 19 Dic 2012 08:59 pm
muchas gracias por responder, ahora mas tranquilo les escribo.

Lo voy a codear más bien.
/* Aqui empieza el html */

<!DOCTYPE html>
<html lang = "es">
<head>
<meta name ="viewport" content = "width=device-width, initial-scale=1, maximun-scale=3"/>
<meta charset = "utf-8" />
<meta name ="autor" content = "Edgar Gutierrez, g3kdigital, aprendiendo html5"/>
<meta http-equiv="Cache-Control" content = "max-age=7200" />

<link href ="normalize.css" rel="stylesheet" type="text/css">
<link href="miestilo.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="cabron"></div>
</body>
</html>

y el Estilo por ejemplo sería:

@charset "utf-8";
/* CSS Document */

html {
font-size:16px;
}

#cabron
{
width:100%;
height: 30%;
background-color: red;
}

Sin embargo no se creo un rectángulo rojo de ancho 100% y de altura 30% sino que se ve todo en blanco, porque no he asignado un ancho especifico al documento. Antes lo hacia con un archivo js para que determinara la resolución automáticamente al usuario, pero en ninguno de los sitios que he buscado sobre responsive muestran ejemplos de códigos como este, puede que haya otra solución mas actual que yo no sepa, usando css3 u otro link a algun archivo.css como normalize o un archivo.js as como modernizer o algo así.

Lo de los mediaqueries no los conozco bien y puede que sea la solución. Me explicas. Se parezco un viejo hablando de viejas tecnologías, pero apenas tengo 20 años solo que me enseñaron personas muy oldies y no quiero hacer eso mismo con otros.

Yo creí entender que se trabajaba con porcentajes, para que sea responsive. O estoy muy, pero muy equivocado?

Por g3kdigital

15 de clabLevel



Genero:Masculino  

comunicador visual creativo

chrome
Citar            
MensajeEscrito el 19 Dic 2012 10:35 pm

Código CSS :


@media screen and (max-width:600px){ //este css funcionara cuando el ancho se menor a 600px;

#cabron 
{ 
background-color: blue; 
} 
    


}

Por Gamernoob

71 de clabLevel



Genero:Masculino  

Front-end :D

chrome
Citar            
MensajeEscrito el 20 Dic 2012 12:18 am
Seguramente no lo ves, porque al no tener contenido, el body tiene un alto 0, entonces, el height 30% va a ser siempre 0...
Proba ponerle

Código CSS :

html, body{
height: 100%;
width: 100%;
}


Saludos!

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

firefox
Citar            
MensajeEscrito el 20 Dic 2012 12:22 am
EL problema no es el ancho, ya que todos los elementos de bloque tienen 100% de ancho por defecto y este esta determinado por el ancho de la ventana del navegador, no importa desde que dispositivo lo midas, siempre será el ancho de la ventana, a menos que este contenido dentro de un bloque con otro ancho definido.

el problema es el alto, que no depende del alto de la ventana sino del alto del documento, que siempre varia de acuerdo al contenido que tenga, es decir si dentro del documento tienes un párrafo que mide 300px de alto, su 100% serán 300px, pero si esta vacío su height vale exactamente 0, a menos que le especifiques un alto en pixeles.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 22 Dic 2012 11:18 pm
Hola Gamernoob

Si he entendido bien tengo que crear un solo css

Donde coloque

Código CSS :



@media screen and (max-width: 800 px ) { //este css funcionara cuando el ancho se menor a 800px;

#div-x 
{ 
background-color: blue; 
width:30%;
height: 40%
} 
@media screen and (max-width: 400 px ) { //este css funcionara cuando el ancho se menor a 400px;

#div-x 
{ 
background-color: blue; 
width:60%;
height: 30%
} 

@media screen and (max-width: 1200 px ) { //este css funcionara cuando el ancho sea menor a 1200px;

#div-x 
{ 
background-color: blue; 
width:60%;
height: 30%
} 



y así?

Y en el html? no debo hacer también algo?

Muchas gracias a todos por responder.

Por g3kdigital

15 de clabLevel



Genero:Masculino  

comunicador visual creativo

chrome
Citar            
MensajeEscrito el 23 Dic 2012 02:23 am
que esperas obtener con ese código que pusiste?

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 23 Dic 2012 02:35 pm
No entendiste nada....

Por SinSemilla

Claber

336 de clabLevel



Genero:Masculino  

i am that i am...

firefox
Citar            
MensajeEscrito el 23 Dic 2012 02:56 pm
En html solo necesita el Meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Por Gamernoob

71 de clabLevel



Genero:Masculino  

Front-end :D

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.