Problemas de centrado con CCS

Jesusguevarautomotri · #1 (**permalink**) 08/05/2006, 11:09

Hola a todos, estoy tratando de centrar tres columnas en mi pagina pero no me sale, ni en internet explorer, ni en firefox, si alguien me puede ayudar, lo agradezco.

Código:

<html>
<head>
<title>Modelos - Industria Automotriz de Venezuela</title>
<META name="keywords" content="industria automotriz de venezuela seguimiento empresas automotrices, nuevos lanzamientos, modelos">
<META name="description" content="Industria Automotriz de Venezuela - Seguimiento a la Industria Automotriz de Venezuela.">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<style>
body, td, div, a, p{font-family:arial,sans-serif; font-size:10pt ; color:#000000; border:0px; margin:0px}
a:link { color: #0000cc; text-decoration: underline; }
a:visited {color: #551a8b; text-decoration: underline;}
a:active {color: #ff9900; text-decoration: underline;}
a:hover {color: #ff0000; text-decoration: underline;}
.menuhorizontal {float: right;text-align: right;}
.cuerpo {width:768px; text-align:left}
.logo { text-align:left;}
</style>
</head>
<body><center>
<div class="cuerpo">
<div class="menuhorizontal"><a href="http://es.geocities.com/jesusguevarautomotriz">Inicio</a>&nbsp;  
      <a href="http://es.geocities.com/jesusguevarautomotriz/seguimiento.html"> Seguimiento</a>&nbsp; 
      <a href="http://jesusguevarautomotriz.blogspot.com/"> Blog</a>&nbsp;         <a href="http://es.geocities.com/jesusguevarautomotriz/creditos.html"> Creditos</a> &nbsp; <a href="http://es.geocities.com/jesusguevarautomotriz/quienesomos.html">Quienes somos </a></div>
<br>
<div class="logo"><a href="http://es.geocities.com/jesusguevarautomotriz/concursologo.html"><img src="http://es.geocities.com/jesusguevarautomotriz/archivos/logo.jpg" alt="Auydanos a crear nuestro logo" width="250" height="97" border="0"></a>
<b>Industria Automotriz de Venezuela - Home page<br>
El portal de seguimiento a la Industria automotriz de Venezuela, por jesusguevarautomotriz™ y amigos.</b></div><br>
<b>Seguimiento a los modelos de autos en Venzuela </b><br>
Durante su vida un modelo de automóvil, realiza hazañas, gana premios, puede ser o no el más vendido, se destaca en alguna tarea en especial, ect, aquí comparamos por categoría a cada modelo frente a su competidor, tambien encontrar&aacute; la informaci&oacute;n b&aacute;sica, especificaciones, y m&aacute;s<font size="-1">.</font><br>
<br>
<div style=" width:100%" align="center"><div style="float:left; text-align:center:" align="center"><b>Modelos Descontinuados</b>
  <TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#111111 cellSpacing=0 cellPadding=1 align="center">
<TR>
     <TD bgcolor="#FFCC99">
     <b>Marca - Modelo </b></TD>
    </TR>
     <tr>
     <TD>Esto debe quedar a la izquierda </TD>
    </tr>
    </TABLE></div>

  <div style="text-align:center;" align="center" ><b>Modelos Actuales</b>
    <TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#111111 cellSpacing=0 cellPadding=1 align="center">
<TR>
     <TD bgcolor="#FFCC99">
     <b>Marca - Modelo </b></TD>
    </TR>
     <tr>
     <TD>Esto en el centro </TD>
    </tr>
    </TABLE>
  </div>

<div style="float:right; text-align:center;" align="center"><b>Posibles proximos modelos</b>
  <TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#111111 cellSpacing=0 cellPadding=1 align="center">
<TR>
     <TD bgcolor="#FFCC99">
     <b>Marca - Modelo </b></TD>
    </TR>
     <tr>
     <TD> Esto a la izquierda </TD>
    </tr>
    </TABLE></div><br>Todas deben quedar en el centro</div>
<div class="menuhorizontal">
Y esto va abajo y la derecha tal como esta el de arriba<br>
      <a href="http://es.geocities.com/jesusguevarautomotriz">Inicio</a>&nbsp;  
        <a href="http://es.geocities.com/jesusguevarautomotriz/seguimiento.html"> Seguimiento</a>&nbsp; 
        <a href="http://jesusguevarautomotriz.blogspot.com/"> Blog</a>&nbsp;         <a href="http://es.geocities.com/jesusguevarautomotriz/creditos.html"> Creditos</a> &nbsp; <a href="http://es.geocities.com/jesusguevarautomotriz/quienesomos.html">Quienes somos </a>
</div>
</div></center></body>
</html>

mbavio · #2 (**permalink**) 08/05/2006, 21:52

POR DIOS!!!!!!!!!!!!!!

Saca esa etiqueta CENTER... uuuu me has dado escalofrios...

Para centrar, pone "margin: 0 auto" a tu clase cuerpo, y luego "text-align: center" para que IE lo realize tambien, acuerdate despues de poner "text-align: left" al cuerpo para que no se te centre todo el texto. Saludos.

Jesusguevarautomotri · #3 (**permalink**) 09/05/2006, 12:06

Ok, gracias uf ya aprendi!, pero como hago para colocar las tablas todas centradas, 1 a la izquierda, 1 el centro, y una a la derecha, por fa.

Código:

<html>
<head>
<title>Modelos - Industria Automotriz de Venezuela</title>
<META name="keywords" content="industria automotriz de venezuela seguimiento empresas automotrices, nuevos lanzamientos, 

modelos">
<META name="description" content="Industria Automotriz de Venezuela - Seguimiento a la Industria Automotriz de Venezuela.">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<style>
body, td, div, a, p{font-family:arial,sans-serif; font-size:10pt ; color:#000000; border:0px; margin:0px}
body {width:768px; margin: 0 auto; text-align:center;}
a:link { color: #0000cc; text-decoration: underline; }
a:visited {color: #551a8b; text-decoration: underline;}
a:active {color: #ff9900; text-decoration: underline;}
a:hover {color: #ff0000; text-decoration: underline;}
.menuhorizontal {float: right;text-align: right;}
.logo { text-align:left;}
.cuerpo { text-align:left;}
</style>
</head>
<body>
<div class="cuerpo">
<div style=" width:100%" align="center"><div style="float:left; text-align:center:" align="center"><b>Modelos 

Descontinuados</b>
  <TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#111111 cellSpacing=0 cellPadding=1 align="center">
<TR>
     <TD bgcolor="#FFCC99">
     <b>Marca - Modelo </b></TD>
    </TR>
     <tr>
     <TD>Esto debe quedar a la izquierda </TD>
    </tr>
    </TABLE></div>

  <div style="text-align:center;" align="center" ><b>Modelos Actuales</b>
    <TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#111111 cellSpacing=0 cellPadding=1 align="center">
<TR>
     <TD bgcolor="#FFCC99">
     <b>Marca - Modelo </b></TD>
    </TR>
     <tr>
     <TD>Esto en el centro </TD>
    </tr>
    </TABLE>
  </div>

<div style="float:right; text-align:center;" align="center"><b>Posibles proximos modelos</b>
  <TABLE style="BORDER-COLLAPSE: collapse" border=1 borderColor=#111111 cellSpacing=0 cellPadding=1 align="center">
<TR>
     <TD bgcolor="#FFCC99">
     <b>Marca - Modelo </b></TD>
    </TR>
     <tr>
     <TD> Esto a la izquierda </TD>
    </tr>
    </TABLE></div><br>Todas deben quedar en el centro</div>

</div></body>
</html>

Mickel · #4 (**permalink**) 09/05/2006, 17:08

tienes que ponerle margin:auto a todos los divs

Jesusguevarautomotri · #5 (**permalink**) 09/05/2006, 18:58

Ok lo voy a probar esta noche en mi casa y espero.... mañana..... traerles mi pagina bien hecha!.

Jesusguevarautomotri · #6 (**permalink**) 10/05/2006, 06:13

Hola a todos, lo intentente por todos los medios, centrar tres divs donde luego colocare otros elementos y me fui imposible. Ahi les dejo el codigo, espero por favor me ayuden.

Se ve mal en IE y FFX.

Código:

<html>
<head>
<title>Modelos - Industria Automotriz de Venezuela</title>
<style>
body, td, div, a, p{font-family:arial,sans-serif; font-size:10pt ; color:#000000;}
body {width:768px; margin: 0; text-align:center; margin-left:auto; margin-right:auto;}
.cuerpo { text-align:left; margin: 0 auto;}
.divcentratablas {margin: 0 auto; text-align:center;}
.divdescontinuados {margin: 0 auto; float: left ;}
.divdactuales {margin: 0 auto;}
.divproximos {margin: 0 auto; float: right;}
</style>
</head>
<body>
<div class="cuerpo">
Necesito centrar lo de abajo
<div class="divcentratablas">
<div class="divdescontinuados"><b>Modelos Descontinuados</b></div>	
<div class="divdactuales"><br><b>Modelos Actuales</b></div>
<div class="divproximos"><br><b>Posibles proximos modelos</b></div>
</div>
</div>
</body>
</html>

Artdeco · #7 (**permalink**) 10/05/2006, 07:01

Yo he estado manejando el código que has proporcionado en Dreamweaver y, además de decir que está muy sucio, tengo que decir que no he entendido muy bien cómo quieres las capas. ¿Quieres dos a la izquierda y una en el centro? Si puedes hacer un croquis en Paint o algo así, porque no me he aclarado =S

¿Qué programa usas para hacer la página? Porque el código está lleno de errores =S

Jesusguevarautomotri · #8 (**permalink**) 10/05/2006, 07:37

Cita:

Iniciado por Artdeco

Yo he estado manejando el código que has proporcionado en Dreamweaver y, además de decir que está muy sucio, tengo que decir que no he entendido muy bien cómo quieres las capas. ¿Quieres dos a la izquierda y una en el centro? Si puedes hacer un croquis en Paint o algo así, porque no me he aclarado =S

¿Qué programa usas para hacer la página? Porque el código está lleno de errores =S

|Modelos Descontinuados|Modelos Actuales|Posibles proximos modelos|

Quiero que quede como esta arriba <espero que sirva el ejemplillo>, y centrado, debajo de cada titulo pienso colocar unas listas. Uso DW, no se que esta mal o sucio. No digas solo que algo esta mal, tambien dime como corregirlo.

Artdeco · #9 (**permalink**) 10/05/2006, 07:46

¿Dreamweaver? Me extraña que uses Dreamweaver =S A ver, código sucio es, por ejemplo, esto:

border=1 borderColor=#111111 cellSpacing=0

porque eso, en realidad, hay que hacerlo así:

style="border:none;background-color:#111111;" cellspacing="0"

es importante usar comillas siempre, pero el editor que has usado no las ha puesto, y genera código muy muy anticuado. ¿Qué versión de Dreamweaver estás usando?

Dame un momento y te pego ahora el código de las capas que has pedido.

mbavio · #10 (**permalink**) 10/05/2006, 07:59

En Internet hay millones de recursos para aprender a hacer layouts a dos o tres columnas.

http://blog.html.it/layoutgala/ (ya hechos)

http://css.maxdesign.com.au/floatutorial/ (los ultimos dos tutoriales enseñan esto)

Espero que te sirvan. Saludos

Artdeco · #11 (**permalink**) 10/05/2006, 08:27

Acabo de terminar y te digo que no soy especialista en estas cosas y lo que he hecho no es la forma correcta, pero es todo lo que se me ha ocurrido.

Es una chapuza, pero es código válido y funciona:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">

body{font-family:Arial, Helvetica, sans-serif;}
.table{width:600px;margin:auto;height:100px;font-size:12px;}
.title{background-color:#FFCC99;font-weight:bold;font-size:13px;margin-bottom:5px;padding:3px;}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Modelos - Industria Automotriz de Venezuela</title>
</head>
<body>
<!-- //  Tabla grande    -->
<div class="table">
<!-- //  Primera columna    -->
<div style="width:200px;float:left;"><div class="title">Modelos descontinuados</div><li>Modelo 1</li><li>Modelo 2</li></div>

<!-- //  Segunda y tercera columna: se inserta un div que acapare las dos columnas siguientes    -->
<div style="width:400px;margin-left:200px;">

<!-- //  Segunda columna   -->
	 <div style="width:200px;float:left;"><div class="title">Modelos actuales </div><li>Modelo 1</li><li>Modelo 2</li></div>
<!-- //  Tercera columna    -->
	 <div style="width:200px;margin-left:200px;"><div class="title">Posibles pr&oacute;ximos modelos </div><li>Modelo 1</li><li>Modelo 2</li></div>
<!-- //  Se cierra el div de las dos columnas    -->
	 </div>
<!-- //  Se cierra la tabla grande    -->
</div>
</body>
</html>

En realidad, es en este tipo de casos donde sí hace falta una tabla. Una tabla de tres columnas con un style="vertical-align:top;" en cada TD, y solucionado. Pero si quieres usar capas, échale un vistazo a lo que te ha dado Mbavio o usa lo que te he propuesto ; )

Saludos

Jesusguevarautomotri · #12 (**permalink**) 10/05/2006, 12:23

Cita:

Iniciado por mbavio

En Internet hay millones de recursos para aprender a hacer layouts a dos o tres columnas.

http://blog.html.it/layoutgala/ (ya hechos)

http://css.maxdesign.com.au/floatutorial/ (los ultimos dos tutoriales enseñan esto)

Espero que te sirvan. Saludos

Wao, grandes links!, los estare revisando, muchas gracias por la ayuda, y preguntare si tengo dudas.

Aunque me dicen como centrar, todavia no me explican que debo hacer y que pasa con las etiquetas en IE y FFX porque no agarran el float, que mas se les debe añadir.

Puedo copiarme esos ejemplo y adaptarlos a lo que yo quiero pero todavia no me entero de lo que estaba mal.

Jesusguevarautomotri · #13 (**permalink**) 11/05/2006, 18:21

Cita:

Iniciado por Artdeco

¿Dreamweaver? Me extraña que uses Dreamweaver =S A ver, código sucio es, por ejemplo, esto:

border=1 borderColor=#111111 cellSpacing=0

porque eso, en realidad, hay que hacerlo así:

style="border:none;background-color:#111111;" cellspacing="0"

es importante usar comillas siempre, pero el editor que has usado no las ha puesto, y genera código muy muy anticuado. ¿Qué versión de Dreamweaver estás usando?

Dame un momento y te pego ahora el código de las capas que has pedido.

Uso DW MX 2004, yo lo escribo casi todo, el solo sugiere algunas etiquetas y ya, la verdad es que no se como se hace para que me quede el codigo limpio y ordenadito.

Jesusguevarautomotri · #14 (**permalink**) 12/05/2006, 10:18

Aqui esta el resultado de este tema, lo hice de la siguiente manera, tome el layaout numero 7 Layout gala (Gracias mbavio) y lo adapte a lo que yo queria.

Ahora,¿Como hago para que las lista no me muestren ninguna viñeta? En IE una de de las tres listas asumen una viñeta tipo circulo, cosa que no quiero. En FFX todas las listas asumen la vieta tipo circulo por defecto y repito, no quiero que se vea ninguna vieta.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout 7</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{;margin:10px;padding-left:10px;background: #EEE;color: #79B30B;font-size: 18pt;}
div#container{text-align:left}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
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: 0}
div#navigation{float:left;width:150px;margin-left:-700px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}

.logo { text-align:left;}

div#actuales{margin: 0 220px}
div#descontinuados{float:left;width:220px;margin-left:-700px}
div#futuros{float:left;width:220px;margin-left:-220px}

ul{margin:0px;padding:0px;}
li{margin: 0px;padding: 0px;}
</style>
</head>
<body>
<div id="container">
<div class="logo"><br>
<b>Industria Automotriz de Venezuela - Home page<br>
El portal de seguimiento a la Industria automotriz de Venezuela</b></div>
<div id="header">
  <h1>Seguimiento a los modelos de autos en Venezuela</h1>
</div>
<div id="wrapper">
<div id="content">
<p>Durante su vida un modelo de automóvil, realiza hazañas, gana premios, puede ser o no el más vendido, se destaca en alguna tarea en especial, ect, aquí comparamos por categoría a cada modelo frente a su competidor, tambien encontrar&aacute; la informaci&oacute;n b&aacute;sica, especificaciones, y m&aacute;s</p>
</div>
</div>
</div>
<div id="container">
<div id="wrapper">
<div id="actuales">
<p><strong>Modelos actuales</strong></p>
<ul>
        <li>Audi</li>
        <li>BMW</li>
        <li>Citroen</li>
        <li>Chevrolet</li>
        <li>Dodge</li>
		<li>Ferrari</li>
		<li>Freightliner</li>
		<li>Fiat</li>
		<li>Ford</li>
		<li>Great Wall</li>
		<li>Hyunday</li>
		<li>Honda</li>
		<li>Irizar</li>
		<li>Iveco</li>
		<li>Jeep</li>
		<li>Kia</li>
		<li>Mack</li>
		<li>Mazda</li>
		<li>Mercedes Benz</li>
		<li>Mini</li>
		<li>Mitsubishi</li>
		<li>Nissan</li>
		<li>Peugeot</li>
		<li>Porsche</li>
		<li>Renault</li>
		<li>Scania</li>
		<li>Seat</li>
		<li>Subaru</li>
		<li>Toyota</li>
		<li>Volkswagen</li>
</ul>
</div>
</div>
<div id="descontinuados">
<p><strong>Modelos descontinuados</strong></p>
<ul>
        <li>Audi</li>
        <li>BMW</li>
        <li>Citroen</li>
        <li>Chevrolet</li>
        <li>Dodge</li>
		<li>Ferrari</li>
		<li>Freightliner</li>
		<li>Fiat</li>
		<li>Ford</li>
		<li>Great Wall</li>
		<li>Hyunday</li>
		<li>Honda</li>
		<li>Irizar</li>
		<li>Iveco</li>
		<li>Jeep</li>
		<li>Kia</li>
		<li>Mack</li>
		<li>Mazda</li>
		<li>Mercedes Benz</li>
		<li>Mini</li>
		<li>Mitsubishi</li>
		<li>Nissan</li>
		<li>Peugeot</li>
		<li>Porsche</li>
		<li>Renault</li>
		<li>Scania</li>
		<li>Seat</li>
		<li>Subaru</li>
		<li>Toyota</li>
		<li>Volkswagen</li>
</ul>
</div>
<div id="futuros">
<p><strong>Posibles proximos modelos </strong></p>
<ul>
        <li>Audi</li>
        <li>BMW</li>
        <li>Citroen</li>
        <li>Chevrolet</li>
        <li>Dodge</li>
		<li>Ferrari</li>
		<li>Freightliner</li>
		<li>Fiat</li>
		<li>Ford</li>
		<li>Great Wall</li>
		<li>Hyunday</li>
		<li>Honda</li>
		<li>Irizar</li>
		<li>Iveco</li>
		<li>Jeep</li>
		<li>Kia</li>
		<li>Mack</li>
		<li>Mazda</li>
		<li>Mercedes Benz</li>
		<li>Mini</li>
		<li>Mitsubishi</li>
		<li>Nissan</li>
		<li>Peugeot</li>
		<li>Porsche</li>
		<li>Renault</li>
		<li>Scania</li>
		<li>Seat</li>
		<li>Subaru</li>
		<li>Toyota</li>
		<li>Volkswagen</li>
</ul>
</div>
<div id="footer"><p></p></div>
</div>
</body>
</html>