nicht angemeldet
Positionierung von Bildern
Matthias ApselGuten Tag,
ich schlage mich schon länger mit einem CSS-Problem herum.
Ich möchte auf einer Seite kleine Vorschaubilder mit der hover-Funktion vergrößern.
Das ganze wäre auch kein Problem, wenn nicht die kleinen Bilder im dann grossen Bild sichtbar wären.
Ich möchte also, dass wenn ich über das kleine Bild mit der Maus fahre, daraus ein grosses Bild wird, und zwar im Vordergrund, ohne dass noch ein kleines Bild angezeigt wird. Die kleinen Bilder möchte ich nebeneinander und untereinander anordnen.
Mit der Positionierung: absolute klappt es eben nicht.
Gefallen würde mir, dass ich das grosse Bild in die Mitte der Seite platziere, immer an der gleichen Stelle – aber eben total im Vordergrund.
Kann mir da jemand helfen?
Zum besseren Verständnis habe ich den Code hier noch mal dargestellt.
Vielen Dank im voraus
Matthias
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>
Infobox</title><style type="text/css">
<!--img {
border:none;
}
#box_1{
position:fixed; top:20px;height:75px;width:100px;
}
#box_1 div{
display:none;
}
#box_1:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}
#box_2{
position:fixed; top:20px;left:150px;height:75px;width:100px;
}
#box_2 div{
display:none;
}
#box_2:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}
#box_3{
position:fixed; top:250px;height:75px;width:100px;
}
#box_3 div{
display:none;
}
#box_3:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}
#box_4{
position:fixed; top:375px;height:100px;width:75px;
}
#box_4 div{
display:none;
}
#box_4:hover div{
display:block;width:300px;position:absolute;top:20 px;left:20px;
}-->
</style>
</head>
<body>
<div id="box_1"><a href="#"><img src="01klein.jpg" width="100" height="75" alt="bild"/></a>
<div><p><img src="01gross.jpg" width="1160" height="700" alt=""/></p></div></div>
<div id="box_2"><a href="#"><img src="03klein.jpg" width="100" height="75" alt="bild"/></a>
<div><p><img src="03gross.jpg" width="1160" height="700" alt=""/></p></div></div>
<div id="box_3"><a href="#"><img src="04klein.jpg" width="100" height="75" alt="bild"/></a>
<div><p><img src="Bilder/Test/04gross.jpg" width="1160" height="700" alt=""/></p></div></div>
<div id="box_4"><a href="#"><img src="05klein.jpg" width="75" height="100" alt="bild"/></a>
<div><p><img src="05gross.jpg" width="700" height="1160" alt=""/></p></div></div>
</body>
</html>
-
Om nah hoo pez nyeetz, viking!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Verwende HTML5
<!doctype html><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta charset="UTF-8">
Das Dokument dann auch als UTF-8 speichern<style type="text/css">
<style> reicht dann
<!--img {
Die Kommentare sind nicht notwendig.
Wie position funktioniert weißt du?
<div id="box_1"><a href="#"><img src="01klein.jpg" width="100" height="75" alt="bild"/></a>
<div><p><img src="01gross.jpg" width="1160" height="700" alt=""/></p></div></div>Wozu die Linkelemente? Es gibt dort nichts zu verlinken. Oder soll es eine Navigation werden?
Wäre so etwas gut?
+---+ +-----------------+
| | | |
+---+ | |
| |
+---+ | |
| | | |
+---+ +-----------------++---+ +---+ +---+ +---+
| | | | | | | |
+---+ +---+ +---+ +---+Dazu wäre folgende Struktur geeignet
<nav>
<a><img>...</a>
<a><img>...</a>
...
<figure>...</figure>
</nav>im CSS beispielsweise
nav > a:first-child:hover ~ figure {background ...}Das natürlich für jedes Link-Element
Im Wiki findest du weitere Hilfe (strukturelle Pseudoklassen, Hintergründe, ...)
Matthias
