Tema: Problemas para centrar un div
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/01/2011, 09:52
3rps
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 13 años, 11 meses
Puntos: 2
Exclamación Problemas para centrar un div
Hola que tal...
Me gustaría que alguien me ayude a reseolver este inconveniente que tengo:
Mis codigos son los siguientes:
index.html:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin título</title>
  6. <link href="estilo-general.css" rel="stylesheet" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <!-- Franja superior -->
  11. <div id="franja1">
  12.     <div id="sub-f1">
  13.     Texto de Prueba
  14.     </div>
  15. </div>
  16. <!-- /Franja superior -->
  17. <!-- Franja gruesa -->
  18. <div id="franja2">
  19.     <div id="sub-f2">
  20.         <div id="menu">
  21.             <ul>
  22.                 <li><a href="index.html" class="link-menu">Home</a></li>
  23.                 <li>Ubicación</li>
  24.                 <li>Teléfono</li>
  25.                 <li>Fax?</li>
  26.                 <li>Contacto</li>
  27.             </ul>
  28.         </div>
  29.         <div id="banner"><img src="objetos/banner.gif" /></div>
  30.         
  31.     </div>
  32. </div>
  33. <!-- /Franja gruasa -->
  34. <div id="global">
  35. <!-- Post -->
  36. <div id="texto-a">&nbsp;</div>
  37. <div id="fondo-texto">
  38.     <div id="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor sed nisi tempus posuere. Proin odio ligula, fermentum eget iaculis nec, placerat ut mauris. Nulla eleifend vehicula tortor, a convallis quam dictum vel. Nam enim turpis, feugiat sit amet scelerisque in, sollicitudin et dui. Duis eu lacus est, vitae malesuada leo. Etiam sagittis, tellus vitae aliquet bibendum, nunc lacus convallis libero, ac vehicula tellus odio quis risus. Praesent pharetra lobortis ipsum, ac sagittis nisl viverra quis. Curabitur vulputate congue congue. Sed egestas leo elementum mauris ornare placerat. Praesent lectus tortor, consequat at sodales vel, iaculis vel dolor. Etiam eget elementum quam. Sed tempus lacinia massa at tempus. Fusce lectus justo, aliquam vitae convallis et, rhoncus ut elit.
  39.  
  40. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque vulputate, eros sit amet fringilla pretium, risus est ultrices purus, tempus laoreet tortor dolor eu dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec at cursus risus. Aenean mi neque, tempor nec feugiat et, pellentesque gravida lacus. Morbi sed metus vitae velit fermentum laoreet. Donec vel est turpis. Ut eget nisl in felis tincidunt euismod. Sed fermentum rhoncus risus nec rutrum. Maecenas aliquam eros eu turpis tincidunt dictum. Vestibulum pellentesque tempor interdum. Praesent sed tellus tortor. Fusce tempor lacus sit amet enim ornare tincidunt. Ut eget metus vitae ante volutpat ornare. Donec suscipit purus eu libero aliquam imperdiet. Suspendisse ut dui eget ligula euismod consequat. Fusce a odio sit amet mi molestie bibendum. Etiam blandit, odio ac gravida semper, nibh purus gravida diam, eget vulputate nibh nunc sed purus.</div>
  41. </div>
  42.  
  43.  
  44. <!-- /Post -->
  45. </div>
  46. </body>
  47. </html>

estilos.css
Código CSS: 
Ver original
  1. body {
  2.     margin-top: 0px;
  3.     margin-left: 0px;
  4.     margin-right: 0px;
  5.     margin-bottom: 0px;
  6.     background-image:url(objetos/background.png);
  7.     background-repeat:repeat;
  8.     text-align:center;
  9. }
  10. /* Header */
  11.  
  12. /* Franja pequeña */
  13. #franja1 {
  14.     background-color: #8c2703;
  15.     text-align: center;
  16.     height: 25px;
  17.     margin: 0px;
  18.     padding: 0px;
  19.     border-bottom: #0A8DA5 3px solid;
  20. }
  21. #franja1 #sub-f1 {
  22.     color: white;
  23.     text-align: center;
  24.     padding: 0;
  25.     width: 800px;
  26.     margin: 0 auto;
  27.     height: 25px;
  28. }
  29.  
  30. #franja2 {
  31.     background-color: beige;
  32.     background-image:url(objetos/background.jpg);
  33.     background-repeat:repeat;
  34.     text-align: center;
  35.     height: 125px;
  36.     margin: 0px;
  37.     padding: 0px;
  38. }
  39. #franja2 #sub-f2 {
  40.     color: white;
  41.     text-align: center;
  42.     padding: 0;
  43.     width: 800px;
  44.     margin: 0 auto;
  45.     height: 125px;
  46. }
  47. #franja2 #sub-f2 #banner{
  48.     text-align:left;
  49. }
  50. #franja2 #sub-f2 #menu {
  51.     margin-top:0px;
  52.     margin-left:0px;
  53.     text-align:right;
  54.     float:left;
  55.     height:27px;
  56. }
  57. #franja2 #sub-f2 #menu ul {
  58.     margin-top:0px;
  59.     height:27;
  60. }
  61. #franja2 #sub-f2 #menu li {
  62.     color: #0A8DA5;
  63.     font-family:"Comic Sans MS", cursive;
  64.     list-style:none;
  65.     float:left;
  66.     margin-left:25px;
  67.     margin-top:0px;
  68.     text-align:center;
  69.     background-image:url(objetos/menu.png);
  70.     background-repeat:no-repeat;
  71.     background-position:left 0px 0px;
  72.     width:107px;
  73. }
  74. #franja2 #sub-f2 #menu li a {
  75.     text-decoration: none;
  76.     color: #0A8DA5;
  77.     font-family:"Comic Sans MS", cursive;
  78. }
  79. /*
  80. PARTE EN SUSPENSO DEBIDO A  NO FUNCIONA!
  81. _____________________________________________________________________
  82. #franja2 #sub-f2 #menu li:hover {
  83.     color: black;
  84.     font-family:"Comic Sans MS", cursive;
  85.     list-style:none;
  86.     float:left;
  87.     margin-left:25px;
  88.     margin-top:0px;
  89.     text-align:center;
  90.     background-image:url(objetos/menu-hover.png);
  91.     background-repeat:no-repeat;
  92.     background-position:left 0px 0px;
  93.     width:107px;
  94. }
  95. #franja2 #sub-f2 #menu li a:active {
  96.     color: #eef89a;
  97.     font-family:"Comic Sans MS", cursive;
  98.     list-style:none;
  99.     float:left;
  100.     margin-left:25px;
  101.     margin-top:0px;
  102.     text-align:center;
  103.     background-image:url(objetos/menu-hover.png);
  104.     background-repeat:no-repeat;
  105.     background-position:left 0px 0px;
  106.     width:107px;
  107. }
  108. */
  109.  
  110. /* /Header */
  111. #global {
  112.     text-align:center;
  113. }
  114. /* Content */
  115. #texto-a{
  116.     text-align:center;
  117.     background-image: url(objetos/post-arriba.png);
  118.     background-repeat: no-repeat;
  119.     background-position: center;
  120.     margin-top:25px;
  121.     margin-bottom:0px;
  122. }
  123. #fondo-texto {
  124.     text-align:center;
  125.     background-image: url(objetos/post-rep.png);
  126.     background-repeat: repeat-y;
  127.     background-position: center;
  128.     margin-top:-4px;
  129.     width:800px
  130. }
  131. #fondo-texto #texto {
  132.     color: #000000;
  133.     text-align:center;
  134.     padding: 0;
  135.     width: 800px;
  136.     margin: 4px auto;
  137.     margin-top: 0px;
  138. }
  139. #fondo-texto #texto p {
  140.     text-align:justify;
  141.     margin:0px;
  142. }
  143. /* Content */

El problema está con las capas #fondo-texto y #texto, que más allá de que les diga que se tienen que centrar y tienen 800 px de ancho (cuando pongo el ancho ocurre el problema) no hacen caso...

Como ven en la imagen ↑ el texto se centra a la izquierda...
Espero que alguien me pueda ayudar y disculpen si la pregunta es tonta, pero no le encuentro motivo a este problema...
Saludos