<div class="kolumna_pozioma_2"> <section id="galeria">
<div class="praca"><div class="first"><img src="images/1a252.png" alt="" /></div> <div class="second"><img src="images/2a252.png" alt="" /></div></div> <div class="praca"><div class="first"><img src="images/2a252.png" alt="" /></div> <div class="second"><img src="images/3a252.png" alt="" /></div></div> <div class="praca"><div class="first"><img src="images/3a252.png" alt="" /></div> <div class="second"><img src="images/2a252.png" alt="" /></div></div> </section>
CSS:
.prace {
margin: 50px auto 0 auto;
width: 900px;
height: 300px;
background-color: #e8e8e9;
position: relative;
top: -50px;
}
div.praca{
margin-left:290px;
margin-top: 22px;
margin-bottom: 28px;
overflow: hidden;
float: left;
}
div.praca div{
width: 252px;
height: 252px;
text-align: center;
position: absolute;
margin-left: -255px;
background: #f1f0ef;
}
div.praca div.first {
z-index: 1;
}
div.praca:hover div.first {
display: none;
}
.container{
width: 900px;
z-index: 0;
margin: 0 auto 0 auto;
}
#galeria {
min-height:1000px;
}
Efekt tego kodu: 1 obrazek na linii tak jak powinien być, a 2 pozostałe obrazki (2a252.png i 3a252.png) są już kilka pikseli niżej. Tak jakby linie niżej.
Jaką poprawkę tutaj zastosować, aby te 3 obrazki były na tej samej linii, a nie tak jak jest teraz?