Ayuda para centrar

delta132 · #1 (**permalink**) 29/04/2006, 23:14

Hola a todos , bueno me estoy iniciando en esto de el CSS y estaba siguiendo algunas cosas de las preguntas frecuentes y va todo bien pero tengo un problema porque no logro centrar estos Div's , espero me puedan ayudar .

otra cosa mire en otros temas que decian cosas similares pero no me salio.
este es el html

Código:

<html>
<head>
<title>Prueba_estilo</title>
<link rel="stylesheet" href="estilo1.css" type="text/css" />
</head>

<body>
<div   class="arriba" ></div>
<div  class="izquierda"></div>
<div   class="derecha" ></div>
</body>
</html>

y este es el CSS

Código:

body
{
background-color:black; /* color al fondo*/
}

.arriba
{
position:absolute;
width:650px;  /*largo */
height:80px; /*alto*/
left:0px; /* tañado desde la izquierda*/
top:0px; /* tamaño desde arriba */
border:1px solid white; /* borde de 1px de ancho , solido , blanco */
background-color:#CCCCCC; /* color gris*/ 

}

.izquierda
{
position:absolute;
width:120px;
height:400px;
left:0px;
top:80px;
border:1px solid white;
background-color:#000066;
}

.derecha
{
position:absolute;
width:530px;
height:400px;
left:120px;
top:80px;
border:1px solid white;
background-color:#666666;

}

fearlex · #2 (**permalink**) 30/04/2006, 01:31

No creo ke sea la mejor solucion estoy seguro ke hay otra mejor, pero fue la mejor ke encontre hasta donde alcanzan mis conocimientos de CSS, simplemente hice unos calculos y lleve el WIDTH y el LEFT a porcentage.

Código HTML:

/* CSS Document */
body
{
background-color:black; /* color al fondo*/
}

.arriba
{
position:absolute;
width:85%;  /*largo */
height:80px; /*alto*/
left:7%; /* tañado desde la izquierda*/
top:0px; /* tamaño desde arriba */
border:1px solid white; /* borde de 1px de ancho , solido , blanco */
background-color:#CCCCCC; /* color gris*/ 

}

.izquierda
{
position:absolute;
width:16%;
height:400px;
left:7%;
top:80px;
border:1px solid white;
background-color:#000066;
}

.derecha
{
position:absolute;
width:69%;
height:400px;
left:22%;
top:80px;
border:1px solid white;
background-color:#666666;


}

Seguire este tema por ke estoy seguro habra una mejor respuesta

delta132 · #3 (**permalink**) 30/04/2006, 12:07

HOla fearlex, gracias por la respuesta y pues si me funciono , pero me gustaria saber si hay alguna otra forma de hacerlo , gracias

fearlex · #4 (**permalink**) 30/04/2006, 12:46

Estoy seguro ke, yo me inicio en esto del CSS y el HTML tambien, y aunke ya hago cosas avanzadas aun me falta un mundo. So Estoy igual ke tu, esperando ke alguien mas nos ayude con este interesante tema ke has planteado.

Saludos

PaulinoHC · #5 (**permalink**) 30/04/2006, 13:38

Agrupa todo en otra capa (container) y flota los divs izquierda y derecha, así:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt*p://ww*w.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title></title>
	<style>
	body
{
background-color:black; /* color al fondo*/
}

#container {
	margin: 0 auto;
	width: 654px;
}

.arriba
{
width:652px;  /*largo */
height:80px; /*alto*/
border:1px solid white; /* borde de 1px de ancho , solido , blanco */
background-color:#CCCCCC; /* color gris*/ 

}

.izquierda
{
float:left;
width:120px;
height:400px;
border:1px solid white;
background-color:#000066;
}

.derecha
{
float:right;
width:530px;
height:400px;
border:1px solid white;
background-color:#666666;
}
	</style>
</head>
<body>
<div id="container">
<div   class="arriba" ></div>
<div  class="izquierda"></div>
<div   class="derecha" ></div>
</div>
</body>
</html>

Pd. retira los asteriscos (*) de la url del DOCTYPE, es que no me deja poner url's el foro ;)

delta132 · #6 (**permalink**) 30/04/2006, 13:54

hola man , gracias tambien por la respuesta pero me podrias explicar bien eso de float left y right , es que no lo entendi muy bien , gracias desde ya.

baccxus · #7 (**permalink**) 30/04/2006, 16:15

Para el diseño que intentas hacer no es necesario posiciones absolutas:

este sería el CSS:

Código:

* {border: 0; margin: 0; padding: 0} /*Para resetear los presets de todos los navegadores*/
body {
width: 650px; /*Ancho del diseño*/
margin: 0 auto; /*Centrado horizontalmente*/
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF; /*Letra de color blanco*/
}
.arriba {
height:80px; /*alto, al no haber ancho, el ancho de esta clase es automático*/
border:1px solid white; /* borde de 1px de ancho , solido , blanco */
background-color:#CCCCCC; /* color gris*/}

.izquierda
{
width:120px;
height:400px;
border:1px solid white;
background-color:#000066;
float: left;
}

.derecha {
height:400px;
border:1px solid white;
background-color:#666666;
}

y el HTML

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba_estilo</title>
<link rel="stylesheet" href="estilo1.css" type="text/css" />
</head>

<body>
<div class="arriba">Arriba</div>
<div class="izquierda">Iquierda</div>
<div class="derecha">Derecha</div>
</body>
</html>

En todo caso esta es solo una forma de hacerlo, hay miles, ya sabes si tienes dudas, solo pregunta.

Saludos,

PD: No se te olvide la primera línea del HTML, es necesario un DTD para que valide tu CSS, puedes buscar bastante información en google.

delta132 · #8 (**permalink**) 30/04/2006, 18:50

Muchas Gracias por la colaboracion

.