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
Problema con un galeria de fotos 
