Div Container Scrollbalken Hover Effekt im Wasserbetten Shop

Wie immer der Hinweis, dass die Beispiele alle per externe CSS Datei erstellt werden.

<link href=”css/ style.css” rel=”stylesheet” type=”text/css”>

Erstellung von DIV Containern mit abgerundeten Ecken in einem Wasserbetten Shop. Wie bekannt ist, arbeiten nicht alle Internet Browser nach der W3C Empfehlung. So ist dieses Beispiel nur für den Mozilla Firefox und den Wasserbetten Shop gedacht.
Im Internet Explorer wird der DIV Container zwar auch angezeigt, jedoch ohne runde Ecken.

CSS Definition:

div
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:200px;
background-color:#efefef;
}
.div1
{
border:3px solid #ff0000;
left:10px;top:50px;
-moz-border-radius:30px;
-khtml-border-radius:30px;
}
.div2
{
border:1px solid #aaaaaa;
left:200px;top:50px;
-moz-border-radius:10px;
-khtml-border-radius:30px;
}
Erklärung:

In der “div” Definierung wird nur ein normaler Container bestimmt, also die Breiten/Höhen Werte, so wie der Farbwert.
In der “div1? und “div2? Definierung werden die abgerundeten Ecken, so wie auch die Rahmenstärke definiert.

HTML Erklärung:

<div class=”div1?>Beispiel  mit rotem dicken Rahmen</div>
<div class=”div2?>Beispiel  mit normalen Rahmen</div>

Scrollbalken farblich an den Hintergrund anpassen:
Dies funktioniert nur mit dem Internet Explorer. Scrollbalken sind kein Standard vom W3C Consortium
Es gab zwar schon einiger Versuche, die Scroll-Balken farblich im Firefox zu ändern, diese sind aber alle fehlgeschlagen.
Die Werte für die Farben werden am besten einfach in die schon vorhandene Body Definition mit eingetragen

CSS Definition:

body
{
scrollbar-3dlight-color:#7A8295; = Farbe seitlich liegender Elemente.
scrollbar-arrow-color:#c31b00; = Farbe der Pfeile in den Kopfstücken.
scrollbar-face-color:#7A8295; = Farbe des eigentlichen Scrollbalkens.
scrollbar-track-color:#b0b5c0;   = Farbe der Scrollbalken-”Schiene”.
scrollbar-darkshadow-color:#b0b5c0; =  Farbe bestimmter seitlich liegender Elemente.
scrollbar-highlight-color:#b0b5c0; = Farbe der höher gelegenen Elemente.
scrollbar-shadow-color:#7A8295; = Farbe der tiefer gelegenen Elemente.
}

Hover Effekt:

Der Hover Effekt ist auch eine wunderschöne Angelegenheit, wenn ein bisschen Spielerei mit dem optischen Aussehen verbunden wird. So bekommen zum Beispiel Links beim überfahren mit der Maus eine andere Farbe. Klickt man auf den Link, wird wieder eine andere Farbe erkennbar. Die Zeiten, dass ein Link unterstrichen wird (Standard), sind eh überholt, und veraltet. Links werden heutzutage meist sehr gerne farblich hervorgehoben. Es sollte jedoch darauf geachtet werden, dass sie nicht unangenehm auffallen. Es gibt schließlich genug angenehme Farben.

CSS Definition:

a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:none; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:none; }

h1:focus { background-color:red; }
h1:hover { background-color:silver; }
h1:active { background-color:green; }

Erklärung:

Möchte man dennoch haben, das die Links unterstrichen angezeigt werden, sobald mit der Maus darüber gefahren wird, braucht nur noch an den entsprechenden Stellen hinten bei “text-decoration” aus “none” das Wort “underline” zu erstellen.

Html Definition:

<a href=http://de.yahoo.com/ target=”_blank”>Yahoo! (Verzeichnis)</a><br>
<a href=”http://www.google.de/”>Google (Suchmaschine)</a><br>
<a href=”http://web.de/”>Web.de (Verzeichnis)</a><br>
<a href=”http://www.multimeta.de/”>Multimeta (Meta-Suchmaschine)</a>

Erklärung:

Links werden standardmäßig immer im gleichen Fenster geöffnet. Dies hat aber nicht immer einen Sinn. Deshalb hier in unserem Beispiel, der erste Link (Yahoo) mit dem Befehl “target=”_blank”.
Das heißt, egal welcher Internetbrowser verwendet wird, und welche Standardeinstellungen in dessen Optionen eingestellt sind, dass sich der Link in diesem Fall, in einem neuen Fenster öffnet.

Comments are closed.