Necesito, ajustar divs según resolucion

matiaspavan · #1 (**permalink**) 08/02/2014, 15:50

Hola chicos, soy nuevo en esto de programacion web, html, css,css3. Vengo con una pregunta de como hacer escalables los div que tengo con imagenes adentro que tienen un hipervinculo de paso. Pude hacer escalar la img y el footer con %, pero no puedo lograr hacer escalar los divs que tienen las img con los hipervinculos, tampoco los textos, ni la imagen con el ('cartel.png'). Si hay errores de sintaxis o para que sea menos complejo el codigo si me los pueden decir, 10 puntos.

Html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creactivity</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
*
</head>
*
<body>
<div id="apDiv1" ><a href="#"><img src="timbre1.png" width="38" height="38" */></a></div>
*<div id="apDiv2"><a href="#"><img src="timbre1.png" width="38" height="38" /> </a></div>
*<div id="apDiv3" ><img src="cartel.png" width="213" height="97" /></div>
<div id="apDiv4">
* *<a href="#">Educational Center</a><br /><a href="#">Instituto de idiomas</a>
*</div>
*<div id="apDiv5">
* *<a href="#">Professional Center</a> <br /><a href="#">Material didáctico para docentes</a>
*</div>
*<img style="width:100%;height:100%;" src="intro.jpg" />
<div id="footer" style="width:100%;"><br />FOOTERLINEA1<br /> FOOTERLINEA2<br />FOOTERLINEA1</div>
</body>
</html>

CSS

Código:

@charset "utf-8";
/* CSS Document */
*
*
/* KEYFRAMES*/
*
@font-face
{
font-family: Curse;
src:url(Curse%20Casual.ttf);
}
@keyframes mover{
* * 0% {opacity:0;}
* * 
* * 100%{opacity:1;}
* * 
* * 
* * 
* * }
@keyframes opacidadIMG{
* * 0% {opacity:0;}
* * 
* * 100%{opacity:1;}
* * 
* * 
* * 
* * }
@-webkit-keyframes opacidadIMG{
* * 0% {opacity:0;}
* * 
* * 
* * 
* * 100%{opacity:1;}
* * 
* * 
* * 
* * }
@-webkit-keyframes mover{
* * 0% {opacity:0;}
* * 
* * 
* * 
* * 100%{opacity:1;}
* * 
* * 
* * 
* * }
* * 
/*SIGUE*/
* * 
body{
* * 
* * margin:0px;
* * padding:0;
* * 
* * }
#apDiv1 {
* * position: absolute;
* * left: 64%;
* * top: 20%;
* * width: 5%;
* * height: 5%;
*
* * 
}
#apDiv2 {
* * position: absolute;
* * left: 64%;
* * top: 27%;
* * width: 5%;
* * height: 5%;
*
}
#apDiv3 {
* * position: absolute;
* * left: 41%;
* * ;
* * top: 14%;
* * width: 41%;
* * height: 14%;
*
}
#apDiv4 {
* * position: absolute;
* * left: 68%;
* * top: 19%;
* * width: 17%;
* * height: 7%;
* * text-align: center;
* * color: #FFF;
* * font-size: 22px;
* * font-family: Curse;
* * 
}
#apDiv5 {
* * position: absolute;
* * left: 68%;
* * top: 26%;
* * width: 17%;
* * height: 6%;
* * text-align: center;
* * color: #FFF;
* * font-size: 22px;
* * font-family: Curse;
* * 
* * 
}
div:first-child{
* * 
* * -webkit-animation:mover 5s;
* * animation:mover 5s;
* * 
* * }
div:nth-child(2){
* * -webkit-animation:mover 5s;
* * animation:mover 5s;
* * 
* * }
* * 
img:first-child{
* * 
* * -webkit-animation:opacidadIMG 5s;
* * animation:opacidadIMG 5s;
* * 
* * }
a:first-child{
* * -webkit-animation:opacidadIMG 5s;
* * animation:opacidadIMG 5s;
* * 
* * }
div a {
* * 
* * -webkit-animation:opacidadIMG 5s;
* * animation:opacidadIMG 5s;
* * 
* * 
* * 
* * }
*
#footer{
* * * * width:1280px;
* * * * height:155px;
* * * * background-color:#fff8c1;
* * * * opacity:1;
* * * * text-align:center;
* * * * font-size:20px;
* * * * font-family:Curse;
* * * * color:#fb4a21;
* * * * 
* * * * 
* * * * }
#imagen {
* * * * background:url(iconofb.png) no-repeat;
* * * * height:45px;
* * * * width:45px;
* * * * * * 
* * * * * * }
#imagen:hover{
* * * * * * background:url(iconofbhover.png) no-repeat;
* * * * * * height:45px;
* * * * * * width:45px;
* * * * * * 
* * * * * * }
.propiedad{
* * * * display:inline-block;
* * * * padding:10px;
* * * * margin-left:600px;
* * * * margin-top:45px;
* * * * 
* * * * }
* * * * 
a{
* * text-decoration:none;
* * color:#FFF;
* * 
* * 
* * }
*
a:nth-child(3){
* * padding:1px;
* * font-size:15px;
* * 
* * }

Algunas cosas en el css no las uso porque testie algo. Espero que me puedan ayudar! Si hay un problema de coding tambien! Gracias.

EDIT: Asi lo veo yo: http://puu.sh/6OQmk.jpg en mi monitor de 1280x1024 pero en otras los botones, textos y el cartel se ven mal.

pelao777 · #2 (**permalink**) 09/02/2014, 20:26

Estimado

Para el caso que estás planteando debes utilizar css (media queries) y declarar propiedades según rango de resolución, un ejemplo:

/* tablet horizontal y escritorio */
@media (min-width: 768px) and (max-width: 979px) {
.elemento1 {
propiedad:valor;
}
#elemento2{
propiedad:valor;
}
}

/* para dispositivos como celulares*/
@media (max-width: 480px) {
.elemento1 {
propiedad:valor;
}
#elemento2{
propiedad:valor;
}
}

Con lo anterior declaras medidas en pixeles para cada elemento, es muy probable que al utilizar medidas en porcentaje varíe la forma en que se muestra un elemento.

PD: Elimina los ***, evita los espacios en nombres de archivo (tipografía) y en las animaciones declara para opera, mozilla y ms, no olvides que aún existen muchos usuarios que utilizan versiones >2012

Saludos!

Saludos!