Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Modificar ancho de DIVs según la sección de la web en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 16/05/2009, 07:16
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Pregunta Modificar ancho de DIVs según la sección de la web

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 ...
  #2 (permalink)  
Antiguo 16/05/2009, 07:24
 
Fecha de Ingreso: mayo-2008
Mensajes: 103
Antigüedad: 9 años, 6 meses
Puntos: 14
Respuesta: Modificar ancho de DIVs según la sección de la web

Cita:
Iniciado por laylu Ver Mensaje
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...
  #3 (permalink)  
Antiguo 16/05/2009, 07:38
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Pregunta Respuesta: Modificar ancho de DIVs según la sección de la web

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.
  #4 (permalink)  
Antiguo 16/05/2009, 07:51
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Modificar ancho de DIVs según la sección de la web

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
  1. <div id="conocenos"><!-- aquí todos los contenidos --></div>
  2. </body>
y en el css le das la anchura:
Código css:
Ver original
  1. #conocenos .columna1 {width: 350px;}
  2. #conocenos .columna2 {width: 50px;}
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 16/05/2009, 08:02
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Exclamación Respuesta: Modificar ancho de DIVs según la sección de la web

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

Última edición por laylu; 16/05/2009 a las 08:26
  #6 (permalink)  
Antiguo 16/05/2009, 08:30
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Sonrisa Respuesta: Modificar ancho de DIVs según la sección de la web

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 ! :* !
  #7 (permalink)  
Antiguo 16/05/2009, 09:22
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Modificar ancho de DIVs según la sección de la web

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.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 16/05/2009 a las 10:11 Razón: clarificar
  #8 (permalink)  
Antiguo 16/05/2009, 14:40
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
Respuesta: Modificar ancho de DIVs según la sección de la web

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.
  #9 (permalink)  
Antiguo 16/05/2009, 15:16
Avatar de arthpix  
Fecha de Ingreso: diciembre-2003
Ubicación: Cancún
Mensajes: 2.340
Antigüedad: 14 años
Puntos: 93
Respuesta: Modificar ancho de DIVs según la sección de la web

@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.
__________________
Antes de hacer rabietas infórmate: Linux != Windows
  #10 (permalink)  
Antiguo 17/05/2009, 06:03
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Modificar ancho de DIVs según la sección de la web

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.
  #11 (permalink)  
Antiguo 17/05/2009, 06:09
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Modificar ancho de DIVs según la sección de la web

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 ! :þ !
  #12 (permalink)  
Antiguo 17/05/2009, 06:18
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
Respuesta: Modificar ancho de DIVs según la sección de la web

Cita:
Iniciado por laylu Ver Mensaje
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í
  #13 (permalink)  
Antiguo 17/05/2009, 06:28
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Modificar ancho de DIVs según la sección de la web

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.
  #14 (permalink)  
Antiguo 17/05/2009, 08: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
Respuesta: Modificar ancho de DIVs según la sección de la web

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

Última edición por Mikmoro; 17/05/2009 a las 11:03 Razón: Ortografía
  #15 (permalink)  
Antiguo 17/05/2009, 09:38
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Modificar ancho de DIVs según la sección de la web

Perfecto ! Gracias por todo ! Me meto de cabeza !
  #16 (permalink)  
Antiguo 29/05/2009, 09:59
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 8 años, 7 meses
Puntos: 0
Respuesta: Modificar ancho de DIVs según la sección de la web

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.
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 23:44.