Foros del Web » Creando para Internet » Diseño web »

ayuda con div

Estas en el tema de ayuda con div en el foro de Diseño web en Foros del Web. Buenas, tengo esta pagina web: worksafesupportsolutions.co.uk si la ves con una resolucion de 1280 x 800 la pagina se ve bien...si la ves con una ...
  #1 (permalink)  
Antiguo 08/06/2009, 05:26
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
ayuda con div

Buenas, tengo esta pagina web: worksafesupportsolutions.co.uk
si la ves con una resolucion de 1280 x 800 la pagina se ve bien...si la ves con una resolucion diferente se ve mal :S
alguien sabe alguna solucion para que se vea bien de cualquier resolucion?
aqui dejo el css por si podeis hacer algo
worksafesupportsolutions.co.uk/style.css

gracias y un saludo
  #2 (permalink)  
Antiguo 08/06/2009, 05:28
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ayuda con div

Podrías hacer un diseño fluido con CSS
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 08/06/2009, 05:30
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

lo he estado mirando y eso seguro que me funcionaria pero como lo hago?
ya tengo todo puesto con porcentajes :S
  #4 (permalink)  
Antiguo 08/06/2009, 05:34
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ayuda con div

Una opción sería fijarle un ancho como mínimo al div contenedor, y luego un margin: auto. Para que siempre te quede centrado, yo por ejemplo el daría uno de 800px de ancho y una altura auto.
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 08/06/2009, 05:38
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

ya lo he modificado pero nada :S cuando lo pongo a 1024 x 768 cada cosa sale por un lado y unas encima de otras...
Gracias.
  #6 (permalink)  
Antiguo 08/06/2009, 05:41
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ayuda con div

Estas usando position relative o absolute?
__________________
No diseñes usando tablas.
  #7 (permalink)  
Antiguo 08/06/2009, 05:45
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

absolute.
hechale un vistazo a la pagina worksafesupportsolutions.co.uk/style.css
  #8 (permalink)  
Antiguo 08/06/2009, 05:46
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ayuda con div

Vale, entonces ese es el problema, si es absolute, toma siempre como referencia la izquierda y parte superior, por lo que siempre habrá la misma distancia aún sean resoluciones diferentes. Yo te aconsejaría que cambiaras tu diseño a relative y trabajarás desde ahí.
__________________
No diseñes usando tablas.
  #9 (permalink)  
Antiguo 08/06/2009, 05:48
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

voy a probar, gracias por tu ayuda
  #10 (permalink)  
Antiguo 08/06/2009, 05:54
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

lo intento con relative, pero al ponerlo relative no puedo poner una capa encima de otra no?
  #11 (permalink)  
Antiguo 08/06/2009, 05:56
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ayuda con div

A que te refieres con una capa encima de otra?

PD: Edita y no doble-postees :)
__________________
No diseñes usando tablas.

Última edición por hades87; 08/06/2009 a las 06:07
  #12 (permalink)  
Antiguo 08/06/2009, 05:58
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

la pagina que me han pedido es una imagen, encima de esa imagen otra...encima otra etc...
si la pongo en relative la imagen que va encima de la primera siempre va a estar al final
con lo cual no puedo ponerla encima nunca.
sorry por lo del doble posteo ^^
  #13 (permalink)  
Antiguo 08/06/2009, 06:08
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ayuda con div

Eso lo podrías tratar con z-index, pero que lógica tiene la de ir poniendo imágenes una encima de otra?
__________________
No diseñes usando tablas.
  #14 (permalink)  
Antiguo 08/06/2009, 06:13
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

te explico desde 0.
ellos me dieron una serie de imagenes y la pagina como tendria que quedar al final.
con lo cual, la idea que se me ocurrio era hacerla con flash, pero me dijeron que no, que flash no les gusta a si que la unica forma que conocia era hacerla con capas e ir poniendo una encima de otra.
si te fijas en la pagina web, la parte amarilla es una imagen, y la medalla es otra
con lo cual la parte amarilla esta por debajo y la medalla por encima, al igual que el titulo es otra imagen.
  #15 (permalink)  
Antiguo 08/06/2009, 06:16
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con div

<!-- EDITO: mientras escribía todo lo siguiente me perdí vuestro cruce, pero no influye, creo -->
esta línea la tienes dentro de body, debe esta en head:
Cita:
<LINK REL="stylesheet" TYPE="text/css" HREF="Worksafe_files/style.css">
En el css suprime de body lo que te tacho:
Cita:
BODY {color:#0202EC; font-size:19px; font-family:Arial, Helvetica, sans-serif; /* margin:auto; width:800; height:600*/}
cambia las propiedades de:
Código css:
Ver original
  1. #micapa {position:relative; margin: 0 auto; width: 1124px; height: auto; overflow:hidden;}
en el html, borra todo lo refente a las tablas:
Código html:
Ver original
  1. <body>    
  2. <table><!-- esto lo borras-->
  3. <tr><!-- esto lo borras-->
  4. <td><!-- esto lo borras-->
  5. <DIV ID="micapa">
  6.       <img src="Worksafe_files/3.JPG" />
  7.         </div><!-- este cierre lo quitas de aquí y lo pones justo antes de cerrar el body-->
  8.           ------------
  9.           ------------
  10. </td><!-- esto lo borras-->
  11. </tr><!-- esto lo borras-->
  12. </table><!-- esto lo borras-->
  13. </DIV><!-- este es el cierre trasladado de #micapa -->
  14. </body>
y a todos tus #micapa2 a #micapa6 cambias la referencia de posicionamiento Top/lef a px en vez de % y suprimes lo de "margin-left:auto; margin:right:auto;"

Creo que puedes empezar por eso. Quizás me he dejado algo. Ya dirás.

Y para que comprendas los porqués de los cambios propuestos, échale un vistazo a la guías de migración I y II de Mikmoro en el foro de css.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 08/06/2009 a las 06:21
  #16 (permalink)  
Antiguo 08/06/2009, 06:18
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: ayuda con div

Eso lo puedes hacer, teniendo un contenedor principal, que le pondrías la iamgen de fondo esa amarilla y dentro de ese contenedor principal, podrías hacer uno mas pequeño situado a la izquierda y meter la medalla dentro de ese y luego otro a la derecha con la imagen del mapa como fondo de pantalla y el menú en el.

Para mas información sobre este tema, pásate por el foro de CSS, que te podrán ayudar mucho mas.
__________________
No diseñes usando tablas.
  #17 (permalink)  
Antiguo 08/06/2009, 06:33
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

kseso muchisimas gracias tio ^^
ya esta todo resuelto, joder, cuando sea mayor quiero ser como vosotros, quiero ser diseniador web, pero aun me queda mucho que aprender jeje.
ahora estoy de practicas en inglaterra aprendiendo el idioma y tal ^^
un abrazo muy fuerte y gracias a los dos
  #18 (permalink)  
Antiguo 08/06/2009, 06:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: ayuda con div

nada, Cafar, ha sido un placer.

"cuando seas mayor..." ¿qué me estas llamando? nah

Pues si te aburres entre tanto "inglisito" puedes pasar de vez en cuando por www.librosweb.es creo que te ayudará.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #19 (permalink)  
Antiguo 08/06/2009, 06:55
 
Fecha de Ingreso: junio-2009
Mensajes: 10
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: ayuda con div

he estudiado css, javascript, php y html
cual es el libro que mejor me vendria?
  #20 (permalink)  
Antiguo 08/06/2009, 15:58
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: ayuda con div

Hola:

Con lo que hay en la página que te indica Kseso? tienes para una temporada. Son unos libros muy buenos pero no por ellos dejes sueltas a las inglesitas.

Saludos.

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:08.