Banner para todos las resoluciones?

Started by Shiryu19, October 07, 2015, 02:27:49 PM

Previous topic - Next topic

Shiryu19

Buenas, quería saber de que medida tiene que ser un banner para que se vea en todas las resoluciones de pc, o como adaptarla para que se vea bien en todas.

Gracias!
Dar las GRACIAS no cuesta nada

-Rock Lee-

Sino mal recuerdo por un amigo es diseñador, hay que usar imágenes vectoriales (creo se les dice de esa manera) donde no importa tanto lo expandas o achiques se ven en muy alta resolución!+


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Shiryu19

#2
Y como se configura en CSS supongo pera que se ajuste a todas las pantallas?

Realmente lo que quiero modificar es el #Header
Dar las GRACIAS no cuesta nada

-Rock Lee-

Quote from: Shiryu19 on October 07, 2015, 05:47:05 PM
Y como se configura en CSS supongo pera que se ajuste a todas las pantallas?

Realmente lo que quiero modificar es el #Header

Es un poco de ambas cosas hace unos años diseñe una web.. algo parecida parte de una imagen de muy alta resoluciones y liviano para luego ajustarlo con algo de CSS3, HTML5 y Js... no se si aplica a lo mismo pero se deben tocar varias cosas para adaptarlo supongo...


Saludos!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Shiryu19

Logro hacerlo con

background: url(../images/theme/banner.jpg) no-repeat 50% 0 ;
    background-size: cover;


Pero quiero hacer un padding: 30px 0 ;  para dejar el menu flotando encima del banner digamos, pero me amplia banner y me lo descoloca :-\

http://rppruebas.hol.es/
Dar las GRACIAS no cuesta nada

Gluz

No entiendo que quieres hacer con el menú, ya que el menú está dentro del div donde pones el banner de fondo, así que si modificas margenes o padding tanto del contenido como del mismo div el banner se va a modificar en tamaño.

Así como está actualmente se ve bien, pero si pudieras explicar que es exactamente lo que quieres hacer, o a dónde lo quieres mover sería mejor para saber que parte del CSS hay que modificar.

Diego Andrés

Pues usualmente una imagen muy grande la puedes manipular a tu antojo ya que si la haces más chica en css se sigue viendo muy bien porque la resolución original sería de muy buena calidad.

Busca wallpapers y verás que hay de tamaños extremadamente grandes incluso.

SMF Tricks - Free & Premium Responsive Themes for SMF.

Shiryu19

Quiero hacer algo parecido al menu del Theme - Horizon de DzunerStudio.

el menu flotando en el #head

Dar las GRACIAS no cuesta nada

Gluz

Bueno, para eso primero que nada debes poner el Header a un alto fijo, luego ya acomodas lo demás ya sea con padding o por top relativo.

Prueba primero poner en #header {} un height:130px; a ver si con eso se logra lo que querías hacer, porque a mi no me sale descolocado como dices, a mi me sale bien así como está.

Shiryu19

Si me lo soluciona pero claro, me achica la imagen de ancho, en el Theme de Horizon no se como estará que la imagen sale siempre igual en cualquier resolución.

Mi pantalla es de 1440 x 900.

Gracias!
Dar las GRACIAS no cuesta nada

Gluz

Es eso, tiene un alto fijo y la imagen está creada para ese alto exactamente y solo es mucho mas ancha, y al estar centrada sale bien en cualquier resolución.

Los valores que te dí son meramente al tanteo, no eran medido, ahí debes medir y poner los valores exactos del alto de tu banner y luego de eso poner los márgenes/padding a los demás elementos y no al contrario, así es como se colocan las cosas si quieres modificar, ya que si empiezas al contrario, primero los márgenes/padding y luego los tamaños nunca te va a quedar bien.

Advertisement: