Foros del Web » Creando para Internet » CSS »

Maquetación de cuadros

Estas en el tema de Maquetación de cuadros en el foro de CSS en Foros del Web. Amigos estoy haciendo unas divisiones de 3 columnas y 3 filas, la primera fila me sale perfecto, pero la segunda no responde....¿dónde estoy fallando?... Código ...
  #1 (permalink)  
Antiguo 24/03/2011, 12:21
Avatar de el_tigre  
Fecha de Ingreso: febrero-2006
Ubicación: Perú
Mensajes: 1.044
Antigüedad: 18 años, 1 mes
Puntos: 8
De acuerdo Maquetación de cuadros

Amigos estoy haciendo unas divisiones de 3 columnas y 3 filas, la primera fila me sale perfecto, pero la segunda no responde....¿dónde estoy fallando?...

Código CSS
Código PHP:
#content-middle { padding: 0 25px 25px; background: url(../images/content-middle.gif) repeat-y; }
#content-bottom { clear: both; padding: 6px 0 7px; background: url(../images/content-bottom.gif) no-repeat left bottom; }

.column floatleftwidth283pxmargin0 40px 0 0line-height2.2em; }
    .
column.last margin-right0; }
    .
column img padding10pxborder1px solid #ddd; margin: 0 0 5px; }
    
.more a backgroundurl(../images/bullet.gifno-repeat 0 7pxpadding0 0 0 8pxcolor#672A6D; font-weight: bold; font-size: .9em; } 
y esto es mi Html (ejemplo de 2 filas)......
Código HTML:
<div id="content-top"></div>
		<div id="content-middle">
			
		
			<div class="column" align="justify">
				<h3>NOSOTROS</h3>
				<img src="images/nosotros.gif" alt="nosotros" />
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
				
		  </div>

			<div class="column" align="justify">
				<h3>VISION</h3>
				<img src="images/vision.gif" alt="vision" />
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
				
			</div>	
			
			<div class="column last" align="justify">
				<h3>MISION</h3>
				<img src="images/mision.gif" alt="mision" />
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
				
			</div>	
            
			<div class="column" align="justify">
				<h3>ESTRATEGIAS</h3>
				<img src="images/nosotros.gif" alt="nosotros" />
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
				
		  </div>

			<div class="column" align="justify">
				<h3>OBJETIVOS</h3>
				<img src="images/vision.gif" alt="vision" />
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
				
			</div>	
			
			<div class="column last" align="justify">
				<h3>CONTACTOS</h3>
				<img src="images/mision.gif" alt="mision" />
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
				
			</div>	
        
			<div class="clear"></div>
		</div> 
  #2 (permalink)  
Antiguo 24/03/2011, 12:27
 
Fecha de Ingreso: marzo-2011
Mensajes: 20
Antigüedad: 13 años
Puntos: 0
Respuesta: Maquetación de cuadros

Ese codigo tiene MUCHOS errores, te recomiendo que utilises UL no tantos DIVs para hacer algo tan simple.

Este es un ejemplo que me tomo 10 minutos.

Código:
#ContentColumn {
	width: 920px;
	height: 860px;
	position: relative;
	margin: 0 auto;
	background: #ccc;
	border: solid 5px #999;
	padding: 20px;
}
.Columna1 {
	display:block;
	position: absolute;
	left:20px;
	top:20px;
	list-style: none;
	width: 350px;
}
.Columna1 li {
	display:block;
	width: 350px;
	margin-bottom:20px;
}


.Columna2 {
	display:block;
	position: absolute;
	right: 20px;
	top:20px;
	list-style: none;
	width: 350px;
}
.Columna2 li {
	display:block;
	width: 350px;
	margin-bottom:20px;
}
Código HTML:
<div id="ContentColumn">

<ul class="Columna1">
<li>
<h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
</li>

<li>
<h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p></li>

<li>
<h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p>
</li>
</ul>


<ul class="Columna2">
<li><h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p></li>
<li><h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p></li>
<li><h3>VISION</h3>
<img src="images/vision.gif" alt="vision" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting</p></li>
</ul>

</div> 

Última edición por ArielGomeX; 24/03/2011 a las 12:40

Etiquetas: cuadros
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 12:30.