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

Mouseover - Problem mit Anpassung an verschiedene Auflösungen etc.

D

DrBanana

Neues Mitglied
Hallo html-Menschen :smile:

Ich betreibe seit einiger Zeit ein kleineres Forum (wbb3) mit passendem EQDKP für eine WoW-Gilde, was auch soweit reibungslos gelingt.
Dadurch kam ich mit Quelltext nur sehr wenig in Berührung und wenn dann konnte mir mein guter alter Freund google.de immer weiterhelfen.
Quelltextkopieren --> abändern --> läuft :oops:
Diesmal aber nicht. :|

Aufbau auf dem Webspace:
Grundverzeichnis ist: /html
Forum: /html/forum/index.php
EQDKP: /html/eqdkp/index.php

Bisher bestand unter /html einfach nur eine index.php mit einer automatischen weiterleitung nach "/forum/index.php"
Diese sollte durch eine "Startseite" mit zwei Buttons ersetzt werden.
Also erstmal dieses Design erstellt (Format: 1280x1024)
http://s2b.directupload.net/images/090505/vv69ltv8.jpg (enterpage.jpg)
Die beiden Bildchen sollten die Buttons darstellen.
Um das ganze in Sachen Design zu vervollständigen hatte ich mir überlegt die Buttons bei Mouseover zu verändern. Hier als "Leuchteffekt" in ausgeschnittener Form um diese dann über das Hintergrundbild zu legen.
Links: (links.png)
http://s2b.directupload.net/images/090505/2d5bixuj.png
Rechts: (rechts.png)
http://s7b.directupload.net/images/090505/ti8dd6ft.png
Bei beiden Files ist der hier weiße Bereich (oben) eigendlich durchsichtig.

Die Umsetzung des passenden Code´s gestaltete sich dann (für mich) aber doch schwierig.
Nach einem ganzen Abend und der halben Nach gegoogle, rumkopiererei und try and error hatte ich eine funktionierende Lösung für meine Auflösung/Browser/etc., leider nur für meinen und auch nur durch ewiges ausprobieren "hingefummelt".
Hier mal mein Ergebnis mit einer versuchten Erklärung was ich mir da so dabei gedacht habe:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Obsidian - Blackhand - Horde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="DrBanana" />
<meta name="description" content="Obsidian - Blackhand - Horde" />
<meta name="keywords" content="Lilaloot, obsidian, blackhand, wow, gilde, horde" />
<link rel="Stylesheet" type="text/css" href="../css/wslayout/standard.css" media="screen" />
<link rel="Stylesheet" type="text/css" href="../css/wslayout/print.css" media="print" />

<!--[if IE]>
<link rel="Stylesheet" href="../css/wslayout/ie.css" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
 body
 {
  background-image:url(enterpage.jpg);
  background-repeat:no-repeat;
  background-position:bottom 100%;
 }
    div#buttons{
        height:237px;
        margin:31.1% 12.7%;
        padding:0%;
        overflow:hidden;
    }
    div#buttons ul,div#buttons li{
        margin:0% 0%;
        padding:0% 0%;
        list-style:none;
        display:inline;
    }
    div#buttons a{
        margin-top:0;
    }
    div#buttons a,div#buttons a:hover{
        height:474px;
        overflow:hidden;
        display:block;
        text-decoration:none;
        float:right
    }
    div#buttons a:hover{
        margin-top:-237px;
    }
    img{
        border:none;
}
 -->
</style>

</head>
<body>
    <div id="buttons">
        <ul>
            <li><a href="/eqdkp/index.php" id="dkp"><img src="rechts.png" alt="" width="435" height="474" /></a></li>
            <li><a href="/forum/index.php" id="forum"><img src="links.png" alt="" width="435" height="474" /></a></li>
        </ul>
    </div>
</body>
</html>
Erstmal "enterpage.jpg" als Hintergrundbild.
Dann einen CSS Container (ist doch einer oder?!) erstellt und alles so rein (aus einem Beispiel abgeschaut) das bei Mouseover mit diesem :hover der untere Teil der kleinen Bilder (der mit Bild eben) und ohne Mouseover der obere Teil (der durchsichtige) angezeigt wird. Das ganze dann mit float: nebeneinander, da die beiden kleinen Bilder genau aneinander passen.
Als das funktionierte hab ich mir diesen Container mir Margin: so "hingefummelt" das er genau an der richtigen stelle über dem Hintergrundbild liegt. Gut, es war spät Nachts und ich hab nicht daran gedacht das dies natürlich dann nur für mein System passt.
Nun wäre die Frage wie ich das ganze so anpasse, das das Ergebnis auf allen Systemen passt und immer genau richtig übereinander liegt.
Ein anderes Problem was ich noch sehe sind Widescreens. Da der Bildschirm in der Auflösung ja breiter ist als mein Hintergrundbild müsste dieses dann in der Mitte liegen, rechts und links der Platz mit einer Farbe gefüllt werden und am besten noch rechts und links ein Rahmen.

Würde mich freuen wenn mir hier jemand weiterhelfen könnte! :smile:


Grüße,
banana
 
Zuletzt bearbeitet:
DrBanana schrieb:
Dadurch kam ich mit Quelltext nur sehr wenig in Berührung und wenn dann konnte mir mein guter alter Freund google.de immer weiterhelfen.
Diesmal aber nicht. :|
Zum Vergrößern anklicken....
Das ist der Anfang vom Ende :-)
Du solltest Dich daran gewöhnen, dass Du langsam die Materie lernen solltest.

Um das ganze in Sachen Design zu vervollständigen hatte ich mir überlegt die Buttons bei Mouseover zu verändern. Hier als "Leuchteffekt" in ausgeschnittener Form um diese dann über das Hintergrundbild zu legen.
Zum Vergrößern anklicken....
Als erstes würde ich nicht mouseover (JavaScript-EventHandler onMouseOver) nehmen, sondern hover (CSS). Dann würde ich den Button als Hintergrundbild einfügen und dann mit Hilfe der Pseudoklasse ":hover" einfach ein anderes Hintergrundbild angeben.

Bei beiden Files ist der hier weiße Bereich (oben) eigendlich durchsichtig.
Zum Vergrößern anklicken....
Warum machst Du die überhaupt so groß?

Dann einen CSS Container (ist doch einer oder?!)
Zum Vergrößern anklicken....
CSS kennt eigentlich keine Container. Diese "Container" sind Teil von HTML. CSS dient ja nur dazu, die mit HTML erzeugten Elemente zu formatieren.

das bei Mouseover mit diesem :hover der untere Teil der kleinen Bilder (der mit Bild eben) und ohne Mouseover der obere Teil (der durchsichtige) angezeigt wird.
Zum Vergrößern anklicken....
Ach so, jetzt verstehe ich, woher Du das hast. Der Witz an der Methode ist, dass beide Zustände (also normal und hover) in einem Bild vorhanden sind, das bereits beim Aufruf der Seite geladen wird, so dass beim Hover nicht kurz das Hintergrundbild verschwindet. Aber prinzipiell müsste das auch mit einem transparenten Teil gehen.

Nun wäre die Frage wie ich das ganze so anpasse, das das Ergebnis auf allen Systemen passt und immer genau richtig übereinander liegt.
Zum Vergrößern anklicken....
Probleme kriegst Du, wenn die Button-Grafiken mit Teil des Hintergrundbildes sind. Du solltest ein davon unabhängiges Hintergrundbild haben, wo es nichts ausmacht, wenn ein Button mal ein paar Pixel höher/tiefer oder weiter rechts/links liegt. Wenn die Grafiken der Buttons dann für das Element als Hintergrundbild eingebunden werden, kann da nichts passieren, selbst wenn der Viewport mal so klein wird, dass die beiden Button untereinander angeordnet werden müssen.

Ein anderes Problem was ich noch sehe sind Widescreens. Da der Bildschirm in der Auflösung ja breiter ist als mein Hintergrundbild müsste dieses dann in der Mitte liegen, rechts und links der Platz mit einer Farbe gefüllt werden und am besten noch rechts und links ein Rahmen.
Zum Vergrößern anklicken....
Weder Widescreens, noch Flatscreens, LCD-Bildschirme oder Röhrenmonitore und auch nicht die Auflösung sind bei Webseiten irgendwie relevant. Das einzige, was zählt, ist die Größe des Viewports. Selbst mit einem Monitor, der größer ist als Deiner, könnte der Viewport (also der Platz, der für die Website zur Verfügung steht) genausogut deutlich kleiner sein, als Dein Viewport. Und auch mit einem 16:9-Monitor kann ich nen Viewport in 4:3 haben und umgekehrt. Genauso kann mein Viewport 772x981px groß sein oder auch nur 200x320px. Alles ist möglich. Die Größe des Bildschirms bzw. der Bildschirmauflösung begrenzt die Größe des Viewports nach oben, aber mehr nicht. In der Regel ist der Viewport auch immer kleiner als das, was die Auflösung hergibt, weil so ein Fenster ja noch Rahmen hat und Toolbars, Sidebars und was noch alles. Und außerdem muss man sein Fenster ja nicht maximieren.
 
Schonmal danke, da wird bereits einiges klarer :)

Die hover Methode mit den zwei-in-eins Bildern klappt sehr gut, auch mit dem durchsichtigen Teil.
Das ganze grafisch so zu ändern das ich die Buttons sozusagen vollständig vom Hintergrun löse und hell + dunkel in die "hover Bildchen" packe wäre kein Problem. Klingt für mich auch sinnvoller, eben weil minimale Verschiebungen egal wären.

Somit bleiben noch drei Punkte zu lösen:

1. Die ordendliche Ausrichtung des Hintergrundbildes

2. Ein Rahmen + Farbe links und rechts, für denn Fall das jemand einen größeren Viewport hat

3. Die dazu passende Ausrichtung meiner beiden Buttons. Wobei die Bildchen im momentanen Code immer genau aneinander kleben.
Wenn ich dann nur noch die Button´s, also ohne wie im Moment noch jeweils die Hälfte des Bereiches dazwischen, habe dürfen sie ja genau dies nicht mehr. Müssten also einzeln ausgerichtet werden.. oder so :)
 
DrBanana schrieb:
1. Die ordendliche Ausrichtung des Hintergrundbildes
Zum Vergrößern anklicken....
background:url(foobar.jpg) black center center

2. Ein Rahmen + Farbe links und rechts, für denn Fall das jemand einen größeren Viewport hat
Zum Vergrößern anklicken....
Und wenn jemand einen kleineren hat? Das schönste ist, den Hintergrund in eine Farbe verlaufen zu lassen. Dann wird das Hintergrundbild bei kleinerem Viewport einfach abgeschnitten, bei größerem steht es (s.o.) zentriert und verläuft in eine Farbe (wie oben: black).

3. Die dazu passende Ausrichtung meiner beiden Buttons. Wobei die Bildchen im momentanen Code immer genau aneinander kleben.
Zum Vergrößern anklicken....
Dann gibst Du ihnen einen margin.
 
Das mit dem Hintergrund sieht schonmal super aus, nur das positionieren bereitet mir noch Kopfschmerzen.
Hier mal der überarbeitete Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Obsidian - Blackhand - Horde</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="DrBanana" />
<meta name="description" content="Obsidian - Blackhand - Horde" />
<meta name="keywords" content="Lilaloot, obsidian, blackhand, wow, gilde, horde" />
<link rel="Stylesheet" type="text/css" href="../css/wslayout/standard.css" media="screen" />
<link rel="Stylesheet" type="text/css" href="../css/wslayout/print.css" media="print" />

<!--[if IE]>
<link rel="Stylesheet" href="../css/wslayout/ie.css" type="text/css" />
<![endif]-->
<style type="text/css">
<!--
 body
 {
 background:url(enterpage.jpg) black center center
 }
    div#buttons{
        height:237px;
        margin:21% 21.99%;
        padding:0%;
        overflow:hidden;
    }
    div#buttons ul,div#buttons li{
        margin:0% 0%;
        padding:0% 0%;
        list-style:none;
        display:inline;
    }
    div#buttons a{
        margin-top:0;
    }
    div#buttons a,div#buttons a:hover{
        height:474px;
        overflow:hidden;
        display:block;
        text-decoration:none;
        float:right
    }
    div#buttons a:hover{
        margin-top:-237px;
    }
    img{
        border:none;
}
 -->
</style>

</head>
<body>
    <div id="buttons">
        <ul>
            <li><a href="/eqdkp/index.php" id="dkp"><img src="rechts.png" alt="" width="435" height="474" /></a></li>
            <li><a href="/forum/index.php" id="forum"><img src="links.png" alt="" width="435" height="474" /></a></li>
        </ul>
    </div>
</body>
</html>

Das verschieben mit margin verhält sich irgendwie seltsam..
"margin:21% 21.99%;"
Wenn ich den ersten Wert ändere verschiebt sich irgendwie die position des Hintergrundbildes nach oben, bzw. nach unten.
Beim ändern des zweiten Wertes verschieben sich meine beiden Buttons anch, bzw. nach links.
Da stimmt doch was gewaltig nicht :D

Wäre vielleicht jemand so nett und könnte mir den Code so umschreiben das ich für jeden der zwei Buttons und Hintergrund ein eigenes div habe das sich per margin positionieren lässt?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben