Foros del Web » Creando para Internet » CSS »

Se me desforma la web con el .css

Estas en el tema de Se me desforma la web con el .css en el foro de CSS en Foros del Web. 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) ...
  #1 (permalink)  
Antiguo 28/12/2006, 16:50
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Se me desforma la web con el .css

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
  #2 (permalink)  
Antiguo 28/12/2006, 17:50
Avatar de omegafunky  
Fecha de Ingreso: diciembre-2003
Ubicación: Tabasco, Mexico
Mensajes: 3.534
Antigüedad: 14 años
Puntos: 33
Re: Se me desforma la web con el .css

mmmm no logro pintar la idea por que no nos pones un screenshoot
__________________
Canon 7D | Canon 5D Mark II | 35mm 1.4L | 135mm 2L | Pocket Wizard Plus III
  #3 (permalink)  
Antiguo 29/12/2006, 12:58
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

Cita:
Iniciado por omegafunky Ver Mensaje
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
  #4 (permalink)  
Antiguo 29/12/2006, 13:23
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Se me desforma la web con el .css

con la URL esta perfecto!
  #5 (permalink)  
Antiguo 30/12/2006, 14:17
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

Cita:
Iniciado por DragonX Ver Mensaje
con la URL esta perfecto!
Pero que solucion puedo darle?
  #6 (permalink)  
Antiguo 30/12/2006, 17:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se me desforma la web con el .css

¿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.
  #7 (permalink)  
Antiguo 30/12/2006, 17:17
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

Cita:
Iniciado por Mikmoro Ver Mensaje
¿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...
  #8 (permalink)  
Antiguo 30/12/2006, 19:57
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se me desforma la web con el .css

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.

Última edición por Mikmoro; 30/12/2006 a las 20:04
  #9 (permalink)  
Antiguo 31/12/2006, 05:19
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
  #10 (permalink)  
Antiguo 31/12/2006, 05:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se me desforma la web con el .css

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.
  #11 (permalink)  
Antiguo 31/12/2006, 12:26
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

Podrías facilitarme alguna maquetacion echa en css para ponerla en mi web?
  #12 (permalink)  
Antiguo 02/01/2007, 16:20
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

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...
  #13 (permalink)  
Antiguo 02/01/2007, 17:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se me desforma la web con el .css

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.
  #14 (permalink)  
Antiguo 03/01/2007, 13:39
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

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?
  #15 (permalink)  
Antiguo 03/01/2007, 13:42
 
Fecha de Ingreso: mayo-2005
Ubicación: Murcia
Mensajes: 319
Antigüedad: 12 años, 7 meses
Puntos: 0
Re: Se me desforma la web con el .css

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
  #16 (permalink)  
Antiguo 03/01/2007, 15:53
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Se me desforma la web con el .css

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.
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 16:49.