Ver Mensaje Individual
  #3 (permalink)  
Antiguo 25/10/2009, 13:05
Avatar de murderer
murderer
 
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 15 años, 1 mes
Puntos: 2
Respuesta: Centrar imagenes horizontalmente

Jaja, tienes razón quise decir alinear imagenes horizontalmente.

Lo que quiero hacer es crear una galeria de imagenes, que vaya acomodando las imagenes horizontalmente, y que luego de 5 imagenes baje a la siguiente fila, para seguir insertando imagenes.


Este es el código
Código:
/* General */

body {
margin-top:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000033;
font-size:12px;
}

body a {
color:#b28626;
text-decoration:none;
}

body a:hover {
color:#003366;
text-decoration:none;
}

body img {
border:none;
}




#cuerpo {
overflow:auto;
background:#0099CC;
width:900px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}

/*---------------*/
/* Encabezado */

#header {
width:900px;
height:200px;
}

#notice a{
color:#FFFFFF;
}
#notice a:hover{
color:#FFFFFF;
text-decoration:underline;
}

#cpuser a{
color:#FFFFFF;
}
#cpuser a:hover{
color:#FFFFFF;
text-decoration:underline;
}


#nombre {
margin:20px;
width:450px;
height:120px;
float:left;
}


#login {
text-align:center;
background:url(img/log_bg.png);
width:350px;
height:150px;
margin:20px;
float:right;
}

#login input{
background:#FFFFCC;
border:none;
}
/*---------------*/
/* Contenedor principal*/

#contenedorprincipal {
margin:15px;
}

#notice {
width:870px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

/* Secondary boxes */
#perfilfoto {
width:180px;
height:240px;
margin:15px;
text-align:center;
}

#perfilfotoheaderleft {
background:url(img/left_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:left;
}

#perfilfotoheader {
background:url(img/header_box.png) repeat-x;
width:140px;
height:30px;
overflow:auto;
}

#perfilfotoheaderright {
background:url(img/right_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:right;
position:static;
}

#perfilfotocenter {
background:#FFFFFF;
width:180px;
height:200px;
overflow:auto;
}

#perfilfotofooter {
background:url(img/footer_fperfil.png) repeat-x;
width:180px;
height:10px;
overflow:auto;
}
/* Galeria de fotos en el perfil */

#perfilgalfoto {
width:680px;
height:240px;
margin:15px;
text-align:center;
display: block;
}

#perfilgalfoto ul, li {
	list-style-type: none;
	display: inline;
}


#perfilgalfotoheaderleft {
background:url(img/left_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:left;
}

#perfilgalfotoheader {
background:url(img/header_box.png) repeat-x;
width:640px;
height:30px;
overflow:auto;
}
#perfilgalfotoheaderright {
background:url(img/right_header_box.png) no-repeat;
width:20px;
height:30px;
overflow:auto;
float:right;
position:static;
}

#perfilgalfotocenter {
background:#FFFFFF;
width:680px;
height:230px;
overflow:auto;
}

#perfilgalfotofooter {
background:url(img/footer_fperfil.png) repeat-x;
width:680px;
height:10px;
overflow:auto;
}



/*---------------*/
/* Footer*/


#footer {
overflow:auto;
background:url(img/cuerpo_bottom.png) no-repeat;
height:50px;
margin-left:auto;
margin-right:auto;
width:900px;
text-align:center;
}
Y el HTML es:
Código:
   <div id="perfilgalfoto">
    <div id="perfilgalfotoheaderleft"></div>
    <div id="perfilgalfotoheaderright"></div>
    <div id="perfilgalfotoheader">
     <p>  Galeria de imagenes </p>
    </div>
    
    <div id="perfilgalfotocenter">
     <p><img src='imgusuarios/usuario1/fantasy_art_scenery_wallpaper_alex_popescu_01.jpg' width='160' height='160'/></p>
     <p><a href="subirfoto.php">Subir nueva imagen</a> - Borrar imagenes</p>
    </div>
    </div>
   <div id="perfilgalfotofooter">
     <p>&nbsp;</p>
   </div>
Muchas gracias!

Saludos!
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter