Foros del Web » Creando para Internet » CSS »

Problemas para centrar divs

 Estas en el tema de Problemas para centrar divs en el foro de CSS en Foros del Web. Hola que tal, bueno primero que nada soy nuevo y un saludo para todos. Y espero terminar de aprender esto y tambien participar en el ...
  #1 (permalink)  
Antiguo 31/07/2008, 17:58
 
Fecha de Ingreso: julio-2008
Mensajes: 61
Antigüedad: 16 años, 3 meses
Puntos: 2
Problemas para centrar divs
Hola que tal, bueno primero que nada soy nuevo y un saludo para todos.
Y espero terminar de aprender esto y tambien participar en el foro.

< Mi problema>

Resulta yo tengo divs y los pongo a una tabla para poder centrarlos.

Ejemplo:

Bueno y no me los centra.. algo toy haciendo mal no se que..

Código PHP:
<table height="600" weight="800" aling="center" >
<div id="hostingr1c1"></div>

<div id="hostingr1c6"></div>

<div id="hostingr1c10"></div>

<div id="hostingr2c1"></div>
</table> 
y aca les dejo el codigo completo.

Código PHP:
<html>

<head>

<title>Sensurado</title>

<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="WebDising">

<style type="text/css">
#hostingr1c1 {
    position:absolute;
    left:0px;
    top:0px;
    width:334px;
    height:80px;
    z-index:1;
    visibility:visible;
    background:url(images/hosting_r1_c1.jpg);
}
#hostingr1c6 {
    position:absolute;
    left:334px;
    top:0px;
    width:277px;
    height:80px;
    z-index:2;
    visibility:visible;
    background:url(images/hosting_r1_c6.jpg);
}
#hostingr1c10 {
    position:absolute;
    left:611px;
    top:0px;
    width:189px;
    height:80px;
    z-index:3;
    visibility:visible;
    background:url(images/hosting_r1_c10.jpg);
}
#hostingr2c1 {
    position:absolute;
    left:0px;
    top:80px;
    width:800px;
    height:10px;
    z-index:4;
    visibility:visible;
    background:url(images/hosting_r2_c1.jpg);
}
#hostingr3c1 {
    position:absolute;
    left:0px;
    top:90px;
    width:191px;
    height:28px;
    z-index:5;
    visibility:visible;
    background:url(images/hosting_r3_c1.jpg);
}
#hostingr3c3 {
    position:absolute;
    left:191px;
    top:90px;
    width:101px;
    height:28px;
    z-index:6;
    visibility:visible;
    background:url(images/hosting_r3_c3.jpg);
}
#hostingr3c5 {
    position:absolute;
    left:292px;
    top:90px;
    width:91px;
    height:28px;
    z-index:7;
    visibility:visible;
    background:url(images/hosting_r3_c5.jpg);
}
#hostingr3c7 {
    position:absolute;
    left:383px;
    top:90px;
    width:93px;
    height:28px;
    z-index:8;
    visibility:visible;
    background:url(images/hosting_r3_c7.jpg);
}
#hostingr3c8 {
    position:absolute;
    left:476px;
    top:90px;
    width:115px;
    height:28px;
    z-index:9;
    visibility:visible;
    background:url(images/hosting_r3_c8.jpg);
}
#hostingr3c9 {
    position:absolute;
    left:591px;
    top:90px;
    width:209px;
    height:28px;
    z-index:10;
    visibility:visible;
    background:url(images/hosting_r3_c9.jpg);
}
#hostingr4c1 {
    position:absolute;
    left:0px;
    top:118px;
    width:800px;
    height:57px;
    z-index:11;
    visibility:visible;
    background:url(images/hosting_r4_c1.jpg);
}
#hostingr5c1 {
    position:absolute;
    left:0px;
    top:175px;
    width:271px;
    height:105px;
    z-index:12;
    visibility:visible;
    background:url(images/hosting_r5_c1.jpg);
}
#hostingr5c4 {
    position:absolute;
    left:271px;
    top:175px;
    width:529px;
    height:371px;
    z-index:13;
    visibility:visible;
    background:url(images/hosting_r5_c4.jpg);
}
#hostingr6c1 {
    position:absolute;
    left:0px;
    top:280px;
    width:142px;
    height:33px;
    z-index:14;
    visibility:visible;
    background:url(images/hosting_r6_c1.jpg);
}
#hostingr6c2 {
    position:absolute;
    left:142px;
    top:280px;
    width:129px;
    height:33px;
    z-index:15;
    visibility:visible;
    background:url(images/hosting_r6_c2.jpg);
}
#hostingr7c1 {
    position:absolute;
    left:0px;
    top:313px;
    width:271px;
    height:108px;
    z-index:16;
    visibility:visible;
    background:url(images/hosting_r7_c1.jpg);
}
#hostingr8c1 {
    position:absolute;
    left:0px;
    top:421px;
    width:142px;
    height:28px;
    z-index:17;
    visibility:visible;
    background:url(images/hosting_r8_c1.jpg);
}
#hostingr8c2 {
    position:absolute;
    left:142px;
    top:421px;
    width:129px;
    height:28px;
    z-index:18;
    visibility:visible;
    background:url(images/hosting_r8_c2.jpg);
}
#hostingr9c1 {
    position:absolute;
    left:0px;
    top:449px;
    width:271px;
    height:111px;
    z-index:19;
    visibility:visible;
    background:url(images/hosting_r9_c1.jpg);
}
#hostingr10c4 {
    position:absolute;
    left:271px;
    top:546px;
    width:529px;
    height:54px;
    z-index:20;
    visibility:visible;
    background:url(images/hosting_r10_c4.jpg);
}
#hostingr11c1 {
    position:absolute;
    left:0px;
    top:560px;
    width:142px;
    height:40px;
    z-index:21;
    visibility:visible;
    background:url(images/hosting_r11_c1.jpg);
}
#hostingr11c2 {
    position:absolute;
    left:142px;
    top:560px;
    width:129px;
    height:40px;
    z-index:22;
    visibility:visible;
    background:url(images/hosting_r11_c2.jpg);
}
</style>
</head>

<body bgcolor="#ffffff">

<div id="hostingr1c1"></div>

<div id="hostingr1c6"></div>

<div id="hostingr1c10"></div>

<div id="hostingr2c1"></div>

<div id="hostingr3c1"></div>

<div id="hostingr3c3"></div>

<div id="hostingr3c5"></div>

<div id="hostingr3c7"></div>

<div id="hostingr3c8"></div>

<div id="hostingr3c9"></div>

<div id="hostingr4c1"></div>

<div id="hostingr5c1"></div>

<div id="hostingr5c4"></div>

<div id="hostingr6c1"></div>

<div id="hostingr6c2"></div>

<div id="hostingr7c1"></div>

<div id="hostingr8c1"></div>

<div id="hostingr8c2"></div>

<div id="hostingr9c1"></div>

<div id="hostingr10c4"></div>

<div id="hostingr11c1"></div>

<div id="hostingr11c2"></div>
</body>
</html> 
< Mi pregunta >

Tengo otra pregunta yo hace poco que empecé estudiar css, y la verdad es la única manera que encontrar para poder armar las imágenes y que tomen forma? Esta bien lo que estoy haciendo ¿ o voy mal.. si es asi me podrían indicar de que forma lo tengo que hacer?

Muchisimas Gracias

Espero sus comentarios
  #2 (permalink)  
Antiguo 31/07/2008, 22:22
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 9 meses
Puntos: 3
Respuesta: Problemas para centrar divs
1) no hace falta ponerlos en una tabla para centrarlos.

2) no los centra porque no lo estas indicando en ningun lado

3) entre tanto barullo que parece tu codigo por la gran cantidad de div que tenes, primero te sugiero que pruebes agregando esto al CSS:

Cita:
table {text-align:center;}
quizas te funcione, pero sino trata de suprimir un poco el codigo para poder verlo mejor.
  #3 (permalink)  
Antiguo 01/08/2008, 00:06
 
Fecha de Ingreso: julio-2008
Mensajes: 7
Antigüedad: 16 años, 3 meses
Puntos: 0
Respuesta: Problemas para centrar divs
Hola,

Si quieres centrar el div
1. Debes especificarle un ancho, porque esta ocupando todo el ancho de la tabla y no tiene sentido centrarlo.
2. La forma correcta de centrar elementos (hasta donde tengo entendido) es usando margin:0px auto

Código HTML:
<div id="hostingr1c1" style="margin:0px auto;width:90px">Hola</div>
Creo que son eso debería centrarse.

Saludos

Oscar
  #4 (permalink)  
Antiguo 01/08/2008, 01:36
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 18 años, 1 mes
Puntos: 280
Respuesta: Problemas para centrar divs
Dos cosas:

1.-

Cita:
<table height="600" weight="800" aling="center" >
<div id="hostingr1c1"></div>

<div id="hostingr1c6"></div>

<div id="hostingr1c10"></div>

<div id="hostingr2c1"></div>
</table>
No puedes poner cosas en una tabla sin filas ni celdas. Una tabla siempre debe llevar al menos una fila (tr), y como mínimo una celda (td), que son realmente los contenedores de las cosas en la tabla.

Cita:
<table height="600" weight="800" aling="center" >
<tr>
<td>
<div id="hostingr1c1"></div>
<div id="hostingr1c6"></div>
<div id="hostingr1c10"></div>
<div id="hostingr2c1"></div>
</td>
</tr>
</table>
2.- Cuando pones el "código completo" ya no aparece esa tabla (???), y no lo entiendo.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 01/08/2008, 03:11
Avatar de imagen021  
Fecha de Ingreso: julio-2008
Ubicación: A Coruña
Mensajes: 74
Antigüedad: 16 años, 3 meses
Puntos: 1
Respuesta: Problemas para centrar divs
Será por la cantidad de errores tipográficos que hay en esta línea?

<table height="600" weight="800" aling="center" >

Donde weight debe ser width y aling debe ser align??

Siempre ponle un borde a los elementos para hacer pruebas de donde son los límites, donde se ve cada elemento y cuando todo está correcto, eliminas ese borde.

Saludos!!
  #6 (permalink)  
Antiguo 01/08/2008, 11:31
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 9 meses
Puntos: 3
Respuesta: Problemas para centrar divs
Parece que hay errores por todos lados, te sugiero que primero trates de poner un codigo simplificado y no tan largo, así podemos ayudarte en base a ese.

Porque yo no me había dado cuenta, pero tiene razón Mikmoro, no sirve de nada tener una <table> sin sus etiquetas correspondientes de tr y td.
  #7 (permalink)  
Antiguo 01/08/2008, 13:24
 
Fecha de Ingreso: julio-2008
Mensajes: 61
Antigüedad: 16 años, 3 meses
Puntos: 2
Respuesta: Problemas para centrar divs
Muchas Gracias a todos, al final era como decia Jamati.

Código PHP:
}
#hostingr8c1 {
position:absolute;
left:650px;
top:450px;
width:142px;
height:25px;
z-index:7;
visibility:visible;
background:url(images/hosting_r8_c1.jpg);
text-align:center;
} 

Saludos y gracias a todos
Última edición por skiletmk; 01/08/2008 a las 14:20
  #8 (permalink)  
Antiguo 01/08/2008, 17:03
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 16 años, 9 meses
Puntos: 3
Respuesta: Problemas para centrar divs
Tantas ayudas que me dieron todos, por fin soy de utilidad para otro forista !!
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 04:42.