Foros del Web » Creando para Internet » CSS »

Problemas para centrar un div

 Estas en el tema de Problemas para centrar un div en el foro de CSS en Foros del Web. Hola que tal... Me gustaría que alguien me ayude a reseolver este inconveniente que tengo: Mis codigos son los siguientes: index.html: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: ...
  #1 (permalink)  
Antiguo 23/01/2011, 09:52
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 14 años
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
  #2 (permalink)  
Antiguo 23/01/2011, 10:30
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 11 meses
Puntos: 36
Respuesta: Problemas para centrar un div
Prueba a centrar el contenedor fondo-texto con "margin:-4px auto 0" o las medidas que te hagan falta.
Has centrado el contenedor texto dentro de él, pero a él mismo no lo centras en la página. No creo que haya otro problema.
  #3 (permalink)  
Antiguo 23/01/2011, 10:34
Avatar de luciio  
Fecha de Ingreso: junio-2009
Ubicación: Guadalajara, MX.
Mensajes: 351
Antigüedad: 15 años, 6 meses
Puntos: 38
Respuesta: Problemas para centrar un div
Dices que la capa #fondotexto le ordenaste tener 800px de ancho (correcto) y que se tenia que centrar?

lo ultimo no lo veo por ningun lado, veamos:

#fondo-texto {
text-align:center; <-- Aqui solo indicas que el texto que contenga la capa se centre
background-image: url(objetos/post-rep.png);
background-repeat: repeat-y;
background-position: center;
margin-top:-4px;
width:800px
}

En ningun lugar le estas indicando a la capa que se centre, para esto debes utilizar margin: 0 auto;

Saludos
__________________
cursos delineado permanente - mi selección de plantillas para wordpress
  #4 (permalink)  
Antiguo 23/01/2011, 10:36
 
Fecha de Ingreso: diciembre-2010
Mensajes: 51
Antigüedad: 14 años
Puntos: 2
De acuerdo Respuesta: Problemas para centrar un div
Cita:
Iniciado por sanxuan Ver Mensaje
Prueba a centrar el contenedor fondo-texto con "margin:-4px auto 0" o las medidas que te hagan falta.
Has centrado el contenedor texto dentro de él, pero a él mismo no lo centras en la página. No creo que haya otro problema.
Gracias eres un genio!!!!

Etiquetas: capas, centrar, text-align
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 05:43.