Foros del Web » Creando para Internet » CSS »

Layaout a cuatro columnas

 Estas en el tema de Layaout a cuatro columnas en el foro de CSS en Foros del Web. Hola a todos, necesito colocar las listas de modelos a cuatro columnas,tal como estan en las tablas, solo que quiero hacerlo sin las tablas y ...
  #1 (permalink)  
Antiguo 22/05/2006, 13:13
Avatar de Jesusguevarautomotri  
Fecha de Ingreso: enero-2006
Ubicación: Puerto Ordaz, Estado Bolivar
Mensajes: 106
Antigüedad: 19 años
Puntos: 0
Layaout a cuatro columnas
Hola a todos, necesito colocar las listas de modelos a cuatro columnas,tal como estan en las tablas, solo que quiero hacerlo sin las tablas y sin fondos ni nada, pero no se como empezar. Si tienen links de tutoriales a 4 columnas se los agradezco.
Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DaimlerChrysler de Venezuela L.L.C.</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{color: #0000CC;}
div#footer a {color: #ffffff;}
div#header p{margin:0;padding:0px;}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B; font-size: 18pt;}
div#container{text-align:left}
div#navigation{background:#B9CAFF}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:700px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0px}
div#footer{clear:left;width:100%}

ul{list-style: square;}
.ulppal {list-style: none; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
.lippal {list-style: none; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;}
div#pasajeros{margin:0 auto}

</style>
</head>
<body>
<div id="container">
<div id="header">
<p><b>Industria Automotriz de Venezuela<br>
  El Portal de seguimiento a la industria automotriz de Venezuela</b></p>
<h1>Seguimiento a empresas automotrices en Venezuela</h1>
</div>
<div id="wrapper">
<div id="content">
<p>     <b>Junta Directiva</b>
     <br><b>Presidente: </b>Hector Luis Perez De La Cruz
     <br><b>Director de Manufactura: </b>Elias Levy
     <br><b>Director de Finanzas:</b> Timothy White
     <br><b>Director de Mercadeo y Ventas:</b> No disponible
     <br><b>Director de Recursos Humanos y Relaciones Institucionales:</b> Eduardo Mendoza
     <br><b>Director de Comercial y Post-venta:</b> Rafael Manrique
     <br><b>Gerente de Relaciones Públicas:</b> Michael Maal Ellis
</p>
<p><b>Dirección de Planta</b><br>
     Avenida Pancho Pepe Croquer, Zona Industrial Norte. Valencia, Edo Carabobo. 
     Apartado Postal 1960 - Valencia 2001<br>
     Teléfono: (0241) 613-2400<br>
     Fax: (0241) 613-2438.<br></p>
<p><b>Modelos Comercializados</b></p>
<div id="pasajeros">
<ul class="ulppal">
	<li class="lippal"><b>Pasajeros</b></li>
	<ul class="ulppal">
		<li class="lippal">Chrysler</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Dodge</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
	</ul>				
</ul>
</div>
<div id="rusticos">
<ul class="ulppal">
	<li class="lippal"><b>Rusticos</b></li>
	<ul class="ulppal">
		<li class="lippal">Chrysler</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Dodge</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
	</ul>				
</ul>
</div>
<div id="livianos">
<ul class="ulppal">
	<li class="lippal"><b>Comerciales Livianos </b></li>
	<ul class="ulppal">
		<li class="lippal">Chrysler</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Dodge</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
	</ul>				
</ul>
</div>
<div id="medianos">
<ul class="ulppal">
	<li class="lippal"><b>Comerciales Medianos </b></li>
	<ul class="ulppal">
		<li class="lippal">Chrysler</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Dodge</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
	</ul>				
</ul>
</div>
<div id="pesados">
<ul class="ulppal">
	<li class="lippal"><b>Comerciales Pesados </b></li>
	<ul class="ulppal">
		<li class="lippal">Chrysler</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Dodge</li>
		<ul>
			<li>Neon</li>
			<li>PT Cruiser</li>
			<li>Sebring</li>
			<li>Town &amp; Country</li>				
		</ul>
		<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
	</ul>				
</ul>
</div>
      
      	<table align="center"><tr>
	<td width=20% valign=top bgcolor="#CCCCCC"><font face="Verdana" size="1"><center>Pasajeros</center>
    Dodge Brisa<br>
    Crhysler <a href="#aveo">Neon</a><br>Crhysler PT Cruiser<br>
    Crhysler Sebring<br>
    Crhysler Town &amp; Country<br>
    Mercedes benz Serie A<br>
    Mercedes benz Serie B<br>
    Mercedes benz Serie C<br>
    Mercedes benz Serie E<br>
    Mercedes benz Serie ML<br>
    <br><br>Impala<br>Optra<br>
    Wagon R<br></p></td>
    <td width=20% valign=top bgcolor="#FFFFCC"><font face="Verdana" size="1"><center>Rústicos</center>
    Jeep Cherokee<br>
     Jeep Grand Cherokee<br>
     Grand Vitara<br>Grand Vitara XL7<br>
    Jimny<br>
    Traiblazer<br>
    Grand Blazer</font></td>
     <td width=20% valign=top bgcolor="#CCCCCC"><font face="Verdana" size="1"><center>Comerciales livianos</center>&nbsp;<br>
     Ram 2500<br>
     Mercedes-Benz Sprinter 313 Pajaeros<br>
     Mercedes-Benz Sprinter 413 Carga<br>
     Mercedes-Benz Sprinter 413 Pasajeros</font></td>
	<td width=20% valign=top bgcolor="#FFFFCC"><font face="Verdana" size="1"><center>Comerciales Medianos</center>
    RAM 3500<br>
    Mercedez Benz LN 711/37<br>
     Mercedez Benz ChassisBuss LO 712/37<br>
    &nbsp;</font></td>
	<td width="20%" valign=top bgcolor="#CCCCCC"><font face="Verdana" size="1"><center>Comerciales Pesados</center>
	Mercedez Benz 1720<br>Fregihtliner M2 106 Bussines Class<br>
    Fregihtliner M2 112 Bussines Class<br>
    Fregihtliner Columbia CL 120</font></p></td>
     </tr></table>	 

</div>
</div>
<div id="footer">
  <p><a href="http://es.geocities.com/jesusguevarautomotriz/">Inicio</a> | 
  <a href="http://es.geocities.com/jesusguevarautomotriz/seguimiento.html">Seguimiento</a> </p>
</div>
</div>
</body>
</html>
__________________
jesusguevarautomotriz
Industria Automotriz de Venezuela - blog
Internet al dia - blog
  #2 (permalink)  
Antiguo 22/05/2006, 14:12
 
Fecha de Ingreso: noviembre-2005
Mensajes: 117
Antigüedad: 19 años, 1 mes
Puntos: 0
creas 4 DIV con un cierto ancho y luego le das float: left a cada uno

si queres poner algo abajo de eso agregale la propiedad clear: both
  #3 (permalink)  
Antiguo 23/05/2006, 12:10
Avatar de Jesusguevarautomotri  
Fecha de Ingreso: enero-2006
Ubicación: Puerto Ordaz, Estado Bolivar
Mensajes: 106
Antigüedad: 19 años
Puntos: 0
En FFX se ve bien, pero en IE no, se pasa una columna para abajo, como lo arreglo y como hago para que quede centrado?
Código: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DaimlerChrysler de Venezuela L.L.C.</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{color: #0000CC;}
div#footer a {color: #ffffff;}
div#header p{margin:0;padding:0px;}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #EEE;color: #79B30B; font-size: 18pt;}
div#container{text-align:left}
div#navigation{background:#B9CAFF}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:768px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0px}
div#footer{clear:left;width:100%}

ul{list-style: square;}
.ulppal {list-style: none; padding:0px 0px 0px 0px;}
.lippal {list-style: none; padding:0px 0px 0px 0px;}
div#comercializados{font-size:8pt;}
div#pasajeros{float:left; width:20%;}
div#rusticos{float:left; width:20%;}
div#livianos{float:left;width:20%;}
div#medianos{float:left;width:20%;}
div#pesados{float:left; width:20%;}

</style>
</head>
<body>
<div id="container">
<div id="header">
<p><b>Industria Automotriz de Venezuela<br>
  El Portal de seguimiento a la industria automotriz de Venezuela</b></p>
<h1>Seguimiento a empresas automotrices en Venezuela</h1>
</div>
<div id="wrapper">
<div id="content">
<p>     <b>Junta Directiva</b>
     <br><b>Presidente: </b>Hector Luis Perez De La Cruz
     <br><b>Director de Manufactura: </b>Elias Levy
     <br><b>Director de Finanzas:</b> Timothy White
     <br><b>Director de Mercadeo y Ventas:</b> No disponible
     <br><b>Director de Recursos Humanos y Relaciones Institucionales:</b> Eduardo Mendoza
     <br><b>Director de Comercial y Post-venta:</b> Rafael Manrique
     <br><b>Gerente de Relaciones Públicas:</b> Michael Maal Ellis
</p>
<p><b>Dirección de Planta</b><br>
     Avenida Pancho Pepe Croquer, Zona Industrial Norte. Valencia, Edo Carabobo. 
     Apartado Postal 1960 - Valencia 2001<br>
     Teléfono: (0241) 613-2400<br>
     Fax: (0241) 613-2438.<br></p>
<div id="comercializados">
<p><b>Modelos Comercializados</b></p>
<div id="pasajeros">
<p><b>Pasajeros</b></p>
<ul class="ulppal">
	<li class="lippal">Chrysler</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Dodge</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
</ul>
</div>
<div id="rusticos">
<p><b>Rusticos</b></p>
<ul class="ulppal">
	<li class="lippal">Chrysler</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Dodge</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
</ul>
</div>
<div id="livianos">
<p><b>Comerciales Livianos</b></p>
<ul class="ulppal">
	<li class="lippal">Chrysler</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Dodge</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
</ul>
</div>
<div id="medianos">
<p><b>Comerciales Medianos</b></p>
<ul class="ulppal">
	<li class="lippal">Chrysler</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Dodge</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
</ul>
</div>
<div id="pesados">
<p><b>Comerciales Pesados</b></p>
<ul class="ulppal">
	<li class="lippal">Chrysler</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Dodge</li>
	<ul>
		<li>Neon</li>
		<li>PT Cruiser</li>
		<li>Sebring</li>
		<li>Town &amp; Country</li>				
	</ul>
	<li class="lippal">Mercedes-Benz</li>
		<ul>
			<li>Clase A </li>
			<li>Clase B </li>
			<li>Clase C </li>
			<li>Clase E </li>
			<li>Clase M </li>								
		</ul>		
</ul>
</div>
</div>      
</div>
</div>
<div id="footer">
  <p><a href="http://es.geocities.com/jesusguevarautomotriz/">Inicio</a> | 
  <a href="http://es.geocities.com/jesusguevarautomotriz/seguimiento.html">Seguimiento</a> </p>
</div>
</div>
</body>
</html>
__________________
jesusguevarautomotriz
Industria Automotriz de Venezuela - blog
Internet al dia - blog
  #4 (permalink)  
Antiguo 23/05/2006, 12:27
 
Fecha de Ingreso: noviembre-2005
Mensajes: 117
Antigüedad: 19 años, 1 mes
Puntos: 0
Trata de que las cosas que tienen width, NO tengan padding laterales ni border.

Fijate armando la estructura a parte y luego ir colocando cada una de las cosas, hasta q detectes cual es la que te esta empujando todo.
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 20:42.