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

Mas problemas con las resoluciones...

Estas en el tema de Mas problemas con las resoluciones... en el foro de Diseño web en Foros del Web. Hola buenas tardes a [email protected], esta es la duda que planteo... He de diseñar una página para un empresa y me han dado otra web ...
  #1 (permalink)  
Antiguo 12/10/2007, 07:36
Avatar de andrenalina  
Fecha de Ingreso: octubre-2007
Ubicación: Sevilla City, España
Mensajes: 2
Antigüedad: 10 años, 2 meses
Puntos: 0
Mas problemas con las resoluciones...

Hola buenas tardes a [email protected], esta es la duda que planteo... He de diseñar una página para un empresa y me han dado otra web de otra empresa diferente como referencia. Pues bien, la cuestión es que la web que me han dado como referencia se ajusta a todas las resoluciones de pantallas. Desde 640 hasta 1680 píxeles y no se como lo habrán hecho. He posteado este tema porque he mirado más temas, comentarios y faqs de esta web pero no hay manera, no doy con la tecla. La página está programada con JSP, pero no se si es una etiqueta específica de ese lenguaje o puede ser otra cosa. Busco alguna manera alternativa de hacerlo pero que quede igual. Aquí os dejo la web que me han dado como referencia, a ver si alguien sabe una solución posible, investigando el código fuente.

http://www.gasso.com

Gracias a [email protected] de antemano y salu2!
  #2 (permalink)  
Antiguo 12/10/2007, 08:08
Avatar de lucasan
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: Cali - Colombia
Mensajes: 1.144
Antigüedad: 10 años, 6 meses
Puntos: 59
Re: Mas problemas con las resoluciones...

Es una maquetación con CSS, se llama diseño fluido o líquido, en vez de dar a la pagina un ancho determinado (por ejemplo 960 px) la trabajas basado en porcentajes, dichos porcentajes son relativos a la rtesolución de la pantalla.

Por ejemplo, un ancho al 100% se ajustará al total de la pantalla, no importa cual sea la resolución que maneje.

Para esto debes apender CSS (Asumo que sabes HTML) y te quedará facil, solo es cuastión de leer y practicar con paciencia.

Te dejo unos enlaces.

http://www.webestilo.com/css/

http://www.w3.org/Style/Examples/011/firstcss.es.html (este es de la w3c, muy bueno y completo)

http://www.cristalab.com/tutoriales/...-basico-de-css

http://www.cristalab.com/tutoriales/...-layout-en-css (este trata el tema especifico que necesitas)

Saludos, y suerte
__________________
Plan Original Desarrollo Web
~$>sudo apt-get install -f
"Asi debería arreglarse todo en la vida"
  #3 (permalink)  
Antiguo 12/10/2007, 12:42
 
Fecha de Ingreso: mayo-2007
Mensajes: 19
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Mas problemas con las resoluciones...

bueno, nose si alguien pueda poner el codigo si no seria mucha molestia, yo tambien paso por el mismo problema de la resolucion.
  #4 (permalink)  
Antiguo 12/10/2007, 13:12
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Re: Mas problemas con las resoluciones...

Hola, un ejempo sería...

Código:
#contenedor
{
width=80%;
border=1px solid #cccccc;
}
Lo que se quiere decir ahì es que un "algo" va a a tener un ancho de 80% y su borde va a hacer de un 1px tipo sólido y de color gris claro...

Ahora ese "algo" para mi será un div, de esta manera quedarìa

Código HTML:
<div id="contenedor">El contenido del div</div> 
Es algo bàsico..., manejar porcentajes para maquetar "liquidamente" , creo que eso también se puede hacer con la unidad em, pero nunca la he utilizado...

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #5 (permalink)  
Antiguo 12/10/2007, 15:19
Avatar de andrenalina  
Fecha de Ingreso: octubre-2007
Ubicación: Sevilla City, España
Mensajes: 2
Antigüedad: 10 años, 2 meses
Puntos: 0
Re: Mas problemas con las resoluciones...

Se me acaban de caer las tapaeras del sentío.... JAJAJAJAJA. Un millón de gracias a to2, en especial a "lucasan". Muchas gracias por tu clara explicación, lo he entendido perfectamente, lo que no entiendo es como no he caído antes ... Descuida que con CSS me defiendo más o menos bien. Si necesitais cualquier cosita, trataré de ayudaros en lo que nesesitéis...

Saludos cordiales desde Sevilla, Andi.
  #6 (permalink)  
Antiguo 12/10/2007, 16:15
Avatar de The_Dark_Roy  
Fecha de Ingreso: enero-2004
Mensajes: 218
Antigüedad: 13 años, 11 meses
Puntos: 0
Re: Mas problemas con las resoluciones...

gracias por todo me srivio
__________________
ojala te hayas quitado la venda

http://www.surire.cl
http://www.uta.cl
  #7 (permalink)  
Antiguo 16/10/2007, 22:52
 
Fecha de Ingreso: mayo-2007
Mensajes: 19
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Mas problemas con las resoluciones...

bueno a todos parece que les quedo en claro, pero ami no . en si, yo quiero para todo el contenido de la pagina, como lo haría y mil disculpas es que recién me inicio en esto.
gracias.
lo olvidaba, ese código id="contenedor" lo pondré a todas las tablas? y a que cosas mas debería hacerlo?
  #8 (permalink)  
Antiguo 17/10/2007, 08:18
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Re: Mas problemas con las resoluciones...

Hola materiaxx...

Pues ese div que dice "contenedor", pues es eso!! un contenedor donde debes introducir toda tu informaciòn, dices que las tablas... mmmm... , sì! las puedes meter dentro de ese contenedor y automàticamente las tablas tomaràn el tamaño del padre... osea el div contenedor; a menos que tù implicitamente le cambies el width a las tablas, ellas tomarán el ancho del contenedor... eso se llama herencia.

Osea en conclusiòn tu puedes "meter" todo lo que quieres en ese contenedor... ademàs si va a hacer el papel de contenedor general... osea el contenedor "padre", debes colocarle el atributo "margin:auto;", para que ese contenedor se centre respecto a la pantalla del computador.

Quedarìa así:
Código:
#contenedor
{
width=80%;
border=1px solid #cccccc;
margin:auto;
}
Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #9 (permalink)  
Antiguo 22/10/2007, 01:15
 
Fecha de Ingreso: mayo-2007
Mensajes: 19
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Mas problemas con las resoluciones...

lo que pasa es que trabajo con marcos, este contiene 3 (una cabecera, uno de columna isquierda i el ultimo de cuerpo) la columna isquierda i el cuerpo estan con medidas en porcentajes solo para la cabecera lo puse con pixels y el objeto nose como ajustarlo al 100% de largo o centrarlo diria mejor mm... disculpa si no me dejo entender, mejor te dejo el codigo.

MARCOS.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

<frameset rows="185,51%" cols="*" framespacing="2" frameborder="yes" border="2" bordercolor="#999999">
<frame src="cabecera.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
<frameset rows="*" cols="17%,83%" framespacing="2" frameborder="yes" border="2" bordercolor="#999999">
<frame src="isq.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="cuerpo.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>



CABECERA

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title><style type="text/css">
<!--
body {
background-color: #003399;
}
-->
</style></head>

<body>
<div align="left">
<p>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="788" height="162" align="middle">
<param name="movie" value="flash/13.swf" />
<param name="quality" value="high" />
<embed src="flash/13.swf" width="788" height="162" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"> </embed>
</object>
</p>
</div>
</body>
</html>


mejor te dejo la imagen de como se ve, i ojala me digas como centrar esa cabecera
http://s1.subirimagenes.com/imagen-de-pagina1-1551951.html
y si me ayudaras tambien con esa tabla que no se ajusta a la columna isquierda.
Muchisimas gracias CARXL espero no incomodarte.
  #10 (permalink)  
Antiguo 23/10/2007, 08:28
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Re: Mas problemas con las resoluciones...

Hola materiaxx, còmo vas?? No no me incomodas

Vi tu link, y segùn lo que te entiendo y veo es que quieres centrar la imagen del encabezado..., sí esa así... pues creo que simplemente es cambiar esto:

Código HTML:
<div align="left"> 
por esto:
Código HTML:
<div align="center"> 
En el marco de la cabecera... creo que no es mas

De todas formas un consejo materiaxx(si me lo permites), los marcos son del año de jummmm!!!! :-p :-p Osea ya no se utilizan... ni tampoco las tablas para presentar el diseño, entonces lo que debes hacer es aprender a maquetar las páginas en CSS. Es lo mas moderno y lo más óptimo actualmente

Saludos, y cualquier cosa me dices...
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #11 (permalink)  
Antiguo 29/10/2007, 21:44
 
Fecha de Ingreso: mayo-2007
Mensajes: 19
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Mas problemas con las resoluciones...

muchas gracias por el consejo Carxl, bueno empesare por leer mas sobre CCS's que me parece bastante interesante y con respecto a la cabecera solo era poner el la alineacion del div en center. otra ves gracias.

a, y nose si me puedas recomendar algunas paginas de como aprender mas a maquetar las paginas en CCS.
  #12 (permalink)  
Antiguo 30/10/2007, 08:37
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Re: Mas problemas con las resoluciones...

Hola de nuevo materiaxx!!!

Busca en la sección de CSS y mira sus FAQ's...

Ese es un principio...

Saludos
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #13 (permalink)  
Antiguo 03/11/2007, 17:01
 
Fecha de Ingreso: mayo-2007
Mensajes: 19
Antigüedad: 10 años, 6 meses
Puntos: 0
Re: Mas problemas con las resoluciones...

gracias, ya me conseguí buenos video tutoriales y espero que a alguien mas les sirva.

CONTRASEÑA DE LOS ARCHIVOS: S4rT1

Lynda.com - Learning CSS 2 (CSS Basico)

Temario: Lynda.com - Learning CSS 2
Tamaño: 307Mb

http://rapidshare.com/files/65123669/CSS2.part1.rar
http://rapidshare.com/files/65131558/CSS2.part2.rar
http://rapidshare.com/files/65140298/CSS2.part3.rar
http://rapidshare.com/files/65115137/CSS2.part4.rar

Lynda.com - CSS Site Design
Temario: Lynda.com - CSS Site Design
Tamaño: 554Mb

http://rapidshare.com/files/65153197/CSSSD.part01.rar
http://rapidshare.com/files/65161698/CSSSD.part02.rar
http://rapidshare.com/files/65174610/CSSSD.part03.rar
http://rapidshare.com/files/65181685/CSSSD.part04.rar
http://rapidshare.com/files/65188226/CSSSD.part05.rar
http://rapidshare.com/files/65254841/CSSSD.part06.rar


Lynda.com - CSS for Designers
Temario: CSS for Designers
Tamaño: 582MB
Es el mejor con difrencia, en el se hace un sitio web entero, incluye como hacer menus desplegables, dar efectos a tablas y formularios. Te enseña se debe maquetar un sitio web (MUY RECOMENDADO)

http://rapidshare.com/files/65279482...ers.part01.rar
http://rapidshare.com/files/65285764...ers.part02.rar
http://rapidshare.com/files/65292390...ers.part03.rar
http://rapidshare.com/files/65260215...ers.part04.rar
http://rapidshare.com/files/65265958...ers.part05.rar
http://rapidshare.com/files/65271770...ers.part06.rar
http://rapidshare.com/files/65273279...ers.part07.rar
Los siguientes libros estan español y estan muy pero que muy bien, realmente hay q felicitar al autor, no importa el nivel que tengas, todo esta estupendamente explicado, la verdad es q me han sorprendido.


En los siguientes libros los contenidos están bajo una licencia Creative Commons Reconocimiento
- No Comercial - Sin Obra Derivada 3.0


CSS (Javier Eguíluz Pérez)

Temario
1. Capítulo 1: Introducción
2. Capítulo 2: Selectores
3. Capítulo 3: Unidades de medida y colores
4. Capítulo 4: Box model
5. Capítulo 5: Posicionamiento y visualización
6. Capítulo 6: Texto
7. Capítulo 7: Enlaces
8. Capítulo 8: Imágenes
9. Capítulo 9: Listas
10. Capítulo 10: Tablas
11. Capítulo 11: Formularios
12. Capítulo 12: Layout
13. Capítulo 13: Otros
14. Capítulo 14: Recursos útiles
15. Capítulo 15: Ejercicios
16. Capítulo 16: Ejercicios resueltos

http://rapidshare.com/files/65146007...uccion_css.pdf


XHTML (Javier Eguíluz Pérez)

Temario
1. Capítulo 1: Introducción
2. Capítulo 2: Características básicas
3. Capítulo 3: Texto
4. Capítulo 4: Enlaces
5. Capítulo 5: Listas
6. Capítulo 6: Imágenes y objetos
7. Capítulo 7: Tablas
8. Capítulo 8: Formularios
9. Capítulo 9: Estructura y layout
10. Capítulo 10: Metainformación
11. Capítulo 11: Otras etiquetas importantes
12. Capítulo 12: Accesibilidad
13. Capítulo 13: Validación
14. Capítulo 14: Fragmentos de código
15. Capítulo 15: Ejercicios resueltos

http://rapidshare.com/files/65146228...cion_xhtml.pdf
  #14 (permalink)  
Antiguo 05/11/2007, 10:52
 
Fecha de Ingreso: octubre-2004
Mensajes: 289
Antigüedad: 13 años, 2 meses
Puntos: 10
Re: Mas problemas con las resoluciones...

Muchas gracias materiaxx.

Por favor, podrías verificar varios enlaces de descarga de Rapidshare, ya que están cortados (por la abreviatura) y no funcionan.

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 13:12.