Se me desforma la web con el .css

Raules · #1 (**permalink**) 28/12/2006, 16:50

Tengo en mi web en el .css este estilo:

Código:

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	background: #EDE8DF url(imagenes/bg.jpg) repeat-y 50% 0;
	background-attachment: fixed;
	padding: 0;	
}

Y despues tengo en el codigo html varios:

Código HTML:

<div id="top_opciones"> <img src="imagenes/esquinatop.jpg" width="25" height="44" /> </div>

Y en el .css por ejemplo esto:

Código:

#top_opciones{

	position: absolute;
	width: 538px;
	height: 44px;
	top: 8px;
	left: 329px;
	background-image:url(imagenes/fondotop.jpg);
	background-repeat:repeat-x;	
}

Pero por ejemplo en la web le sale bien para una resolucion o en el caso qeu para una le vaya bien si la ventana se la hago un poco mas pequeña ya se me desforma la web y todo...

Que solucion podría darle a eso¿¿

Por favor ayudarme..., millones de gracias

omegafunky · #2 (**permalink**) 28/12/2006, 17:50

mmmm no logro pintar la idea por que no nos pones un screenshoot

Raules · #3 (**permalink**) 29/12/2006, 12:58

Cita:

Iniciado por omegafunky

mmmm no logro pintar la idea por que no nos pones un screenshoot

la direccion donde la tengo es www.pachecodesign.com/navarro

esque no tengo mucha idea de esto, no se lo que me quieres decir con lo descreenshoot.., que necesitas que ponga?

Un saludo

DragonX · #4 (**permalink**) 29/12/2006, 13:23

con la URL esta perfecto!

Raules · #5 (**permalink**) 30/12/2006, 14:17

Cita:

Iniciado por DragonX

con la URL esta perfecto!

Pero que solucion puedo darle?

Mikmoro · #6 (**permalink**) 30/12/2006, 17:13

¿A qué te refieres? ¿Solución a qué? no veo que nada se deforme al cambiar el tamaño de la ventana. Explica un poco qué es lo que te ocurre.

Mikel.

Raules · #7 (**permalink**) 30/12/2006, 17:17

Cita:

Iniciado por Mikmoro

¿A qué te refieres? ¿Solución a qué? no veo que nada se deforme al cambiar el tamaño de la ventana. Explica un poco qué es lo que te ocurre.

Mikel.

Pues por ejemplo que cuando el explorer lo hago mas pequeño o lo visualizo con una configuración mas pequeña el menú de arriba y se mueve mas para la derecha y el fondo de la web se queda en su sitio en vez de quedarse todo tal cual.. nose si me entenderas... si eso pongo una captura de lo que veo yo mal...

Mikmoro · #8 (**permalink**) 30/12/2006, 19:57

Ah, disculpa; no veía lo que ocurría.
Esto se produce porque tienes todas las capas en posición absoluta, el gráfico de fondo se lo pones al body, y le dices que haga un desplazamiento porcentual de la imagen (50%), de manera que al reducir la ventana recalcula para desplazar el fondo ese pocentaje.

Si estás pensando en varias resoluciones, no es buena práctica usar capas en posición absoluta, porque a mayores resoluciones, si has marcado los márgenes también absolutos (px, pt, etc.), las capas se irán del sitio que tú quieres. Si mezclas porcentajes, distancias fijas en px y posiciones absolutas, lo normal es que todo se descalabre al cambiar de resolución.

Prueba poniendo esto:
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
background: #EDE8DF url(bg.jpg) repeat-y -380px;
background-attachment: fixed;
padding: 0;
}

Te irá bien. A mayores resoluciones, ya que todas tus capas se van a desplazar, la del fondo lo hará con ellas.

De todos modos, en este caso concreto yo te recomiendo que uses posiciones relativas para todas las capas.

Ya nos contarás.

Mikel.

Raules · #9 (**permalink**) 31/12/2006, 05:19

Cita:

Iniciado por Mikmoro

De todos modos, en este caso concreto yo te recomiendo que uses posiciones relativas para todas las capas.

Se desplaza el fondo con el resto de imagenes perfectamente, pero si muevo la barra desplazadora lo hace el menu pero no el fondo..

Entonces me gustaria saber que es lo de las posiciones relativas..., ya que me lo recomiendas y posiblemente me solucione el problema, porque yo en esto soy muy novato...

Gracias Mikel.

Mikmoro · #10 (**permalink**) 31/12/2006, 05:34

Al haber hecho el cambio, simplemente elimina del body la línea:

background-attachment: fixed;

y el fondo se desplazará con el resto.

Las posiciones relativas significa colocar las capas de forma relativa al resto de contenidos, en lugar de colocarlas de forma absoluta con respecto a la página.

Creo que en el encabezamiento de este foro hay buenos manuales sobre css para aprender un poco sobre todo el asunto de maquetación con css.

Ya que dices que eres muy novato, investiga un poco y consulta lo que no entiendas. Verás que es más bien fácil de entender y muy bonito.

Mikel.

Raules · #11 (**permalink**) 31/12/2006, 12:26

Podrías facilitarme alguna maquetacion echa en css para ponerla en mi web?

Raules · #12 (**permalink**) 02/01/2007, 16:20

La verdad que con los faqs y algunos tutoriales que he visto o no lo hago bien o nose que le pasa pero se me desforman igualmente...

Mikmoro · #13 (**permalink**) 02/01/2007, 17:51

Hola otra vez.
Con la situación en la que tienes ahora mismo tu código, yo te recomiendo que hagas lo siguiente:

- cambia en tu css los selectores body y web por estos:

body { margin: 0px;
padding: 0px;
background: rgb(237, 232, 223);
font-size: 12px;
line-height: 18px;
font-family: Arial,Helvetica,sans-serif;
}
#web { margin: 0pt auto;
padding: 0px;
background: rgb(237, 232, 223) url(imagenes/bg.jpg) repeat-y 50% 0px;
width: 768px;
height: 870px;
position: relative;
}

con lo que, de entrada consigues que tu web se vea siempre centrada, sea cual sea la resolución y el tamaño de la ventana al reducirla.

- Añade al resto de tus páginas el mismo div envoltorio general que has usado para la principal (<div id="web">...</div>) Recuerda: ábrelo al principio justo después de <body> y ciérralo al final justo antes de </body>.

Con esto todas tus páginas deberían ir a la posición que tu quieres. Luego el contenido ya es otro cantar.

No es mala idea diseñar con capas en posiciones absolutas, pero es bueno hacerlo dentro de una capa en posición relativa, para que esas posiciones absolutas lo sean con respecto a la capa contenedora, y así poder colocar la relativa con más facilidad con respecto a la página u otros elementos.

Mikel.

P.D.: tienes otro problemilla con las imágenes pequeñas del menu de abajo (tres columnas). Revisa sus nombres y el width.

Raules · #14 (**permalink**) 03/01/2007, 13:39

El tema ese ya por lo menos queda resuelto y gracias por todo de verdad y por lo de las imagenes de abajo.., pero si te das cuenta ahora el fondo no me llega hasta el final del todo.., eso porque es?

Raules · #15 (**permalink**) 03/01/2007, 13:42

Bueno ya lo he dejado resuelto he puesto esto:

Código HTML:

body { margin: 0px;
padding: 0px;
background: rgb(237, 232, 223) url(imagenes/bg.jpg) repeat-y 50% 0px;
font-size: 12px;
line-height: 18px;
font-family: Arial,Helvetica,sans-serif;
}
#web { margin: 0pt auto;
padding: 0px;
background: rgb(237, 232, 223) url(imagenes/bg.jpg) repeat-y 50% 0px ;
width: 768px;
height: 870px;
position: relative;
}

Y ya me funciona correctamente....

Millones de gracias Mikmoro, la verdad que quedo muy satisfecho con tu ayuda...

Espero poder en otro momento que tenga alguna duda contar contigo..

Gracias

Mikmoro · #16 (**permalink**) 03/01/2007, 15:53

Me alegro de haber podido ayudarte en algo. Espero que si profundizas un poco en esto de las css te guste tanto como a mi.
Saludos.

Mikel.