Foros del Web » Creando para Internet » CSS »

contenedores y sus contenidos

Estas en el tema de contenedores y sus contenidos en el foro de CSS en Foros del Web. ya se me está haciendo costumbre Tengo el siguiente problema, yo quiero realizar tres bloques que permitan ir guardando información como la imágen que detallo. ...
  #1 (permalink)  
Antiguo 06/01/2009, 08:26
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
contenedores y sus contenidos

ya se me está haciendo costumbre

Tengo el siguiente problema, yo quiero realizar tres bloques que permitan ir guardando información como la imágen que detallo.


Ahí se ve, una columna a la izquierda con texto, una al centro con imágen y una a la derecha con un listado.
Hasta allí lo he hecho, pero al momento de visualizarse queda así:


Bueno, esa vista con las líneas verticales es de ie, en ff no ocurre esto (así que aquí estaría el primer tema.
Luego lo que no tengo claro es cómo hacer para que el texto quede como en la imágen primera.

Si me pueden dar una manito, agradecida.

html:
Código:
<div id="cont">
<div id="col_der">

<ul>
					<li><a href=”aresillo.html”>Diseño de Aresillo</a></li>
					<li><a href=”willyfc.html”>Diseño de Willyfc</a></li>
					<li><a href=”dopey-bbs.html”>Diseño de DoPeY-BBS</a></li>
					<li><a href=”alvlin.html”>Diseño de alvlin</a></li>
					<li><a href=”sanchy.html”>Diseño de sanchy</a></li>
					<li><a href=”triby.html”>Diseño de Triby</a></li>
					<li><a href=”javi_cassi.html”>Diseño de javi_cassi</a></li>
					<li><a href=”daes12.html”>Diseño de daes12</a></li>
					<li><a href=”raulmmmm.html”>Diseño de Raulmmmm</a></li>
					<li><a href=”buzu.html”>Diseño de Buzu</a></li>
					<li><a href=”http://www.devillasbuenas.es/fdw/enero/index.html”>Diseño de Kseso</a></li>
					<li><a href=”juaniquillo.html”>Diseño de juaniquillo</a></li>
                                 		                                      <li><a href=”pitufoweb.html”>Diseño de pitufoweb</a></li>
                                                                             </ul>
		
</div>
<div id="col_izq">
                                   <p>Soluciones Web es una empresa dinámica, que se destaca por ofrecer soluciones originales en el desarrollo de la web.  Nuestros servicios 
		se engloban en las áreas de Internet, programación, multimedia, diseño gráfico, traducciones y consultoría.  Asimismo disponemos de soluciones
		adaptadas a las necesidades particulares de cada cliente ofrenciendo un servicio integral.</p>

		<p>Nuestro estudio se compone de profesionales programadores capacitados en la últimas tecnologías y de diseñadores que van más allá de una pantalla
		de ordenador.</p>

		<p>La confianza de nuestros clientes y los resultados obtenidos desde hace 10 años de creciente trabajo, convirtieron a Soluciones Web en el líder en 
		servicios web de habla hispana.</p>

		<p>La ética de nuestros integrantes, la superación constante y la forma de trabajar, destacándonos siempre con una estética diferente a la media, hace que
		hoy usted nos elija.</p>
		
</div>
<div id="col_cen"><img src="http://www.forosdelweb.com/images/robotito.png" alt="mascota de la firma" /></div>
</div>
css:

Código:
/* estilo del cuerpo */

#cont {height: 515px;margin:0px;}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 250px;background-color: #231f1f;}
#col_izq {float: left; width: 300px;background-color: #231f1f; font-size: 14px;}
#col_cen {background-color: #231f1f;}


.corte {clear: both;}

Me faltó agregar algo:
En este caso específico, necesitaría que las columnas no variaran su tamaño conforme el contenido.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog

Última edición por pao01; 06/01/2009 a las 09:10 Razón: Agregar aclaración.
  #2 (permalink)  
Antiguo 06/01/2009, 11:57
 
Fecha de Ingreso: mayo-2008
Mensajes: 33
Antigüedad: 9 años, 7 meses
Puntos: 1
Respuesta: contenedores y sus contenidos

tienes que darle un padding a la columna de la izquierda:
padding: 20px 0 0 15px;
No se te olvide que tienes que restar los 15px del padding izquierdo del ancho total del div col_izq. En este momento lo tienes de 300px, ponlo de 285px.

Suerte!
  #3 (permalink)  
Antiguo 06/01/2009, 12:01
Avatar de elututo  
Fecha de Ingreso: mayo-2002
Ubicación: Rio Cuarto, Cordoba
Mensajes: 80
Antigüedad: 15 años, 7 meses
Puntos: 1
Respuesta: contenedores y sus contenidos

Yo no entendi bien cual/cuales son tus preguntas, pero veamos la ultima:

Creo que poniendo overflow:hidden solucionas el tema de que la columna no se adapte al ancho de sus elementos:


#col_der, #col_izq, #col_cen {height: 100%;overflow:hidden}


Me faltó aclarar que lo que hace este comando es ocultar todo lo que sobresale del alto y ancho de la columna, por lo tanto si tenes una imagen mas ancha que la columna se va a ver cortada.
__________________
:::::::: Oscar Paz::::::::::::::::::::::::::
www.oscarpaz.com.ar
www.unicoh.com.ar

Última edición por elututo; 06/01/2009 a las 12:03 Razón: Aclaracion
  #4 (permalink)  
Antiguo 06/01/2009, 12:06
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: contenedores y sus contenidos

elututo, mis preguntas puntuales son:
cómo hacer para que en ie y ff se vea igual, sin esas líneas que dividen cada caja.
cómo hacer que el texto quede centrado (no hablo del efecto centrado), sino que estén al centro de la caja que lo contiene.
y por último hice la aclaración de que en este caso particular no es necesario que cada caja se adapte, sino que se mantenga en un tamaño fijo, ya que la idea no es incorporar nuevo material.
Gracias por tu respuesta, ya lo pruebo y veo que resulta.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #5 (permalink)  
Antiguo 06/01/2009, 13:52
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: contenedores y sus contenidos

hola pao, mira esto es más un truco que una solución en código, si lo que quieres es que se pierdan las líneas blancas que aparecen en explorer, coloca al contenedor el mismo color de fondo que tienen las cajas según el ejemplo que del cual pusiste el código en tu post

Código:
#cont {height: 515px;margin:0px;background-color: #231f1f}
bueno en fin modifique un poco el código de esta manera:

Código:
body{color:#FFFFFF}
#cont {height: 515px;margin:0px;background-color: #231f1f}
#col_der, #col_izq, #col_cen {height: 100%;}
#col_der {float: right; width: 250px;background-color: #231f1f;}
.col_der{ margin:20px 0 0 0;}
#col_izq {float: left; width: 300px;background-color: #231f1f; font-size: 14px;}
.col_izq {padding:20px; text-align:justify}
#col_cen {background-color: #231f1f;}
.col_cen{ padding:20px 10px 0 10px; text-align:center;}
.corte {clear: both;}
Código HTML:
<div id="cont">
<div id="col_der">
	<div class="col_der">
	<ul>
		<li><a href=”aresillo.html”>Diseño de Aresillo</a></li>
		<li><a href=”willyfc.html”>Diseño de Willyfc</a></li>
		<li><a href=”dopey-bbs.html”>Diseño de DoPeY-BBS</a></li>
		<li><a href=”alvlin.html”>Diseño de alvlin</a></li>
		<li><a href=”sanchy.html”>Diseño de sanchy</a></li>
		<li><a href=”triby.html”>Diseño de Triby</a></li>
		<li><a href=”javi_cassi.html”>Diseño de javi_cassi</a></li>
		<li><a href=”daes12.html”>Diseño de daes12</a></li>
		<li><a href=”raulmmmm.html”>Diseño de Raulmmmm</a></li>
		<li><a href=”buzu.html”>Diseño de Buzu</a></li>
		<li><a href=”http://www.devillasbuenas.es/fdw/enero/index.html”>Diseño de Kseso</a></li>
		<li><a href=”juaniquillo.html”>Diseño de juaniquillo</a></li>
        <li><a href=”pitufoweb.html”>Diseño de pitufoweb</a></li>
    </ul>		
	</div>
</div>
<div id="col_izq">
	<div class="col_izq">
     <p>Soluciones Web es una empresa dinámica, que se destaca por ofrecer soluciones originales en el desarrollo de la web.  Nuestros servicios 
		se engloban en las áreas de Internet, programación, multimedia, diseño gráfico, traducciones y consultoría.  Asimismo disponemos de soluciones
		adaptadas a las necesidades particulares de cada cliente ofrenciendo un servicio integral.</p>

		<p>Nuestro estudio se compone de profesionales programadores capacitados en la últimas tecnologías y de diseñadores que van más allá de una pantalla
		de ordenador.</p>

		<p>La confianza de nuestros clientes y los resultados obtenidos desde hace 10 años de creciente trabajo, convirtieron a Soluciones Web en el líder en 
		servicios web de habla hispana.</p>

		<p>La ética de nuestros integrantes, la superación constante y la forma de trabajar, destacándonos siempre con una estética diferente a la media, hace que
		hoy usted nos elija.</p>
		</div>
</div>
<div id="col_cen"><div class="col_cen"><img src="http://www.forosdelweb.com/images/robotito.png" alt="mascota de la firma" width="340" height="378" /></div></div>
</div> 
espero te sirva avisas como te va

Bye
__________________
WFC
codigo82
  #6 (permalink)  
Antiguo 06/01/2009, 14:23
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: contenedores y sus contenidos

Willyfc, Super pero Super Gracias!!!
he resuelto dos conflictos: el de las líneas verticales que ya han desaparecido, y el del formato del texto, ahora no visualizo la info de la columna derecha (pero aquí deja que ya me arreglo pensando un poco, que preciso razonarlo).
Sigo con esto y si surge algo o no puedo con ello vuelvo a avisar.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #7 (permalink)  
Antiguo 06/01/2009, 14:30
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: contenedores y sus contenidos

me alegro que te haya servido, si no puedes con algo no dudes en pasarte por aquí

Bye
__________________
WFC
codigo82
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:08.