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;
}
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;
}