Buenas tardes compañeros...
Una vez mas teniendo problemas al trabajar con porcentajes..
Me han pedido (para una nueva pagina de hosting de archivos) que les haga un diseño, me pidieron una combinacion del estilo de Mega con Mediafire y Dropbox...
La cosa es que lo tengo hecho, pero tengo un problema (y por lo que ví Kim (El de Mega) tambien lo tiene)...
La cosa es que he trabajado con porcentajes para que el diseño se vea en pantallas de todos los tamaños, el diseño se divide practicamente el 3 partes, una columna que va a la izquierda con un height del 100% y un width del 20%, con eso no hay problema, todo se bien..
Tambien tiene un nav, donde va el logo y otras cosa que tiene un height del 20% y un width del 80%
y una "desktop" donde van los iconos de los archivos..
Si cargo la pagina no hay problema, pero si redimenciono la ventana se descuadra, el nav se encoje (no respeta ni el min-heigth) y los iconos en el desktop (.cont_a) se descuadra todo..
Capturas:
Como se ve mi diseño bien:
[img=http://webcr.tk/subidas/2.png]
Como se ve cuando encojo la pantalla:
[img=http://webcr.tk/subidas/3.png]
Como se ve Mega (cuando se encoje la pantalla):
[img=http://webcr.tk/subidas/1.png]
Como se ve MediaFire (Como quiero que se vea):
[img=http://webcr.tk/subidas/4.png]
Pues acá el problema es que ocupo que se acomode al tamaño de la pantalla...
Acá les dejo mi code..
CSS:
Código:
.cont_a {
margin-top: 5%;
margin-left: 20%;
width: 80%;
height: 90%;
min-width: 900px;
min-height: 900px;
background: #FFF;
position: fixed;
overflow: auto;
}
.archivo {
width: 128px;
height: 160px;
background: #FFF;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
display: inline-block;
border-radius: 10px;
border: 1px solid transparent;
position: static;
}
header {
width: 80%;
height: 100px;
min-height: 90px;
position: fixed;
float: right;
margin-left: 20%;
background: #000;
}
index.html
Código:
<div class="cont_a">
<div class="archivo carpeta"><p>Carpeta</p></div>
<div class="archivo carpeta"><p>Carpeta</p></div>
<div class="archivo carpeta"><p>Carpeta</p></div>
<div class="archivo carpeta"><p>Carpeta</p></div>
<div class="archivo compressed"><p>Nombre.zip</p></div>
<div class="archivo exe"><p>Nombre.exe</p></div>
<div class="archivo file"><p>Nombre.dll</p></div>
<div class="archivo music"><p>Nombre.mp3</p></div>
<div class="archivo image"><p>Nombre.png</p></div>
<div class="archivo video"><p>Nombre.avi</p></div>
<div class="archivo text"><p>Nombre.txt</p></div>
<div class="archivo html"><p>Nombre.html</p></div>
<div class="archivo css"><p>Nombre.css</p></div>
<div class="archivo pdf"><p>Nombre.pdf</p></div>
<div class="archivo word"><p>Nombre.doc</p></div>
<div class="archivo excel"><p>Nombre.csv</p></div>
<div class="archivo point"><p>Nombre.ppt</p></div>
<div class="archivo psd"><p>Nombre.psd</p></div>
<div class="archivo fireworks"><p>Nombre.fw</p></div>
<div class="archivo illustrator"><p>Nombre.ai</p></div>
<div class="archivo flash"><p>Nombre.swf</p></div>
</div>
Gracias y disculpen!