Problema Pagina Web

NicoAFV · #1 (**permalink**) 21/10/2014, 00:01

Saludos soy nuevo en el diseño de paginas web html tengo 0 experiencia. Bueno el punto es que estoy diseñando una pagina web para un juego (Sin registro directo en la pagina web) Solo de diseño para que salgan las noticias, esas cosas, y asì esta quedando.

[URL="http://oi57.tinypic.com/of2eea.jpg"]http://oi57.tinypic.com/of2eea.jpg[/URL]

El problema es que la pagina en tamaño completo se ve realmente bien, pero al achicar el navegador ocurre lo siguiente:

[URL="http://oi62.tinypic.com/33u9ama.jpg"]http://oi62.tinypic.com/33u9ama.jpg[/URL]

Solo logre que la imagen del fondo se adaptara al tamaño del navegador, Alguien me podria ayudar para configurar mi web y que toda la web se adapte al tamaño del navegador o ya sea lo contrario pero de alguna forma quede bien. si es necesario crear todo denuevo no importa con tal de arreglar ese error y poder seguir con el diseño de mi pagina web. (Trabajo en dreamweaver cs6)

GeekGirl · #2 (**permalink**) 21/10/2014, 06:43

Tus elementos deben tener anchos proporcionales al navegador. Seteales anchos con porcentajes, usá media queries, hay muchas librerías que te pueden ayudar a implementar resonsive design; sólo es cuestión de documentarse un poco.

Recuerda que este foro está hecho para solucionar problemas concretos y no para hacer el trabajo por los demás.

Saludos :)

NicoAFV · #3 (**permalink**) 21/10/2014, 06:53

Justamente eso fue lo que hice, puse todos los anchos en 100%, si empieso denuevo la web y inicio con una tabla de las proporciones 100% no deberia tener problemas ¿Cierto? (Dentro de la tabla agregar todos los elementos, etc)

Rafael · #4 (**permalink**) 21/10/2014, 11:21

Usar una tabla es del siglo pasado.

Necesitarás comenzar a posicionar tus elementos con css.

Así con una foto no se puede adivinar que estás haciendo.

NicoAFV · #5 (**permalink**) 21/10/2014, 18:21

Aca esta el codigo, mi problema es que el #apDiv2 { junto con el #apDiv4 { no se ajustan a la pantalla como lo hace la #apDiv1

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#apDiv1 {
	position: absolute;
	width: 100%;
	height: 1245px;
	z-index: 0;
	left: 0;
	top: 0;
	background-image: url(Ima/FondoWeb.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
#apDiv2 {
	position: absolute;
	width: 100%;
	height: 91px;
	z-index: 0;
	background-image: url(Ima/Fmenu.jpg);
	background-attachment: fixed;
	background-size: cover;
}
    left: 0;
	top: 0;
}
#apDiv3 {
	position: absolute;
	width: 100%;
	height: 158px;
	z-index: 1;
	left: 0px;
	top: 92px;
}
#apDiv4 {
	position: absolute;
	width: 100%;
	height: 266px;
	z-index: 1;
	top: 249px;
	left: 0px;
	background-image: url(Ima/bannercentro.png);
	background-repeat: no-repeat;
	background-size:cover;
}
</style>
</head>

<body>
<div id="apDiv3"></div>
<div id="apDiv1">
  <div id="apDiv2"></div>
  <div id="apDiv4"></div>
</div>
</body>
</html>

Codeacademy · #6 (**permalink**) 31/10/2014, 09:55

Cita:

Iniciado por GeekGirl

Tus elementos deben tener anchos proporcionales al navegador. Seteales anchos con porcentajes, usá media queries, hay muchas librerías que te pueden ayudar a implementar resonsive design; sólo es cuestión de documentarse un poco.

Recuerda que este foro está hecho para solucionar problemas concretos y no para hacer el trabajo por los demás.

Saludos :)

Te recomiendo que no seas irrespetuoso,para ti eso puede ser otras cosas,como por ejemplo hacer su trabajo,pero si piensas que haces su trabajo no respondas y listo,para el si es un problema y primero,es nuevo en este mundo,no sabra casi nada,por algo nesecita nuestra ayuda,como tu mas adelante la nesecitaras.

Saludos.

Rafael · #7 (**permalink**) 31/10/2014, 11:17

En ese código estás abusando de la posición absoluta Se me hace que estás encimando si razón un div sobre otro. Prueba cambiando a ambos el width a 50% y ponle a uno float: left; y a l otro float: right;

GeekGirl · #8 (**permalink**) 31/10/2014, 14:46

Cita:

Iniciado por Codeacademy

Te recomiendo que no seas irrespetuoso,para ti eso puede ser otras cosas,como por ejemplo hacer su trabajo,pero si piensas que haces su trabajo no respondas y listo,para el si es un problema y primero,es nuevo en este mundo,no sabra casi nada,por algo nesecita nuestra ayuda,como tu mas adelante la nesecitaras.

Saludos.

Contame en qué momento le falté el respeto? Me parece que tu comentario no aporta nada. Yo al menos le brindé consejos. Y si bien mucha gente necesita ayuda, el foro es para dudas concretas y no para formular una web prácticamente de 0.
No tengo ganas ni tiempo de pelear, podés llevarte tu bilis a otra parte.

Saludos.

Rafael · #9 (**permalink**) 31/10/2014, 16:11

Complemento. La posición absoluta saca los elementos de su flujo natural, el caso específico podrías complementar el width con un min-width, para que al reducir el div contenedor, el bloque se pase para abajo.

Probablemente también necesitas poner un margin auto por ahí.