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> </p>
</div>
Muchas gracias!
Saludos!