Morsche!
Heute wende ich mich mal mit einem CSS-Problem an die Community:
Die Aufgabenstellung:
Eine Link-Liste, mit untereinander gelisteten Begriffen.
Diese einzelnen Begriffe sind verweis-sensitiv und beim Drüberfahren
mit der Maus soll für den Betrachter - immer an derselben Stelle -
das jeweils zu dem Begriff passende Bild erscheinen.
Die Bild-Dateien haben alle eine identische Größe, nur das Bild
ändert sich je nach Begriff des Verweises und der jeweils in den
die img src geladene img-Datei.
So weit kein Problem.
Jedoch stellt sich heraus, dass die Position (das Erscheinen der Bilder
nach dem Drüberfahren) sich entweder mit dem Link bewegt oder aber
auf einem anderen Bildschirm mit anderer Auflösung eine unterschiedliche
Position einnimmt.
Zielsetzung ist aber:
Beim Drüberfahren sollte auf jeder Bildschirmgröße
das erscheinende Bild an der gleichen Stelle erscheinen.
Hier die beiden Code-Ansätze:
1. Variante/Problem: (je nach Bildschirmgröße / Viewport verändert sich die horizontale
Position der erscheinenden Bildbox.
2. Variante/Problem: Bilder und Verweise "wackeln" und "ruckeln"
mit dem Drüberfahren und verändern die Position vertikal analog des
gehoverten Links.
Der Code mal als Verdeutlichung!
Sollte der Denkansatz falsch sein und mir jemand einen anderen - aber richtigen -
Weg aufzeigen ist das auch okay.
Ich dachte, eine absolute Positionierung ist ABSOLUT
und ändert sich nicht aufgrund anderer Bildschirmgrößen/viewports.
Denkfehler?
Ich freue mich über eure Empfehlungen und bedanke mich
im Voraus
L'mate
Heute wende ich mich mal mit einem CSS-Problem an die Community:
Die Aufgabenstellung:
Eine Link-Liste, mit untereinander gelisteten Begriffen.
Diese einzelnen Begriffe sind verweis-sensitiv und beim Drüberfahren
mit der Maus soll für den Betrachter - immer an derselben Stelle -
das jeweils zu dem Begriff passende Bild erscheinen.
Die Bild-Dateien haben alle eine identische Größe, nur das Bild
ändert sich je nach Begriff des Verweises und der jeweils in den
die img src geladene img-Datei.
So weit kein Problem.
Jedoch stellt sich heraus, dass die Position (das Erscheinen der Bilder
nach dem Drüberfahren) sich entweder mit dem Link bewegt oder aber
auf einem anderen Bildschirm mit anderer Auflösung eine unterschiedliche
Position einnimmt.
Zielsetzung ist aber:
Beim Drüberfahren sollte auf jeder Bildschirmgröße
das erscheinende Bild an der gleichen Stelle erscheinen.
Hier die beiden Code-Ansätze:
1. Variante/Problem: (je nach Bildschirmgröße / Viewport verändert sich die horizontale
Position der erscheinenden Bildbox.
HTML:
<head>[...]
<style type="text/css">
#hessen_01 a .big2 {
display: none;
}
#hessen_01 a:hover .big2 {
display: block;
position:absolute;
top:-190px;
left:540px;
width:500px;
height:333px;
}
#hessen_01 a:hover {
color:#FC0;
}
</style>
</head>
<body>
<div = class "hessen_01">
<ul>
<li><a href="karte.html" class="places">Koblenz<span class="big2"><img src="../pics/sg_08.png" width="540" height="730"</span></a></li>
<li><a href="karte.html" class="places">Wiesbaden<span class="big2"><img src="../pics/sg_09.png" width="540" height="730"</span></a></li>
<li><a href="karte.html" class="places">Trier<span class="big2"><img src="../pics/sg_10.png" width="540" height="730"</span></a></li>
</ul>
...
</div>
</body>2. Variante/Problem: Bilder und Verweise "wackeln" und "ruckeln"
mit dem Drüberfahren und verändern die Position vertikal analog des
gehoverten Links.
HTML:
<head>[...]
<style type="text/css">
.places {
background-color:#F63;
}
.places img {
display:none;
}
.places:hover {
width:540px;
height:730px;
position:absolute;
top:0px;
margin:0 auto;
}
.places:hover img {
width:540px;
height:730px;
position:absolute;
top:-190px;
margin:0 auto;
display:block;
}
</style>
</head>
<body>
<div = class "hessen_01">
<ul>
<li><a href="karte.html" class="places">Koblenz<span class="big2"><img src="../pics/sg_08.png" width="540" height="730"</span></a></li>
<li><a href="karte.html" class="places">Wiesbaden<span class="big2"><img src="../pics/sg_09.png" width="540" height="730"</span></a></li>
<li><a href="karte.html" class="places">Trier<span class="big2"><img src="../pics/sg_10.png" width="540" height="730"</span></a></li>
</ul>
...
</div>
</body>Der Code mal als Verdeutlichung!
Sollte der Denkansatz falsch sein und mir jemand einen anderen - aber richtigen -
Weg aufzeigen ist das auch okay.
Ich dachte, eine absolute Positionierung ist ABSOLUT
und ändert sich nicht aufgrund anderer Bildschirmgrößen/viewports.
Denkfehler?
Ich freue mich über eure Empfehlungen und bedanke mich
im Voraus
L'mate
