Foros del Web » Creando para Internet » CSS »

Ayuda para centrar

Estas en el tema de Ayuda para centrar en el foro de CSS en Foros del Web. Hola a todos , bueno me estoy iniciando en esto de el CSS y estaba siguiendo algunas cosas de las preguntas frecuentes y va todo ...
  #1 (permalink)  
Antiguo 30/04/2006, 00:14
 
Fecha de Ingreso: abril-2006
Ubicación: Bogotá
Mensajes: 251
Antigüedad: 11 años, 7 meses
Puntos: 14
Ayuda para centrar

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;

}
  #2 (permalink)  
Antiguo 30/04/2006, 02:31
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #3 (permalink)  
Antiguo 30/04/2006, 13:07
 
Fecha de Ingreso: abril-2006
Ubicación: Bogotá
Mensajes: 251
Antigüedad: 11 años, 7 meses
Puntos: 14
re

HOla fearlex, gracias por la respuesta y pues si me funciono , pero me gustaria saber si hay alguna otra forma de hacerlo , gracias
  #4 (permalink)  
Antiguo 30/04/2006, 13:46
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #5 (permalink)  
Antiguo 30/04/2006, 14:38
 
Fecha de Ingreso: marzo-2006
Mensajes: 16
Antigüedad: 11 años, 8 meses
Puntos: 0
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 ;)
  #6 (permalink)  
Antiguo 30/04/2006, 14:54
 
Fecha de Ingreso: abril-2006
Ubicación: Bogotá
Mensajes: 251
Antigüedad: 11 años, 7 meses
Puntos: 14
re2

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.
  #7 (permalink)  
Antiguo 30/04/2006, 17:15
Avatar de baccxus  
Fecha de Ingreso: mayo-2005
Ubicación: Panama city, Panama, Panama
Mensajes: 870
Antigüedad: 12 años, 6 meses
Puntos: 17
No necesitas posiciones absolutas

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.
__________________
Al final del día hablar es gratis, codificar no lo es
  #8 (permalink)  
Antiguo 30/04/2006, 19:50
 
Fecha de Ingreso: abril-2006
Ubicación: Bogotá
Mensajes: 251
Antigüedad: 11 años, 7 meses
Puntos: 14
re3

Muchas Gracias por la colaboracion .
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 03:26.