• Compra una licencia de Windows 10/11 (10€) u Office (18€) al mejor precio u Office al mejor precio. Entra en este post con las ofertas
  • ¡Bienvenid@! Recuerda que para comentar en el foro de El Chapuzas Informático necesitas registrar tu cuenta, tardarás menos de 2 minutos y te dará valiosa información además de ayudarte en lo que necesites o pasar un rato agradable con nosotros.

problema existencial con html y css

naghost

naghost

No soy hombre soy un Zerg
Registrado
16 Sep 2013
Mensajes
411
Puntos
28
hola buenas la cuestion es que estoy haciendo una pagina con HTML y CSS y ahora tengo 2 problemas
1º No se como narices hacer que sea dinamica la web para que desde diferentes resoluciones se vea bien
2º estaba colocando todo con diferentes div colocandolos poniendolos como position:relative; y lo ajustaba con las propiedades top, left, etc.. pues el problema es que esos div como que siguen abajo y entonces me aparece la barra de scroll para bajar a un sitio que enrealidad esta en blanco me podeis dar alguna idea de como reparar esto si necesitais mas datos decirmelo o si me he explicado como el ojete tambien xD
un saludo infinitas gracias
 
1) Estas hablando de diseño responsive. La mejor manera es con media queries, una forma de orientar al CSS según la resolución y tipo de dispositivo. http://www.w3schools.com/css/css_rwd_mediaqueries.asp

2) Realmente, estás modificando el flujo del documento.
La página se escribe de izquierda a derecha y de arriba a abajo. En ese orden.

Si no pones nada de position, los divs se colocarán en ese orden. La mejor manera de maquetar es con floats. Este artículo lo explica bastante bien. http://www.lawebera.es/maquetacion-web/propiedad-float-css.php


Pregunta: ¿Estás siguiendo algún tipo de guía para aprender?
 
Hazle caso a pabs11 que él sabe de esto :eek:k:

No te olvides de poner el Metatag de escalado HTML, creo que es obligatorio para las páginas responsive naghost
 
David Rey dijo:
Hazle caso a pabs11 que él sabe de esto :eek:k:

No te olvides de poner el Metatag de escalado HTML, creo que es obligatorio para las páginas responsive naghost
Hacer clic para expandir...

Eso, el meta viewport. Siempre se me olvida :shhh:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
guia ninguna intentare hacer lo del responsive ese y sobre lo del float entonces ya no lo pongo como position no? solo pongo float y el sitio?
puedes darme un ejemplo sobre el float yo solo sabia que se puede usar para izquierda y derecha
 
Si te esperas a mañana por la tarde, te puedo recomendar tutoriales de proyectos web muy buenos. Es lo mejor cuando se empieza, creeme.

De todas formas, lo de los float es tan simple como poner un ancho a un div y obligarle a flotar. Si un div tiene un ancho de 40% y flota a la izquierda, y otro de 45% y flota a la derecha, en el centro queda un 5% vacío.

Enviado desde mi XT1021 mediante Tapatalk
 
puf no entiendo un pijo pero bueno a ver como va eso xD finalmente lo arregle en vez de position:relative; use position:absolute; y ya no me salieron mas problemas de momento.. xD
pero pese a todo prometo estar agradecido si me pasas los ejemplos tutoriales y similares que me pases ya que estoy muy verde pese a haber estado trabajando 3 meses con esto ya..
 
Última edición:
Pega esto en un fichero .html y ábrelo con tu navegador:

PHP: 
<body>
	<div style="border: 2px solid red; background: #fee; width: 45%; float: left;">
		Hola, soy un div rojo
	</div>
	<div style="border: 2px solid blue; background: #eef; width: 45%; float: right;">
		Hola, soy un div azul
	</div>
</body>

No necesitas especificar posiciones para cada div. De forma automática, div tiene un ancho del 100%. Puedes indicarle que tenga menos, pero como por defecto, div es un elemento de tipo bloque (display = block), tiene un salto de línea antes y otro después, por lo que tener dos div al 50% no te garantiza que ocupen dos columnas. Para ello, tienes que obligar a que uno se sitúe a la izquierda (float = left), por lo que los demás elementos que le sigan se colocarán a su derecha (no es necesario float: right).

Respondido eso, para responsive debes utilizar media queries, y/o anchos fluídos. Es decir, en lugar de esto:

PHP: 
#wrapper { width: 960px }

Debes utilizar esto:

PHP: 
#wrapper { width: 95% }

O lo que corresponda. También puedes utilizar anchos fijos con media queries. Media queries es indicarle al CSS con qué propiedades de pantalla (ej: resolución) debe seleccionar qué reglas, ejemplo:

PHP: 
@media (min-width: 767px) {
/* css */
}

Si lo que quieres es aprender, haz las media-queries. Si lo que quieres son resultados YA, utiliza Bootstrap.

PD: quita eso de position: absolute, que es una cagada xd
 
entonces tendria que crear un div grande que contenga los div y crear diferentes div para las separaciones? =s
 
El div grande es el contenedor, y los de dentro son las secciones, el contenido. El menu en un div, el contenido principal en otro, el pie en otro, etc...
 
naghost dijo:
entonces tendria que crear un div grande que contenga los div y crear diferentes div para las separaciones? =s
Hacer clic para expandir...

Se hace así, sí.

De esa manera puedes tener un único div con ancho fijo condicionado por la resolución de pantalla mediante el uso de media queries:

  • Si la pantalla mide menos de 468px, width: 100%;
  • Si la pantalla mide menos de 768px, width: 750px;
  • Si la pantalla mide menos de 990px, width: 960px;
  • ...

Y dentro de éste, todos los divs con anchos relativos. Si te fijas, es como trabajan los frameworks responsive importantes, o al menos es como lo hace Bootstrap.

Hecho el div exterior, todo lo demás tiene su propio div: un cabecero de página será un div que puede contener otros div: un div para la columna izquierda del cabecero (logo), otro para la columna derecha... La zona del contenido será otro div con más div dentro: un div para los artículos, otro para la barra lateral, que contendrá a su vez otros div, uno por cada bloque que haya en dicha barra...

Anidar etiquetas no es malo, al contrario. Piensa en div como en bloques o zonas de la página, no como en separaciones.
 
Última edición:
creo recordar que la relación de tamaño la puedes poner tanto con los % como lo indica oMega_2093 o por la m.
pero siempre tendrás que hacer comparación por tamaño de pagina para que los input que tengas no se queden pequeños.

Para ello lo puedes tener una clase .tamanoPantalla y por jquery comprobar el tamaño de la pantalla y modificar los tamaños de la .tamanoPantalla
 
pabs11 cuando puedas puedes pasarme esos ejercicios practicos es que me vendrian muy bien muchas gracias ^^
 
Perdon, llevo un dia demasiado ajetreado, mañana te busco esos tutos.

Aunque bueno, por google seguro que te salen algunos muy buenos si buscas "proyecto html desde cero"

Enviado desde mi XT1021 mediante Tapatalk
 
Hay que estar conectado o registrado para responder aquí.
Arriba