Tengo el siguiente problema, el diseño en CSS que realice tiene varios problemas, he probado de casi todo pero nada me puede funcionar, el problema es el siguiente:
Al cambiar resolución los DIV pierden su posición, depediendo del explorardor los "efectos" desaparecen... no mencionaré los problemas con HTML5 porque eso va en otra sección, les dejo el código para que me digan que puede ser, todo esto es si cambio también de explorador.
Código:
El ideal es que se vea asi:* {padding:0; margin:0 auto;}
html,
body {
width:100%;
height:100%;
}
body {
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
display:box;
box-pack:center;
box-align:center;
background-image: linear-gradient(bottom, #19CEFE 37%, #35F8FF 69%, #50FFFF 5%);
background-image: -o-linear-gradient(bottom, #19CEFE 37%, #35F8FF 69%, #50FFFF 5%);
background-image: -moz-linear-gradient(bottom, #19CEFE 37%, #35F8FF 69%, #50FFFF 5%);
background-image: -webkit-linear-gradient(bottom, #19CEFE 37%, #35F8FF 69%, #50FFFF 5%);
background-image: -ms-linear-gradient(bottom, #19CEFE 37%, #35F8FF 69%, #50FFFF 5%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.37, #19CEFE),
color-stop(0.69, #35F8FF),
color-stop(0.05, #50FFFF)
);
}
#cuerpo {
-webkit-box-flex:1;
-moz-box-flex:1;
box-flex:1;
max-width:60em;
margin:0 auto;
border: 1px solid black;
border: 1px solid rgba(0,0,0,0.5);
border-radius: 10px 10px 2px 2px;
background: rgba(0,0,0,0.25);
box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 10px;
width: 60em;
height: 30em;
background: white;
}
#logo{
position: absolute;
background-image: url('/imagenes/logo.png');
background-repeat: no-repeat;
top: 3%;
left: 5%;
width: 274px;
height: 210px;
}
#sub-logo {
position: absolute;
top: 4%;
left: 25%;
}
#sub-logo h1{
font: 33px Calibri bold;
text-decoration:none!important;
overflow: hidden;
display:inline;
}
#sub-logo h2{
font: 17px Calibri bold;
text-decoration:none!important;
overflow: hidden;
display:inline;
color: #00008b;
}
#nav {
position: absolute;
right: 23%;
top: 8.9%;
color: black;
font: 14px Calibri bold;
}
#nav li { list-style:none; float:left;}
#nav ul {
color:#888;
text-decoration:none!important;
font:15pt Calibri;
}
#nav a {
display:inline;
overflow: hidden;
padding: 0 10px;
height:25px;
width:140px;
text-decoration:none!important;
margin:0px;
margin-left:0;
font:14pt Calibri bold;
color:black;
}
#nav a:hover {
height:28px;
border-bottom:3px solid gray;
}
#nav a.selected {
height:30px;
color:#222;
font-weight:bold;
border-bottom:none;
}
#opina {
position:absolute;
top: 20%;
left: 20%;
width: 20em;
font: 12pt calibri;
background:#F9F9F9;
border: solid 1px #ddd;
border-radius:10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0px 0px 10px #888;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
}
#opina h2 {
font-size:18px; color:#333;
}
#opina textarea{
height: 150px;
}
.submit-button {
background: #57A02C;
border:solid 1px #86CC50;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#FFF;
cursor:pointer;
font-size:13px;
}
fieldset, form { padding:0px; margin:0px; border:none }
input[type=text]:focus, textarea:focus { background:#EDF3FC; border:solid 2px #D5E3F9; }
.submit-button:hover { background:#82D051 }
.error {background: #ffcece; border:solid 1px #df8f8f; }
.success {background: #d5ffce; border:solid 1px #9adf8f; }
.error, .success {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color:#333;
}
#bienvenidos {
position:relative;
left: -5%;
top: 5%;
width: 30em;
font: 12pt calibri;
}
#cc_tunein {
position: absolute;
bottom: 21%;
right: 15%;
font: 12pt calibri;
}
#radio {
position:absolute;
bottom: 25%;
left: 15%;
font: 12px calibri bold;
}
#footer {
position:absolute;
bottom: 20%;
font: 12px calibri;
}
#footer a{
color: black;
text-decoration:none;
}
#comentario {
position: absolute;
top: -7%;
left: 110%;
}
#comentario table {
width: 500px;
}
#comentario a{
text-decoration: none;
color: blue;
}
De ante mano muchas gracias
