Foros del Web » Creando para Internet » CSS »

Centrar Div

Estas en el tema de Centrar Div en el foro de CSS en Foros del Web. Buenas me gustaria que alguien me dijese como puedo centrar este Div en la pagina web para que no se me queda todo a la ...
  #1 (permalink)  
Antiguo 11/11/2006, 21:45
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
Centrar Div

Buenas me gustaria que alguien me dijese como puedo centrar este Div en la pagina web para que no se me queda todo a la izquierda sino que siempre esten las imagenes centradas en la web .. gracias

aqui esta la direccion web http://www.pasada.net/index1.html
  #2 (permalink)  
Antiguo 11/11/2006, 22:04
 
Fecha de Ingreso: octubre-2006
Ubicación: Uruguay
Mensajes: 17
Antigüedad: 11 años, 1 mes
Puntos: 2
Sonrisa

Hola, por lo que vi en tu código fuente estás utilizando mal las propiedades de estilo ya que lo estás haciendo como si fueran atributos de la etiqueta div.

Esto está mal...

Código HTML:
<div width="80%"></div> 
Así está mejor...

Código HTML:
<div style="width:80%"></div> 
Pero estaría aun mejor si los estilos los definieras dentro de una hoja de estilos (dentro del documento o aparte).

Para centrar un div podrías establecer sus márgenes así:

Código HTML:
#tu_div
{
	margin-left:auto;
	margin-right:auto;
}
PD: También noté que a tu página le falta la etiqueta de apertura de <body>.

Saludos,


Raúl
  #3 (permalink)  
Antiguo 12/11/2006, 09:07
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
Je Je no se xq no tenia el body abierto :S buena cagada :(

lo he subido a la web http://www.pasada.net/index1.html lo tengo modificado y no logro centrarlo todavia bien :(
  #4 (permalink)  
Antiguo 12/11/2006, 09:45
 
Fecha de Ingreso: octubre-2006
Ubicación: Uruguay
Mensajes: 17
Antigüedad: 11 años, 1 mes
Puntos: 2
Sonrisa

Te paso un ejemplo siguiendo más o menos tu código...

Hoja de estilos:
Código HTML:
#menu
{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

/*Con esto te queda el tamaño del contenedor a 80% y centrado*/


#fila_1
{
	text-align:center;
}

/*...y con esto otro centrás el contenido de la fila 1*/
Documento:
Código HTML:
<div id="menu">
	<div id="fila_1">
		bla, bla, bla...
	</div>
</div> 
Salux!


Raúl

Última edición por elrauli; 12/11/2006 a las 09:59
  #5 (permalink)  
Antiguo 12/11/2006, 09:51
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
te subo ala web las modificaciones q me dijiste ... no veo ningun cambio :(
  #6 (permalink)  
Antiguo 12/11/2006, 09:55
 
Fecha de Ingreso: octubre-2006
Ubicación: Uruguay
Mensajes: 17
Antigüedad: 11 años, 1 mes
Puntos: 2
Mostrame la hoja de estilos para que te pueda ayudar mejor!



Edito: No me pases nada que ya la estoy viendo!!!

Voy a verlo bien...


Salux!
  #7 (permalink)  
Antiguo 12/11/2006, 10:01
 
Fecha de Ingreso: octubre-2006
Ubicación: Uruguay
Mensajes: 17
Antigüedad: 11 años, 1 mes
Puntos: 2
Exclamación

A ver si es esto...

Hubo un error de tipeo de mi parte y te puse:

Código HTML:
margint-left:auto;
cuando debí haber puesto:
Código HTML:
margin-left:auto;
en el selector #menu.


Cambialo a ver si funciona...
  #8 (permalink)  
Antiguo 12/11/2006, 10:03
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
y yo fui tan gilipollas de no darme cuenta de que sobraba la t :(
  #9 (permalink)  
Antiguo 12/11/2006, 10:06
 
Fecha de Ingreso: marzo-2006
Mensajes: 210
Antigüedad: 11 años, 8 meses
Puntos: 0
sta online puesto pero no se me centra del todo en la pagina no?
  #10 (permalink)  
Antiguo 12/11/2006, 11:37
 
Fecha de Ingreso: octubre-2006
Ubicación: Uruguay
Mensajes: 17
Antigüedad: 11 años, 1 mes
Puntos: 2
Bueno... lo que sucede es que dentro de la fila 1 el contenido no es un texto sino una lista (elemento de bloque) en la que cada li es de ancho variable y por eso no se puede centrar.

La solución sería esta:

En la hoja de estilos:
Código HTML:
#menu
{
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

#menu ul
{
	margin:0px;
	padding:0px;
	list-style:none;
}

#menu ul li
{
	float:left;
	width:25%;
	margin:0px;
	padding:0px;
	text-align:center;
}
En el documento:
Código HTML:
<div id="menu">
	<div id="fila_1">
		<ul>
			<li>
				<a href="h*ttp://w*ww.pasada.net/pau-gasol/"><img border="0px" src="h*ttp://w*ww.pasada.net/pau-gasol/p/20p.jpg" width="80px" height="63px" alt="Pau Gasol" /></a><br />
				Pau Gasol
			</li>
			<li>
				<a href="h*ttp://w*ww.pasada.net/michelle-lombardo/"><img border="0px" src="h*ttp://w*ww.pasada.net/michelle-lombardo/p/3p.jpg" width="80px" height="91px" alt="Michelle Lombardo" /></a><br />
				Michelle Lombardo
			</li>
			<li>
				<a href="h*ttp://w*ww.pasada.net/federica-ridolfi"><img border="0px" src="h*ttp://w*ww.pasada.net/federica-ridolfi/p/2p.jpg" width="53px" height="80px" alt="Federica Ridolfi" /></a><br />
				Federica Ridolfi
			</li>
			<li>
				<a href="h*ttp://w*ww.callejondiagon.com/foro"><img border="0px" src="h*ttp://w*ww.pasada.net/caliz-de-fuego/post/8p.jpg" width="100px" height="135px" alt="Callejon Diagon Foro" /></a><br />
				Registrate y Participa!!
			</li>
		</ul>
	</div>
</div> 
Probalo y decime si te anduvo...

Saludos,


Raúl

Última edición por elrauli; 12/11/2006 a las 11:58
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 11:26.