Modificar ancho de DIVs según la sección de la web

laylu · #1 (**permalink**) 16/05/2009, 06:16

Buenas tardes,

Me gustaría saber cómo modificar el ancho de los DIVs según en qué sección me encuentre de la web.

Ejemplo: En index.html, hay dos DIVs de misma anchura, pero en conocenos.html, la base es la misma pero la anchura de los DIVs quiero que sea distinta, que uno sea mayo y el otro menor.

Gracias de antemano.

P.D.: Cuando tenga 30 mensajes publicaré imágenes descriptivas para esto ...

Urdaris_Nox · #2 (**permalink**) 16/05/2009, 06:24

Cita:

Iniciado por laylu

Buenas tardes,

Me gustaría saber cómo modificar el ancho de los DIVs según en qué sección me encuentre de la web.

Ejemplo: En index.html, hay dos DIVs de misma anchura, pero en conocenos.html, la base es la misma pero la anchura de los DIVs quiero que sea distinta, que uno sea mayo y el otro menor.

Gracias de antemano.

P.D.: Cuando tenga 30 mensajes publicaré imágenes descriptivas para esto ...

¿Modificar el ancho de un div?

Podrías poner algo de código, pero ya de antemano, el ancho de los div se define con el parámetro "width", solo has de definirlo diferente en cada página... o en cada div, por que una página puede contener múltiples div...

laylu · #3 (**permalink**) 16/05/2009, 06:38

Gracias por la respuesta pero no me he explicado bien.

<div class="body">
<div class="menu">
<a href="miweb">Inicio</a>
<a href="miweb/conocenos">Conócenos</a>
</div>

<div class="columna1">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..
</div>

<div class="columna2">
<h2> Noticias de última hora </h2>
</div>

La columna1 tiene un width de 200 y la columna2 también (definidos en el css.css principal).

Si le doy al enlace "Conócenos" quiero que se cargue de nuevo la página, mostrando el contenido de "Conócenos" en la columna1 y que ésta tenga un width de 350, y que la columna2 se reduzca a 50.

La base quiero que sea siempre la misma, mismo menú, mismo banner, mimsa estructura, mismos DIVs (los que haya), pero como he accedido a una sección, quiero que ésta aparezca en un DIV en concreto y que altere su tamaño.

He encontrado una web que lo hace:

quiropracticvalencia [punto] es

Si le damos a un subapartado de, por ejemplo, La Quiropráctica - Síntomas, aparece de nuevo toda la web pero desaparece una columna y las dos que quedan modifican su anchura (o son nuevas ... , pero lo que está claro es que la base es la misma).

Atentamente, laylu.

kseso? · #4 (**permalink**) 16/05/2009, 06:51

Varias opciones.

-Renombra esas columnas en el html de "conocenos" y dale las propiedades en el css

-al div contenedor de toda la página márcalo con un identificador:

Código html:

Ver original<body>
<div id="conocenos"><!-- aquí todos los contenidos --></div>
</body>

y en el css le das la anchura:

Código css:

Ver original#conocenos .columna1 {width: 350px;}
#conocenos .columna2 {width: 50px;}

laylu · #5 (**permalink**) 16/05/2009, 07:02

Gracias una vez más pero no es exactamente lo que necesito ... a ver, haré un mock-up con el Fireworks y os lo cuelgo para que quede claro lo que quiero.

Dadme unos minutos, porfavor.

http [dospuntos] //farm4.static.flickr.com/3660/3536075338_e069d305f7_b [punto] jpg

laylu · #6 (**permalink**) 16/05/2009, 07:30

La imagen que lo ilustra (espero que suficientemente claro).

La base de la web se mantiene siempre, y cuando se hace clic en un enlace, éste muestra la sección en el DIV contenido, en el DIV columna1 que corresponde.

El contenido, lógicamente, lo escribo yo en un .html sin formato, así cuando aparece en el DIV, adopta el formato del css.css.

http [dospuntos] //farm4.static.flickr.com/3660/3536075338_e069d305f7_b [punto] jpg

Así pues, el index.html sólo tengo que escribirlo una vez, lo que debe cambiar es la info del css (supongo que machacando la anterior, no ?), y es eso lo que no se hacer; lo de miweb.com/la_sesion que sea solamente cambiar el contenido de un par de DIV y modificar también el estilo de estos (en este caso la anchura).

Gracias por aguantarme ! :* !

kseso? · #7 (**permalink**) 16/05/2009, 08:22

Bien, ahora sí queda claro.

Entre otras posibles formas, tienes dos:
1ª: uso de listas desordenadas ul/li Ver ejemplo
2ª con algún script para mostrar el contenido de cada pestaña ver ejemplo

Lo anterior supone que todo esté en el mismo archivo html
Si quisieras incluirlo desde otra ubicación (base de datos, archivos de texto...) necesitarías también el uso de algún otro lenguaje, como php.

Espero haberte comprendido bien.

Mikmoro · #8 (**permalink**) 16/05/2009, 13:40

laylu: no he leído todo el hilo, pero según la explicación de tu último mensaje diría que lo que necesitas es AJAX.

arthpix · #9 (**permalink**) 16/05/2009, 14:16

@laylu:
Coincido con Mikmoro, para no tener que cargar una página diferente necesitas AJAX.

Sin embargo en el ejemplo que pones no esta hecho de esa manera, puesto que al darle click al enlace que mencionas te dirige a otra pagina (mira la barra de direcciones en tu navegador). Por lo que PHP te podría servir. Con el uso de includes, puedes llamar a páginas o documentos externos de cualquier tipo dentro de un DIV.

Saludos

PD. Mikmoro, gracias por tu comentario, ahora si procuraré ser claro a quien dirijo el mensaje.

laylu · #10 (**permalink**) 17/05/2009, 05:03

Buenos días !

Lamento la tardanza pero me pasé la tarde de ayer con otro tema (aunque también de PCs, por desgracia).

A ver, en lo que respecta a AJAX o PHP. Imaginemos que no quiero liarme tanto, y con un poco de PHP para mostrar según qué dependiendo del enlace en el que he hecho click en la propia web, que se cargue toda de nuevo pero que sólo varíe la parte que muestra el contenido.

Hoy, por casualidad y navegando por la inmensidad de éste foro lleno de arte y conocimiento he dado con lo que quiero: calizman com/ competencia/ pao/ home html. Es justamente esto, que todo siga igual pero que se modifique sólo esa parte. Es un ejemplo perfecto. En lo que respecta a modificar el ancho de los DIVs, ya no se si voy a saber hacerlo, pero lo del contenido sí; aunque no creo que sea tampoco muy complicado, si he llegado hasta aquí (es que esta mañana he ido avanzando con la web y parece que algo está creciendo ...).

Si puede alguien indicarme cómo debería hacerlo en plan genérico para cada sección y que se muestre en el DIV correspondiente, le estaría eternamente agradecido.

Nada más pues, seguiré peleándome con el CSS para el home.

Atentament, laylu.

P.D.: Mi server soporta desde PHP5 en adelante, pero quiero evitar las BBDD ya que la página, una vez echa, no sufrirá modificaciones ni grandes adiciones de contenido que deba ser indexado y tal, con modificar el algún .html bastará. El Javascript me ayudará a escoger qué quiero mostrar.

laylu · #11 (**permalink**) 17/05/2009, 05:09

Apunte: Acabo de fijarme bien en el ejemplo que he puesto aquí y no es exactamente cómo lo describo, sino que aparece todo patapam, de la nada, y no cargando la página de nuevo. También me vale ! :þ !

Mikmoro · #12 (**permalink**) 17/05/2009, 05:18

Cita:

Iniciado por laylu

El contenido, lógicamente, lo escribo yo en un .html sin formato, así cuando aparece en el DIV, adopta el formato del css.css.

Así pues, el index.html sólo tengo que escribirlo una vez, lo que debe cambiar es la info del css (supongo que machacando la anterior, no ?)

Si te comentaba lo de AJAX es porque el ejemplo que comentas
http://calizman.com/competencia/pao/home.html
no está hecho como indicas ahí, es decir, no creas el contenido variable cada uno en su HTML que cambiarás con un click; eso se hace con AJAX.

Lo del ejemplo es cargar todo el contenido en el mismo HTML y mostrarlo u ocultarlo a voluntad mediante CSS, lo que en cierta manera complica la edición del index.html, que era justamente lo que no querías.

Puedes ver un ejemplo de eso hecho sólo con CSS aquí

laylu · #13 (**permalink**) 17/05/2009, 05:28

Gracias por la aclaración del ejemplo.

Entonces cómo me recomiendas empezar para cargar los .html según la sección ? O explícame dónde puedo dirigirme para ver un ejemplo en AJAX que use lo que necesito o ... No sé, oriéntame un poco más que yo empezaré a andar.

Atentamente, Pol.

Mikmoro · #14 (**permalink**) 17/05/2009, 07:13

Mira: aquí tienes un ejemplo bastante sencillo. Luego tienes un subforo dentro de javascript dedicado enteramente a AJAX.

laylu · #15 (**permalink**) 17/05/2009, 08:38

Perfecto ! Gracias por todo ! Me meto de cabeza !

laylu · #16 (**permalink**) 29/05/2009, 08:59

Mikmoro, respecto a tu última respuesta, he colgado ésta consulta en el subforo AJAX: forosdelweb.com/f77/paginar-por-capas-resetando-pagina-704350/#post2936279

Atentamente, laylu.