Foros del Web » Creando para Internet » HTML »

Para empezar algunas DUDAS sobre como organizar la pagina

Estas en el tema de Para empezar algunas DUDAS sobre como organizar la pagina en el foro de HTML en Foros del Web. Hola a todos, Este es mi primer mensaje en el foro, así que aprovecho para saludar a esta comunidad que conocí hace poco y en ...
  #1 (permalink)  
Antiguo 24/05/2010, 09:49
 
Fecha de Ingreso: mayo-2010
Ubicación: Bilbao
Mensajes: 105
Antigüedad: 13 años, 11 meses
Puntos: 1
Algunas DUDAS: [Actualizado] Como centrar verticalmente la página?

Hola a todos,

Este es mi primer mensaje en el foro, así que aprovecho para saludar a esta comunidad que conocí hace poco y en la que me he animado a incorporarme.

He posteado en la sección de HTML, pero no lo tengo muy claro si tiene que ir aquí o en la sección de dreamweaver, si estoy equivocado que algun moderador lo mueva a donde le corresponda.

Voy a explicaros un poco el tema para ver si alguien me puede echar un cable. He empezado a construir (o eso intento ) una página web para la pyme en la que trabajo. Después de tragarme alrededor de 20 horas de videotutoriales y enredar mucho con el dreamweaver creo que estoy preparado para hacerlo, pero hay algunas cosas que quisiera hacer que no me acaban de salir.

Para empezar os cuelgo una imagen del diseño conceptual de la página realizado con el fireworks.

[

http://img194.imageshack.us/img194/6848/webxb.jpg

Como podeis observar el diseño es bastante sencillo/estandar. Consta de una cabecera fija con cuatro enlaces bajo ella que vincularían a una barra vertical izquierda formado por un acordeon spry. A la derecha tendría el cuerpo de la página donde aparecerían las fotos dentro de un tabbed panel spry y una pequeña descripción tambien dentro de otro tabbed panel.

Os explico como tenía pensado hacerlo y me corregis/asesoráis si lo veis conveniente.

La idea es utilizar una plantilla de dreamweaver XHTML de 2 columnas fijas, barra lateral izquierda, encabezado y pie (este último por ahora no lo necesitaría). Quiero que la página se quede centrada verticalmente con lo que creo esta es una buena opción, y para que me quede centrada verticalmente meteré todo el <body> en un div al que daré un tamaño fijo de 955x600 (he leido por ahí que es el recomendado).

La cabecera la haré con photoshop/fireworks y la meteré dentro de el encabezado. Los botones de los vinculos principales los meteré en el cuerpo de la página y pinchando en ellos se abrirán 4 nuevas páginas que variarán únicamente la barra lateral izquierda. He pensado que voy a hacer la primera página y usaré esa para hacer una plantilla para las cuatro, de manera que si modifico la plantilla se actualicen todas.

En la barra lateral colocaré un acordeon spry con por ejemplo cuatro campos y es aquí donde me aparece la primera duda:

DUDA 1- Por más que lo intento no doy con la manera de que el acordeon aparezca con todos los campos replegados cuando abro la página (se como cambiar cual de ellos abrir por defecto, pero no doy con la manera de que esten todos ellos cerrados al empezar).

Al abrir el acordeon, saldrán los comentarios spry con las minifotos (esto lo tengo dominado).

DUDA 2- había pensado meter cada una de los "proyectos" en un iframe dentro del <body> y vincularlo como una página html externa, de manera que fueran como fichas que segun el proyecto marcado fueran cambiando. Esto me simplificaría el trabajo ya que las crearía todas a su vez de una plantilla. ¿Me recomendais hacerlo así?

Bien una vez dentro del iframe. En cada ficha de estas, tenía pensado colocar un tabbed panel con una serie de fotos que cambiarian segun el "tab" pulsado, me interesado sobre todo por lo simple que es añadir una nueva pestaña. Pero es aquí donde me aparece mi principal problema.

DUDA 3. Ya he hecho pruebas con los css para lograr meter las fotos de los circulos de color como se ve en la imagen que he subido, hasta ahí bien. Pero, no hay manera de que las pestañas ( el conjunto de circulos numerados) vayan debajo de las fotos. En un videotutorial aprendí a colocarlos como una secuencia vertical a la izquierda (cosa que no quiero), pero no consigo "cortar" las pestañas y "pegarlas" debajo de los campos del contenido.

Bueno, para empezar (creo que ya me he extendido bastante), con esas dudas tendría la mayor parte de los problemas solucionados. Al menos los que conozco

Gracias de antemano y un saludo

Última edición por itzaliluna; 26/05/2010 a las 04:11 Razón: No se ve la foto (sigue sin verse)
  #2 (permalink)  
Antiguo 25/05/2010, 01:33
 
Fecha de Ingreso: mayo-2010
Ubicación: Bilbao
Mensajes: 105
Antigüedad: 13 años, 11 meses
Puntos: 1
Respuesta: Para empezar algunas DUDAS sobre como organizar la pagina

Hola,

He encontrado la respuesta a la primera de las dudas que os planteaba ayer. La de como presentar por defecto un acordeon con todos los paneles cerrados

Hay que editar lel script del acordeon de la siguiente manera:

var Accordion1 = new Spry.Widget.Accordion("Accordion1",{ useFixedPanelHeights: false, defaultPanel:-1});

Con el useFixedPanelHeights: false se consigue que los paneles tengan la altura variable en funcion de su contenido, y con el defaultPanel se indica cual quieres que aparezca abierto por defecto ( si se pone 0 será el primero, 1 el segundo, 2 el tercero, ... y si se pone -1 por defecto salen cerrados).

Bueno, hasta aquí solucionada la primera duda, quedan otras dos, sobre todo la DUDA 3 que no me deja dormir.

Un saludo
  #3 (permalink)  
Antiguo 26/05/2010, 00:50
 
Fecha de Ingreso: mayo-2010
Ubicación: Bilbao
Mensajes: 105
Antigüedad: 13 años, 11 meses
Puntos: 1
Respuesta: Para empezar algunas DUDAS sobre como organizar la pagina

Hola, ante la avalancha de respuestas a mis consultas, he seguido volviendome loco con el tema buscando por la red posibles soluciones. Creo que he dado con la clave así que lo expongo por si a alguien le resulta interesante o le sirve de ayuda.

Respeto a la DUDA 2, he comprobado que funciona perfectamente meter los enlaces a páginas externas dentro de un iframe colocado mediante un div de posicionamiento absoluto. Sigo sin saber si es la mejor solución, pero es lo que hay dada mi falta de experiencia.

Y en relación a mi DUDA 3, al final era más sencillo de lo que pensaba, había hecho pruebas moviendo las partes del código del propio spry y provocaba que este dejara d efuncionar correctamente. La solución estaba en reposicionar los elementos TAB y CONTENT mediante CSS de manera que el content estuviera en una posición absoluta en 0px respecto de la parte de arriba y en cambio los TAB lo he puesto en una posición separada de la parte de arriba tan alta como la foto, también he conseguido que me funcione con las opciones de posición fixed y dando un padding superior a las TAB. No se si esta también es una solución algo rudimentaria pero cuando no hay más.

Gracias en cualquier caso a aquellos que habéis entrado en el post a interesaros por el tema.
Seguiré usando este hilo si es que me aparece algun problema para poder consultaros.

Un saludo

Última edición por itzaliluna; 26/05/2010 a las 00:52 Razón: correción ortográfica
  #4 (permalink)  
Antiguo 26/05/2010, 04:18
 
Fecha de Ingreso: mayo-2010
Ubicación: Bilbao
Mensajes: 105
Antigüedad: 13 años, 11 meses
Puntos: 1
¿Como centrar verticalmente la página?

Hola,

Sigo enredando para darle formato a la página web y me he encontrado con el siguiente problema. Como explicaba anteriormente la página esta pensada para ir centrada en el navegador, tanto horizontal como verticalmente, ya que no quiero que aparezca ningun scroll pues toda la navegación funcionará con botones/pestañas.

Para centralo horizontalmente he seleccionado todo el body y lo he envuelto en un div al que le he asignado una clase con 980px de ancho y con margenes automáticos a ambos lados de manera que se centra solo.

El problema es que no consigo que se centre verticalmente, he intentado asignarle una altura de 600px e intentar poner margenes automáticos arriba y abajo, pero no sirve

#envoltorio {
height: 600px;
width: 980px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}

¿Alguna idea de lo que puedo hacer?

Gracias
  #5 (permalink)  
Antiguo 06/07/2010, 06:59
 
Fecha de Ingreso: mayo-2010
Ubicación: Bilbao
Mensajes: 105
Antigüedad: 13 años, 11 meses
Puntos: 1
Respuesta: Para empezar algunas DUDAS sobre como organizar la pagina

Recupero el tema para explicar como conseguí finalmente centrar la página tanto horizontalmente como verticalmente.

Se consigue de una manera similar, envolviendo todo el body dentro de un div y asignándole un estilo css de la siguiente manera

#envoltorio {
height: 570px;
width: 980px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -490px;
margin-top: -285px;
}

El truco está en posicionarlo de manera absoluta con el top y left al 50% y asignándole luego un margen arriba e izquierda la mitad del tamaño del div.

Espero que a alguien le pueda ser de ayuda.

Si queréis ver como funciona os invito a visitar la web (ya está bastante avanzada, aunque quedan algunos detalles estéticos y algunas fichas por completar y subirlo al google para iniciar el posicionamiento). Aun asi, estoy bastante contento con el resultado.

http://www.asga-arquitectos.com/


PD: He comprobado que da algun problemilla cuando se visualiza en un Iphone con la pantalla en posición apaisada (en vertical funciona bien). No sé solucionarlo, pero todo no puede ser

Etiquetas: empezar, organizar
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 06:32.