Foros del Web » Creando para Internet » CSS »

Centrar div (width dinamico)

Estas en el tema de Centrar div (width dinamico) en el foro de CSS en Foros del Web. Muy buenas, tengo un div con un width:650px y lo centro de la sigueinte forma @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original #nav_principal {     ...
  #1 (permalink)  
Antiguo 14/02/2011, 17:00
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Centrar div (width dinamico)

Muy buenas, tengo un div con un width:650px

y lo centro de la sigueinte forma
Código CSS:
Ver original
  1. #nav_principal {
  2.     margin-left: 9%;
  3.     margin-right: 9%;
  4. }

ahora bien, después de pasar por un javascript este div pasa a tener un un width de longitud variable, ya sea 300px, 100px ,90px, 700px...

como puede hacer para mantenerlo centrado?

Un saludo y gracias!
  #2 (permalink)  
Antiguo 14/02/2011, 17:07
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Centrar div (width dinamico)

Usando margin-left:auto; margin-right:auto.
De manera más abreviada margin:0 auto, salvo que quieras otros valores para el margen superior e inferior.
Aunque cambies el ancho, seguirá centrado. Es necesario que le des un ancho, de otro modo ocupará el 100% del contenedor padre.
  #3 (permalink)  
Antiguo 14/02/2011, 17:11
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Centrar div (width dinamico)

me olvidaba de decir que así no se centra...
y tampoco entiendo muy bien por que...
  #4 (permalink)  
Antiguo 14/02/2011, 17:25
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Centrar div (width dinamico)

Sin ver el código HTML y CSS no puedo opinar.
  #5 (permalink)  
Antiguo 14/02/2011, 17:38
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Centrar div (width dinamico)

Código HTML:
Ver original
  1. <div id="nav_principal">
  2.     <div id="navegacion">        
  3.          <ul>
  4.              <li><span class="imagen" >
  5.                  <img  src="phpBB3/download/file.php?avatar=<?php echo $row_consulta_datos['user_avatar']; ?>" />
  6.                  </span>
  7.               </li>
  8.         </ul>
  9.     </div>
  10. </div>
he resumido el numero de <li> para que sea más comprensible, supongo que eso sera insignificante

Código CSS:
Ver original
  1. #navegacion li {
  2. float:left ;
  3. list-style:none ;
  4. margin: 0px 0px 0px 0px;
  5.  
  6. }
  7.  
  8. #nav_principal {
  9. margin-left:auto;
  10. margin-right:auto;
  11. }
  12. #navegacion {
  13. margin-left:auto;
  14. margin-right:auto;
  15. }

el div nav_principal si que se centra ;) pero el navegación no.
Tambien porbe a ponerle margin: 0 auto; al <ul>

tengo este css eredado el cual no puedo tocar
Código CSS:
Ver original
  1. ul, menu, dir {
  2.     -moz-padding-start: 40px;
  3.     display: block;
  4.     list-style-type: disc;
  5.     margin: 1em 0;
  6. }
  #6 (permalink)  
Antiguo 14/02/2011, 18:46
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Centrar div (width dinamico)

para la navegación prueba

Código CSS:
Ver original
  1. #navegacion,#navegacion ul,#navegacion li{
  2.     margin: 0 auto;
  3.     padding:0;
  4. }

así a simple vista yo diría que no se centra porque las listas tienen sangría por default, en algunos navegadores es con paddin en otros con margin... con el css que te indico debería andar
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 15/02/2011, 11:55
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Centrar div (width dinamico)

nada... no va...
pero he detectado el problema!

el problema es que automáticamente el width de #navegacion toma el valor del 100% de #nav_principal
por lo que al poner margin: 0 auto a #navegacion se centra, pero sobran pixeles a la derecha
ahora la pregunta es ¿como hago para que el width de #navegacion no tome el valor del width de #nav_principal
  #8 (permalink)  
Antiguo 15/02/2011, 12:07
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Centrar div (width dinamico)

muéstranos tu sitio o una demo de lo que tienes hasta ahora, para poder revisar mas a fondo y diagnosticar el problema
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 15/02/2011, 16:18
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Centrar div (width dinamico)

http://www.airsoftgato.info/

La lista del final
  #10 (permalink)  
Antiguo 15/02/2011, 16:59
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Centrar div (width dinamico)

Yo lo he resuelto de la siguiente forma:
#navegacion{
text-align:center;
}
#navegacion li{
display:inline ;
list-style:none ;
margin: 0; /* este en realidad no te haría falta al haberlo declarado para todos los elementos */
}
  #11 (permalink)  
Antiguo 15/02/2011, 17:32
davidbrepe
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Centrar div (width dinamico)

vale solucionado!

Muchas gracias a los dos
un saludo!

Etiquetas: dinamico, width
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 07:42.