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.