Foros del Web » Creando para Internet » CSS »

Mi sitio web se descuadra al redimencionar ventana

Estas en el tema de Mi sitio web se descuadra al redimencionar ventana en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/01/2014, 19:04
 
Fecha de Ingreso: febrero-2013
Mensajes: 5
Antigüedad: 9 años, 9 meses
Puntos: 0
Mi sitio web se descuadra al redimencionar ventana

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!
  #2 (permalink)  
Antiguo 18/01/2014, 05:39
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 9 años, 6 meses
Puntos: 31
Respuesta: Mi sitio web se descuadra al redimencionar ventana

¿Y el código del nav?

Como quieres que se ajuste el contenedor de los archivos si le estas forzando a tener un ancho minimo.
  #3 (permalink)  
Antiguo 18/01/2014, 13:06
 
Fecha de Ingreso: noviembre-2013
Mensajes: 113
Antigüedad: 9 años
Puntos: 4
Respuesta: Mi sitio web se descuadra al redimencionar ventana

Hola!!. Lo que no entiendo es porque en el contenedor pusiste primero height y despues min-height
Código CSS:
Ver original
  1. .cont_a {
  2.     margin-top: 5%;
  3.     margin-left: 20%;
  4.     width: 80%;
  5.     height: 90%;
  6.     min-width: 900px;
  7.     min-height: 900px;
  8.     background: #FFF;
  9.     position: fixed;
  10.     overflow: auto;
  11. }

Prueba asi:

Código CSS:
Ver original
  1. .cont_a {
  2.     margin-top: 5%;
  3.     margin-left: 20%;
  4.     width: 80%;
  5.     height: 90%;
  6.     max-width: 900px;
  7.     max-height: 900px;
  8.     background: #FFF;
  9.     position: fixed;
  10.     overflow: auto;
  11. }

Esa es una primera opcion, yo nunca tuve que hacer que un div se "ajuste al tamaño de la ventana", por eso es que no se me ocurre nada mas, pero probare!!!

Una cosa mas, ¿Que sistema operativo usas?
  #4 (permalink)  
Antiguo 20/01/2014, 05:27
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años, 4 meses
Puntos: 2114
Respuesta: Mi sitio web se descuadra al redimencionar ventana

Como han dicho falta código. O cuelga el sitio en algún lugar para verlo in situ.

Cita:
Iniciado por nico123 Ver Mensaje
Una cosa mas, ¿Que sistema operativo usas?
Yo veo por ahí el logo de Ubuntu.

Etiquetas: background, descuadra, html, redimencionar, tamaño, ventana
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:17.