• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Bilderdarstellung

ninamandarina

Neues Mitglied
hallo liebe forenmitglieder,

ich habe eine frage zu der Darstellung meiner Bilder auf meiner homepage.

die bilder sollen in einer reihe und untereinander dargestellt werden. leider verschieben sie sich komisch.
den Fehler kann ich iwie nicht finden.

danke für eure Hilfe :)
bildschrimfoto anbei

HTML der ersten paar bilder

<section>

<div class="content">
<div class="imgContainer">
<div class="image box">
<img class="2" src="p/kb.jpg" alt="kochbuch" title="kochbuch" width="280">
</div>
<div class="hover box">
<a href="menu/kb.html">
<img class="overlay" src="p/kb.jpg" title="kochbuch" alt="kochbuch" width="280"/>

<span class="imgInfo"> 37 <br> gourmet </span>
<br>
<span class="cat2"> </span>
</a>
</div>
</div>

<div class="content">
<div class="imgContainer">
<div class="image box">
<img class="2" src="p/mhm10.jpg" alt="mhm10" title="mhm10" width="280">
</div>
<div class="hover box">
<a href="menu/mhm10.html">
<img class="overlay" src="p/mhm10.jpg" title="mhm10" alt="mhm10" width="280"/>

<span class="imgInfo"> münchner hochschulmagazin <br>ausgabe 10 </span>
<br>
<span class="cat2"> </span>
</a>
</div>
</div>



<div class="imgContainer">
<div class="image box">
<img class="2" src="p/oberberg.jpg" alt="oberberg" title="sennalpe" width="280">
</div>
<div class="hover box">
<a href="menu/so.html">
<img class="overlay" src="p/oberberg.jpg" title="oberberg" alt="oberberg" width="280"/>

<span class="imgInfo">sennalpe oberberg<br> </span>
<br>
<span class="cat2"> </span>
</a>
</div>
</div>

</section>



und CSS

body {
font-family:Source Sans Pro;
margin:30px 0 0 60px;
min-width:400px;
max-width:1400px;
font-size:14px;

}


div.content {
left:340px;
top:185px;
position: absolute;
width:80%;

}


.imgContainer {
float: left;
position: relative;
margin: 10px;

}


.imgContainer:hover div.hover {
display: block;

}

div.hover {
display: none;
position: absolute;
top:0;




}

.imgContainer:hover > div.hover span.imgInfo {
position: absolute;
top: 55px;
left: 38px;
font-weight:bold;
font-size:24px;


}

div.hover span.cat2 {
position: absolute;
top: 95px;
left: 45px;
font-weight:normal;
font-size:20px;
font-weight:normal;

}
 

Anhänge

  • Bildschirmfoto 2014-02-02 um 20.39.36.png
    Bildschirmfoto 2014-02-02 um 20.39.36.png
    809,8 KB · Aufrufe: 8
Werbung:
Zurück
Oben