Problema con un galeria de fotos

josejump06 · #1 (**permalink**) 20/04/2015, 12:56

Hola estoy haciendo una pagina web y quiero hacer como una galeria de fotos, pero lo que pasa esque hago varios divs englobados en uno y este a su vez en un article y este en una section. ¿que pasa? que cuando meto la img en las dos primeras divs se superponen no se va cada una al div que le pertenece y no se porque. Es como si las fotos fueran por su cuenta y no calleran del div.

Código HTML:

<section>

    <article>
        <div id="prd">
            <div id="p">
                <img alt="tiritas" src="imagenes/tiritas.jpg"></img>
            </div>
            <div id="p">
                <img alt="tiritas" src="imagenes/tiritas.jpg"></img>
            </div>
        </div>
    </article>

</section>
<style>
#prd
{
  margin-top: 3%;
  margin-bottom: 3%;
  margin-left: 20%;
  background: white;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px none #000000;
  width: 75%;
  height:1500px;
  
}
#prd div
{
  float: left;
  width: 20%;
  height: 250px;
  margin-left: 10%;
  margin-top: 2%;
  border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  border: 2px solid #000000;
}

#prd div img
{
width: 12%;
margin-top: 1%;
}

</style>

¿Debería ponerle un id diferente a cada div para que las fotos fueran a su sitio o como lo hago?

mbm150 · #2 (**permalink**) 21/04/2015, 09:47

Hola,

no se si he entendido muy bien, creo que debes poner:

Código CSS:

Ver original#prd{
  margin-top: 3%;
  margin-bottom: 3%;
  margin-left: 20%;
  background: white;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px none #000000;
  width: 75%;
  height:1500px;
  overflow: hidden; /*Añades esto*/
}

Así los elementos flotantes no se ponen encima del div. No se si ese era tu problema.

PD: Analizando un poco tu código que antes no había mirado, las id deben ser únicas, cambialo por class. Y el ancho de las imágenes ponlo al 100% ya que estan solas dentro de cada div. Te dejo tu codigo reescrito: http://jsfiddle.net/mbm150/fhggm7ot/

Saludos.

josejump06 · #3 (**permalink**) 09/05/2015, 05:34

No perdona esque tengo un lio bastante grande el problema es:

Que en el css que lo engloba a todo hay un conflicto con la una parte de un carrusel que he querido poner de menu y como no domino bien las herencias pues he metido la gamba.

mira:

Código HTML:

<!Doctype html>
<html lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<title>Farmacia Concepción Torras</title>
	<link rel="icon" type="image/img" href="./imagenes/logo.png">
</head>
<body>
<div id="warp">
	<header>
			<h1>PRODUCTOS</h1>
	</header>

	<nav>	
		
	</nav>	

<section>
	<div id="prd">
		<div>
			<img src="imagenes/tiritas.jpg" alt="tiritas">
		</div>
		<div>
			<img src="imagenes/tiritas.jpg" alt="tiritas">
		</div>
	</div>
</section>

<aside>


</aside>

</div>
</body>
</html>

Y el css es

Código:

/*-----------------------------------------------------------index.html---------------------------------------------------------------*/
body{
	margin:0px;
	padding: 0px;
	background-color: #183620;
}
header{
	border: 10px solid #5BD27B;
	width: 100%;
	height:200px;
	box-sizing: border-box;
}
h1{
	color: white;
	text-align: center;
}
ul{
	text-align:center;
}
li{
	display: inline;
	color: white;
	padding:20px;
}
section{
	border: 10px solid #5BD27B;
	width: 100%;
	float:left;
	box-sizing: border-box;
	text-align: center;
}
article img{
	margin-top: 5%;
}

/*-----------------------------------------------------------menu giratorio del index.html---------------------------------------------------------------*/

#carousel 
{ 
  perspective: 1200px; 
  background-color: #183620; 
  padding-top: 10%; 
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner 
{ 
  transform-style: preserve-3d; 
  height: 200px; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner a,img
{ 
  width: 50%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner a:nth-child(1) { transform:rotateY(0deg); }
figure#spinner a:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner a:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner a:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner a:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner a:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner a:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner a:nth-child(8){ transform: rotateY(-315deg); }
#carousel ~ span 
{ 
  color: #000; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  border-bottom: none; 
  line-height: 0; 
}
#carousel ~ span:hover 
{ 
color: #bada55; cursor: pointer;
}
.label
{
margin-right: 5px;
width: 150px;
float: left;
clear: both;
}

/*-----------------------------------------------------------productos.html---------------------------------------------------------------*/

#prd
{
  margin-top: 3%;
  margin-bottom: 3%;
  margin-left: 20%;
  background: white;
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px;
  border: 0px none #000000;
  width: 75%;
  height:1500px;
  
}
#prd div
{
  float: left;
  width: 20%;
  height: 250px;
  margin-left: 10%;
  margin-top: 2%;
  border-radius: 20px 20px 20px 20px;
  -moz-border-radius: 20px 20px 20px 20px;
  -webkit-border-radius: 20px 20px 20px 20px;
  border: 2px solid #000000;
}

#prd div img
{
width: 100%;
margin-top: 1%;
}

la cagado esta en la parte del menu giratorio donde pone (figure#spinner a,img) si quito lo de img en la pagina producto todo se arregle pero el menu se me unde en la mierda jejejeje.

Si me puedes ayudar te lo agradecería.

Salu2