Bereiche
News
Rewind
Tipps & Berichte
Forum
Galerie
Journals
Events
Umfragen
Themenwoche
Kleinanzeigen
Interaktiv
Anmelden
Registrierung
Zu allen empfangenen Nachrichten
Suche...
Zur erweiterten Suche
Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum
>
Software
>
blauer Rand um Rollover-Links in Firefox
blauer Rand um Rollover-Links in Firefox
@lex
27.03.09
06:00
Hey,
Bin dabei mit Dreamweaver eine Website zu erstellen und bei der Vorschau in Safari läuft alles ganz normal nur in Firefox wird um die Rollovertexte in der Navigation, die aus Rolloverimages besteht ein violetter Rand angezeigt. Ist das in der Vorschau von Dreamweaver in Firefox normal oder bleiben diese Ränder auch nach dem hochladen bestehen? Wenn ja wie bekommen ich sie weg?
P.S. Egal ob Firefox oder Safari, wenn ich ein Rolloverbild anklicke, zu einer andere Seite komme, dann aber über den Zurück-Button im Browser zurück geh, wird immer noch das Rolloverbild angezeigt und nicht das Originalbild bis ich wieder rüberfahre. Woran liegt das?
Viele Grüße und Danke
@lex
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
Kommentare
pb_user
27.03.09
06:11
man muss im CSS festlegen, dass alle anderen link-auszeichnungen ('verlinkt', 'besucht' und 'aktiv') sich von 'drüberrollen' unterscheiden. im nachfolgenden beispiel ist es die textfarbe, die sich beim 'drüberrollen' ändert ('besucht' und 'aktiv' werden darüberhinaus hier auch nicht hervorgehoben):
.textlink {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
text-decoration : none;
color : rgb(50, 50, 50);
background-color : rgb(240, 240, 240);
}
.textlink a:link {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
text-decoration : none;
color : rgb(50, 50, 50);
background-color : rgb(240, 240, 240);
}
.textlink a:visited {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
text-decoration : none;
color : rgb(50, 50, 50);
background-color : rgb(240, 240, 240);
}
.textlink a:active {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
text-decoration : none;
color : rgb(50, 50, 50);
background-color : rgb(240, 240, 240);
}
.textlink a:hover {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
text-decoration : none;
color : rgb(250, 250, 250);
background-color : rgb(240, 240, 240);
}
Hilfreich?
0
@lex
27.03.09
06:34
Danke aber es steht doch überall "none" da, brauch ich dann die restlichen 4 Zeilen überhaupt?
Und verlinke ich diese classes dann in jedem Link?
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
pb_user
27.03.09
06:48
welche restlichen zeilen meinst du? die anderen außer 'drüberrollen' oder generell die anderen zeilen innerhalb der anweisungen?
die classes verlinkst du, in dem du im head der jeweiligen seite auf das CSS verweist [<link href="xyz.css" rel="stylesheet" type="text/css">] und an der entsprechenden stelle im html die entsprechende class bezeichnest [<div class="textlink">] - das gegebene beispiel bezieht sich auf textauszeichnung.
Hilfreich?
0
sierkb
27.03.09
08:03
Dein Problem mit dem violetten Rand um die Bilder hat damit zu tun, dass Deine Bilder innerhalb eines Links sind bzw. ein Link jeweils um die Bilder umschließt. Und um dieses Bild als "Bild mit Link" kenntlich zu machen, fügt dein Browser dem Bild einen Rand hinzu, der die in Deinen Browser-Einstellungen vorgesehenen Linkfarben hat, und das ist standardmäßig und für alle Browser geltend die Farbe blau für unbesuchte Links und die Farbe violett für bereits besuchte Links.
Wenn Du das unterdrücken oder beeinflussen willst, dann solltest Du dem Browser sagen: "Bitte keinen Rand zeichnen für Bilder innerhalb von Links".
Und das hieße in CSS ausgedrückt z.B. so:
a img {border: none}
Desweiteren würde ich mal Dein CSS ein wenig zusammenfassen, da gibt es viel überflüssige Redundanz:
.textlink,
.textlink a:link,
.textlink a:visited,
.textlink a:active,
.textlink a:hover {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
text-decoration : none;
color : rgb(50, 50, 50);
background-color : rgb(240, 240, 240);
}
.textlink a:hover {
color : rgb(250, 250, 250);
}
Ich würde mir da mal ein wenig die Vererbungs-Fähigkeiten von CSS zunutze machen, um Redundanzen zu vermeiden (spart Code, was wiederum schnellere Seiten bedeutet und erhöht die Übersichtlichkeit). Mein Beispiel könnte man unter diesem Gesichtspunkt sogar noch mehr zusammenfassen, wenn man übergeordnete Elemente und die Vererbungslehre von CSS noch mehr einbezöge.
Desweiteren würde ich dazu übergehen, Schriftgrößen weniger in festen Pixeln (px) anzugeben und mehr in variablen Größen (em, ex, Prozent). Das gibt ihnen nämlich die Fähigkeit zu skalieren und nagelt sie nicht auf eine einzige Auflösung fest. Letztere kann ja bekanntlich von Bildschirm/Endgerät zu Bildschirm/Endgerät variieren und mal größer sein und mal kleiner. Auch hier gilt es, sich die Vererbungsfähigkeiten von CSS zunutze zu machen: relative Größen beziehen sich immer auf eine vorher festgelegte Basisgröße (wenn keine angegeben, dann bezieht sich der Browser beim Rendern auf die in dem Browser voreingestellte Größe) bzw. werden weitervererbt von den übergeordneten Elementen im DOM.
Vorteil relativer Schriftgrößen: sie sind skalierbar (z.B. auch mittels der Zoom- bzw. Schriftvergrößerungs-Funktion eines jeden Browsers), und man hat weniger Schreibarbeit. Es gibt nur relativ wenige Anwendungszenarien, wo skalierbare Schriften eher weniger Sinn haben und fest eingestellte Schriftgrößen bevorzugt werden sollten.
Hilfreich?
0
@lex
27.03.09
08:32
Danke für die verständliche Schreibweise!
Hat sehr geholfen, ich bin zuversichtlich, dass ich das Problem damit lösen kann.
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
@lex
27.03.09
08:38
Wo füge ich denn das css ein und wie? Zum beispiel hier:
<a href="home.html"><img src="bild.jpg" alt="bild"/></a>
wird daraus dann:
<a img {border: none} href="home.html"><img src="bild.jpg" alt="bild"/></a>
...funktioniert nämlich nicht so ganz...
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
sierkb
27.03.09
08:56
@lex:
Wo füge ich denn das css ein und wie?
Ich habe bis eben vorausgesetzt, dass Du das dazu nötige Basiswissen hast (irgendwie ist ja dein bisheriges CSS auch eingebunden worden).
Hilfreich?
0
@lex
27.03.09
09:18
Ja das hab ich ja schonmal vor ner Zeit alles durchgelesen ... man vergisst schnell
Hab das Zeug bisher immer nur extern hinzugefügt, aber danke es läuft jetzt!
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
@lex
01.04.09
06:39
Hab jetzt doch ein Problem:
Ich benutze ja in dieser Menüleiste Rolloverimages, also will ich a:l ink,visited, hover, active komplett deaktivieren, damit nur die Rollover angezeigt werden. Wie mach ich das? Überall " :none" eingeben?
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
@lex
06.04.09
00:15
Hat keiner eine Lösung?
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
sierkb
06.04.09
00:29
@alex:
Was ist Ausgangslage, und genau möchtest Du erreichen? Deine Frage vom 01.04. ist zumindest für mich unverständlich formuliert, ich kann mit ihr nix anfangen.
Hilfreich?
0
@lex
06.04.09
10:21
Es bezog sich auf die Ausgangsfrage:
Egal ob Firefox oder Safari, wenn ich ein Rolloverbild anklicke, zu einer andere Seite komme, dann aber über den Zurück-Button im Browser zurück geh, wird immer noch das Rolloverbild angezeigt und nicht das Originalbild bis ich wieder rüberfahre. Woran liegt das?
Das Problem besteht immer noch und wird durch das .textlink - css, das du geschrieben hast, nicht geändert, deswegen meine Frage wie man v.a. das "a:visited" deaktiviert, wobei ich nicht sicher bin ob es daran liegt?
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
uplift
06.04.09
10:41
Bezüglich der Ränder versuch mal folgendes für die Links in das CSS zu integrieren:
a:active, a:focus, a:visited {outline: none;}
„Computer erleichtern uns ungemein die Arbeit an Problemen, die wir ohne sie nicht hätten. Ich habe keine Lösung, aber ich bewundere das Problem.“
Hilfreich?
0
sierkb
06.04.09
11:28
@lex:
Bitte um konkreten URL oder/und Code, bei dem man selber nachschauen kann, was Du meinst. Ansonsten ist Hilfe wohl schlecht.
Hilfreich?
0
sierkb
06.04.09
11:47
uplift
Bezüglich der Ränder versuch mal folgendes für die Links in das CSS zu integrieren:
a:active, a:focus, a:visited {outline: none;}
Wenn man's nicht selber absichtlich gesetzt hat: wo wird denn outline im Default-Stylesheet des Browsers verwendet (außer evtl. für seine eigenen Belange zum Rendern der Browseroberfläche)?
Hilfreich?
0
@lex
07.04.09
00:27
Nein also die Ränder sind durch das: a img {border: none} verschwunden.
Es besteht wie gesagt nur noch das Problem mit den Rollover-buttons.
Am Code sollte es nicht liegen, weil ich die rollover einfach mit dreamweaver eingefügt hab.
Könnte es am cache liegen?
Zu dem was ich deaktiveren wollte: Wenn ich einen normalen Text verlinke erscheint der ja normalerweise in einer bestimmten Farbe damit man erkennt, dass es sich um einen Link handelt, und wenn ich diese Seite dann schon einmal anklickte ändert dieser Text seine Farbe, deswegen dachte ich, dass es daran liegen könnte...
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
sierkb
07.04.09
00:39
@alex:
Bitte stelle entweder einen URL zur Verfügung oder den betreffenden HTML- und CSS-Code, damit man konkret am Objekt das Problem sehen kann. Es ist ansonsten schwer, Dir bei der Problemlösung zu helfen.
Wenn ich einen normalen Text verlinke erscheint der ja normalerweise in einer bestimmten Farbe damit man erkennt, dass es sich um einen Link handelt, und wenn ich diese Seite dann schon einmal anklickte ändert dieser Text seine Farbe, deswegen dachte ich, dass es daran liegen könnte...
Jeder Web-Browser hat diesbzgl. eine standardmäßige Voreinstellung bzgl. der verwendeten Linkfarben. Und hier sprechen ausnahmsweise alle Browser-Hersteller aus historischen und auch Gründen der Sinnhaftigkeit mal eine gemeinsame Sprache: die verwendeten Linkfarben inkl. Unterstreichung sind bei allen gleich. Blau für unbesuchte Links, lila für bereits besuchte Links, ggf. rot für aktivierte (gerade geklickte Links). So voreingestellt in jedem Browser. Und abänderbar in den Browser-Einstellungen. Und abänderbar auf der betreffenden Webseite über die Pseudo-Klassen :link, :visited, :active. Hinzu käme dann noch :hover für Links oder HTML-Elemente, die gerade mit der Maus überfahren werden. Dabei gibt es eine Reihenfolge, die man unbedingt einhalten sollte, weil sonst die eine CSS-Anweisung die andere überschreibt. Das ist aber auch alles bei SelfHTML und derlei Info-Seiten umfänglich erklärt und mit Beispielen hinterlegt.
Hilfreich?
0
@lex
07.04.09
03:34
Jeder Web-Browser hat diesbzgl. eine standardmäßige Voreinstellung bzgl. der verwendeten Linkfarben. Und hier sprechen ausnahmsweise alle Browser-Hersteller aus historischen und auch Gründen der Sinnhaftigkeit mal eine gemeinsame Sprache: die verwendeten Linkfarben inkl. Unterstreichung sind bei allen gleich. Blau für unbesuchte Links, lila für bereits besuchte Links, ggf. rot für aktivierte (gerade geklickte Links). So voreingestellt in jedem Browser. Und abänderbar in den Browser-Einstellungen. Und abänderbar auf der betreffenden Webseite über die Pseudo-Klassen :link, :visited, :active. Hinzu käme dann noch :hover für Links oder HTML-Elemente, die gerade mit der Maus überfahren werden. Dabei gibt es eine Reihenfolge, die man unbedingt einhalten sollte, weil sonst die eine CSS-Anweisung die andere überschreibt. Das ist aber auch alles bei SelfHTML und derlei Info-Seiten umfänglich erklärt und mit Beispielen hinterlegt.
Das weiß ich ja, mir geht es ausschließlich um das Problem, dass beim Anklicken eines Links das mit rollover effekt arbeitet, beim zurückgehen das Rollover bild angezeigt wird und nicht das Originalbild.
Url kann ich nicht geben, weil die Seite noch offline ist aber hier mal der wichtige Teil vom Code, mit dem du vll was anfangen kannst:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">a img {border: none}</style>
</head>
<body onload="MM_preloadImages('assetsde/buttons/Unternehmen down.png','assetsde/buttons/Karriere down.png','assetsde/buttons/Produkte down.png','assetsde/buttons/Interner Bereich down.png')">
<div id="rahmen" style="margin: auto;">
<div id="main">
<div id="level1"><a href="unternehmen/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Unternehmen','','assetsde/buttons/Unternehmen down.png',1)"><img src="assetsde/buttons/Unternehmen up.png" alt="Unternehmen" name="Unternehmen" width="125" height="15" border="0" id="Unternehmen" /></a><a href="karriere/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Karriere','','assetsde/buttons/Karriere down.png',1)"><img src="assetsde/buttons/Karriere up.png" alt="Karriere" name="Karriere" width="80" height="15" border="0" id="Karriere" /></a><a href="produkte/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Produkte','','assetsde/buttons/Produkte down.png',1)"><img src="assetsde/buttons/Produkte up.png" alt="Produkte" name="Produkte" width="88" height="15" border="0" id="Produkte" /></a><a href="interner-bereich/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Interner Bereich','','assetsde/buttons/Interner Bereich down.png',1)"><img src="assetsde/buttons/Interner Bereich up.png" alt="Interner Bereich" name="Interner Bereich" width="157" height="15" border="0" id="Interner Bereich" /></a></div>
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
uplift
07.04.09
07:34
Oh je, Dreamweaver löst das ja super mit JavaScript.
Mach das Rollovergedöns lieber per CSS (siehe hier
) und verlagere Dein CSS mal in eine extra Datei, damit es übersichtlicher wird. Außerdem sollten Deine Dateinamen keine Leerzeichen enthalten und auch nicht zu lang sein. Z.B.: assetsde/buttons/Interner Bereich down.png Mach daraus lieber internberdown.png. Interessiert ja keinen wie das Bild heißt. Hauptsache es ist verknüpft!
„Computer erleichtern uns ungemein die Arbeit an Problemen, die wir ohne sie nicht hätten. Ich habe keine Lösung, aber ich bewundere das Problem.“
Hilfreich?
0
borisbojic
07.04.09
07:41
Selbst gute WYSIWYG Editoren wie DW könnnen nur unterstützend helfen und gute Seiten erstellen, wenn man eine Ahnung von der Materie hat. Die hast du offensichtlich noch nicht, daher:
http://www.ltfb.de/
Hilfreich?
0
@lex
07.04.09
09:29
Das mit css funktioniert schon, aber erstens ist es schwer in Photoshop die zwei Texte in deren jeweiligen Hälfte "gleich" auszurichten und zweitens: Muss ich dieses css dann für jedes einzelne Rollover bild erstellen? Denn es ist ja in jedem die jeweilige Bildatei enthalten. Wenn ja das kann ich doch bei mind. 150 rolloverlinks gar nicht machen...
Es sieht jetzt so aus:
<html>
<head>
<style type="text/css">
body {background: white;}
#rollovermenu a {
height: 15px;
width: 88px;
display: table-cell;
background: url("Products.png") 0px 0px no-repeat;
}
#rollovermenu a:hover {
background-position: 0px -15px;
}
#rollovermenu a:active {
background-position: 0px -15px;
}
</style>
</head>
<body>
<div id="rollovermenu">
<a href="Untitled-1.html"></a>
</div>
</body>
</html>
Aber trotzdem bleibt noch die Frage warum ich beim Button "Zurück" im Browser immer das Rolloverbild hatte bzw habe und nicht das Originale.
Bei diesem CSS ist das übrigens auch so nur etwas anders: Wenn ich es anklicke und wieder zurück gehe, wird in Safari und Opera (diesmal Firefox ausgenommen) immer noch das Rolloverbild angezeigt bis ich meine Maus im Browserfenster bewege (note: Mit der Javascript lösung musste ich über den jeweiligen zuvor angeklickten Link fahren, damit Originalbild anstatt des Rollovers angezeigt wird)
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
uplift
07.04.09
09:48
Ich denke mal, dass es irgendwas mit dem JavaScript zu tun hat. Beim Zurück Button des Browsers, wird sie ja nicht neu geladen sondern kommt aus dem Cache, oder
„Computer erleichtern uns ungemein die Arbeit an Problemen, die wir ohne sie nicht hätten. Ich habe keine Lösung, aber ich bewundere das Problem.“
Hilfreich?
0
@lex
07.04.09
10:00
Ja dass das was mit dem Cache zu tun haben könnte, glaub ich auch...
Aber die Frage zu dem CSS:
Muss ich dieses css dann für jedes einzelne Rolloverlink erstellen?
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
uplift
07.04.09
10:22
Nur das Bild mit den verschiedenen Zuständen. Das CSS ist dann auf alles anwendbar, das die Klasse erhält. Mach aus #rollovermenu ein .rollovermenu.
Dann machst Du aus der ID eine Klasse. Dann gibst Du jedem Menüpunkt die Klasse. Sei es als <div> oder als <li>.
„Computer erleichtern uns ungemein die Arbeit an Problemen, die wir ohne sie nicht hätten. Ich habe keine Lösung, aber ich bewundere das Problem.“
Hilfreich?
0
sierkb
07.04.09
11:19
Rollover in CSS-Sprache ist die sog. Pseudo-KLasse :hover.
:hover ist wie die anderen Pseudo-Klassen auch, anwendbar nicht nur auf Links (also das Anker-Element a), sondern auf jegliches Element im DOM-Baum. Nur der IE6 (evtl. IE7) mag's nur in Kombination mit dem a-Element.
Und mit :hover kann man auch nicht nur Farben ändern bzw. bestimmen, ob's unterstrichen sein soll oder nicht, sondern mittels :hover kann man z.B. auch Menüs und Untermenüs ein- und ausblenden, div-Container ein- und ausblenden, Bilder ein- und ausblenden, etc.
CSS ist da sehr sehr vielfältig und mächtig. Man _kann_ verschiedene Dinge auch mit JavaScript lösen, man muss aber nicht. Vieles geht auch kürzer, komfortabler (und sinnhafter) direkt mit CSS. Man muss nur wissen, wie. Und dazu gibt's im Netz genug Anlaufstellen, da mal die eine oder andere Erleuchtung zu bekommen.
Und bzgl. Dreamweaver: solche Programme, die für sich in Anspruch nehmen, die eierlegende Wollmilchsau sein zu wollen, würde ich zugunsten sauberer Lösungen irgendwann anfangen zu meiden. Die Lösungen, die da nämlich aus bestimmten vorgegebenen Baukasten-Elementen vorgegeben und zusammengeschustert werden, sind aus technischer Sicht manchmal unnötig kompliziert, aufgebläht und auch an dem vorbei, was HTML und CSS von Haus aus bereitstellen.
Deshalb geht's im Grunde nicht ohne ein gewisses Verständnis und ein gewisses Basiswissen von HTML, CSS, DOM etc. Um dann nämlich mit seinem Hirn, Wissen und gesundem Menschenverstand besser zu sein als die Maschine.
Viele bzw. die meisten Profis coden deshalb nämlich von Hand und verlassen sich nicht auf das, was ihnen Dreamweaver und Co. da zusammenbasteln. Beim Korrigieren und Optimieren dauert's dann nämlich meistens länger, als wenn man gleich alles von Hand selber geschrieben hätte.
Hilfreich?
0
sierkb
07.04.09
11:51
uplift
Mach aus #rollovermenu ein .rollovermenu.
Dann machst Du aus der ID eine Klasse. Dann gibst Du jedem Menüpunkt die Klasse. Sei es als <div> oder als <li>.
IDs können nur ein einziges Mal pro Dokument vergeben werden, Klassen dagegen mehrfach. Man sollte sich also schon aussuchen, welchem Element man eine ID zuteilt und welchen Elementen eine Klasse. Im Falle eines Menüs oder Hauptmenüs wäre eine ID also durchaus legitim, da dieses Hauptmenü in der Regel nur ein einziges Mal pro Dokument existiert und eine diesbzgl. ID also eineindeutig zugeordnet werden kann.
Oder die "Unordered list", also <ul>, bekommt diese ID oder Klasse mit auf den Weg. Am besten mit einem sinnhaften Namen für diese Liste, z.B. "mainmenu".
Also z.B. <ul id="mainmenu">.
Zudem: Pro Element können sowohl IDs als auch Klassen gleichzeitig vergeben werden, Klassen sogar mehrfach (getrennt voneinander durch Leerzeichen).
Also kann es zum Beispiel auch ein <ul id="mainmenu" class="besonders"> geben oder ein <ul id="mainmenu" class="besonders1 besonders2 besonders3 besonders4">.
Man könnte z.B. schreiben: ul#mainmenu li a:hover {color: #c0c0c0; background-color: #0f0f0f}
Oder z.B.
ul#mainmenu li:hover ul {
color: #000000;
background-color: #ffffff;
opacity: 0.93;
border: 1px outset #afafaf;
display: block;
visibility: visible;
overflow: visible;
position: absolute;
z-index: 50;
}
um ein Submenu (eine <ul>) innerhalb des Menus (<ul>) -- also zwei in sich geschachtelte <ul>-Listen (denn nix anderes sind Menüs aus semantischer Sicht, nämlich Listen) beim Darüberfahren einzublenden.
Nur mal so als Beispiel, was alles geht und was alles prima via CSS und ohne JavaScript und ohne groß Gedöns kurz und bündig und präzise machbar ist bzw. aus zwei unscheinbaren, in sich geschachtelten <ul>-Listen alles rauszuholen ist.
Hilfreich?
0
@lex
07.04.09
12:30
Aber es steht doch im css folgendes: background: url("Products.png") 0px 0px no-repeat;
Wenn ich jetzt ein anderes Bild will muss ich doch das CSS verändern, denn wenn ich diesen Code rausnehmen, ist ja kein Bild mehr da.
... so kompliziert alles wegen eines simplen Rolloverlinks. Ich geb mir gleich die Kugel
„Alles, was wir sind, ist das Ergebnis dessen, was wir dachten.“
Hilfreich?
0
sierkb
07.04.09
13:31
@lex
Aber es steht doch im css folgendes: background: url("Products.png") 0px 0px no-repeat;
Wenn ich jetzt ein anderes Bild will muss ich doch das CSS verändern, denn wenn ich diesen Code rausnehmen, ist ja kein Bild mehr da.
... so kompliziert alles wegen eines simplen Rolloverlinks. Ich geb mir gleich die Kugel
Da ist eigentlich gar nix kompliziert. Wie wär's, wenn Du zwei Regeln aufstellst und dort jeweils ein anderes Hintergrundbild definierst: eine Regel für den Normalfall (also wenn die Maus nicht über den Link fährt) und eine Regel für :hover (also wenn die Maus über den Link fährt). Und je nachdem, welcher Fall eben eintritt bzw. gerade gegeben ist, da greift dann eben die betreffende und von Dir vorherbestimmte CSS-Regel. Und wenn diese regel eben vorsieht, in dem und dem Fall und in der und der Konstellation (und nur dann!) soll ein anderer Hintergrund für das betreffende Element angezeigt werden, dann wird das dann auch genauso ausgeführt.
Da ist und wäre in dieser Hinsicht sooo viel machbar, und eigentlich ist das Ganze ziemlich simpel...
Gutgemeinter Tipp: Du solltest Dich mal am besten etwas eingehender mit den Grundlagen und den Möglichkeiten von HTML und CSS auseinandersetzen, dann fällt Dir sowas in Zukunft auch deutlich leichter und geht Dir leichtgängiger von der Hand.
Schau Dir bspw. mal näher
an und studiere, wie man das dort macht. Ähnliche und evtl. bessere Seiten gibt es zuhauf im Netz. Einfach mal googeln.
Ebenso ein Tipp: die Seiten der CSS-Koriphäe Eric Meyer:
. Meyer ist übrigens auch verantwortlich dafür, dass Dreamweaver heutzutage einen besseren CSS-Support bzw. eine bessere CSS-Umsetzung hat als zuvor. Macromedia hatte ihn mal angeheuert, um das alles gegenüber dem Vorzustand deutlich zu verbessern.
Hilfreich?
0
Kommentieren
Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.
Steve Jobs: Stanford-Rede
FaceTime in iOS 26: Entkleidet sich der Nutzer,...
Starlink-Angebot von Elon Musk: Mobiles Satelli...
Scheitert die Siri-Entwicklung?
Kuriose vergessene Apple-Produkte
Rückmeldungen zu iOS 18.5, macOS 15.5 und Co. –...
Bericht: Apples Display für das faltbare iPhone...
MTN-App: Version 2 ist da