Problemas para centrar divs

skiletmk · #1 (**permalink**) 31/07/2008, 17:58

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

Jamati · #2 (**permalink**) 31/07/2008, 22:22

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.

_oscar_ · #3 (**permalink**) 01/08/2008, 00:06

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

Mikmoro · #4 (**permalink**) 01/08/2008, 01:36

Dos cosas:

1.-

Cita:

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:

2.- Cuando pones el "código completo" ya no aparece esa tabla (???), y no lo entiendo.

imagen021 · #5 (**permalink**) 01/08/2008, 03:11

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!!

Jamati · #6 (**permalink**) 01/08/2008, 11:31

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.

skiletmk · #7 (**permalink**) 01/08/2008, 13:24

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

Jamati · #8 (**permalink**) 01/08/2008, 17:03

Tantas ayudas que me dieron todos, por fin soy de utilidad para otro forista !!