CSS in Javasript einbinden
0 0 0 0 0 0 
Felix Riesterer
0 0 
JürgenB
3 
Gunnar Bittersmann
CSS in Javasript einbinden
Der Martinhallo erstmal,
ich habe ein kleines problem mir Javascript/CSS:
ich habe eine(ziemlich große) CSS-Datei mit der ich eine (dynmische) Navigationsleiste erstellt habe.
nun möchte ich einfach nur den "alert"-befehl von Javascript dazugben,
wenn ich aber mit javascript arbeite, wird das CSS ausgeschaltet und die (dynamische) Navigationsleiste wieder zu einer einfachen Liste mit Links
was kann ich da tun?
danke im vorraus,
ceder
-
Grüße,
was kann ich da tun?
dich doch noch mit grundlagen von CSS/JS befassen. deine fehlerbeschreibung liest sich wie "der fersneher ist aber gurken wenn donnerstag nicht von toshiba"
MFG
bleicher-
»» dich doch noch mit grundlagen von CSS/JS befassen. deine fehlerbeschreibung liest sich wie "der fersneher ist aber gurken wenn donnerstag nicht von toshiba"
danke für das anregende Statement ;-)
ich denke, dass ich dazusagen sollte, dass ich ein ziemlicher Anfänger bin...
und man sich hier auf selfhtml.org ziemlich verlaufen kann, weil es z.B. keine Suchfunktion gibt, deshalb hatte ich einfach mal die Idee einfach zu fragen (kost ja nix)ich haue den Quellcode einfach rein, ok? (nicht wundern, wenn euch was komisch vorkommt, es geht nicht um den Inhalt, sondern um das Design-eshat mit der Schule zu tun ;-))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>Dresden in den USA</title> <link rel="stylesheet" type="text/css" href="Style-Dateien/style.css"> </style> </head> <body> <div id="Tmenu"> <ul id="Navigation"> <li><a href="Index.html" id="Index">Startseite</a></li> <li><a href="DDKansas.html" id="Kansas">Dresden Kansas</a></li> <li><a href="DDOhio.html" id="Ohio">Dresden Ohio</a></li> <li><a href="DDTennessee.html" id="Tennessee">Dresden Tennessee</a></li> <li><a href="Quellen.html" id="Quellen">Quellen</a></li> </ul> </div>so und dazu das CSS:
~~~css div#Tmenu {
font-size: 100%;
width: 99%;
padding: 0px;
border-left: 20px solid #00FFFF;
border-right: auto solid #00FFFF;
border-top: 2px solid #00FFFF;
border-bottom: 2px solid #00FFFF;
background-color: #00FFFF
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
}
ul#Navigation li {
list-style: none;
float: left;
margin: 0px;
}
ul#Navigation a {
display:block; width:240px; height:1.3em; padding:3px;
text-align:center; font-weight:bold; text-decoration:none;
color:#002299; background-color:#00BBBB;
border-left:2px solid #00DDDD; border-top:2px solid #00DDDD;
border-right:2px solid #00AAAA; border-bottom:2px solid #00AAAA;}
}a#Index {
display:block; width:240px; height:1.3em; padding:3px;
text-align:center; font-weight:bold; text-decoration:none;
color:#002299; background-color:#00BBBB;
border-left:2px solid #00DDDD; border-top:2px solid #00DDDD;
border-right:2px solid #00AAAA; border-bottom:2px solid #00AAAA;}
a#Index:link {
display:block; width:240px; height:1.3em; padding:3px;
text-align:center; font-weight:bold; text-decoration:none;
color:#005599; background-color:#00CCCC;
border-left:2px solid #00FFFF; border-top:2px solid #00FFFF;
border-right:2px solid #009999; border-bottom:2px solid #009999;}
a#Index:hover {
display:block; width:240px; height:1.3em; padding:3px;
text-align:center; font-weight:bold; text-decoration:none;
color:#003377; background-color:#00AAAA;
border-left:2px solid #009999; border-top:2px solid #009999;
border-right:2px solid #00FFFF; border-bottom:2px solid #00FFFF;}
a#Index:active {
display:block; width:240px; height:1.3em; padding:3px;
text-align:center; font-weight:bold; text-decoration:none;
color:#004488; background-color:#00BBBB;
border-left:2px solid #00FFFF; border-top:2px solid #00FFFF;
border-right:2px solid #00FFFF; border-bottom:2px solid #00FFFF;}a#(usw.)
es kann sein, dass der Code für die Pros hier sehr blöd is, ich habe ihn mal aus einer Seite kopiert, und das weggeschnippelt, was ich nich brauche(nach der Versuch-Irrtum-Methode!) sry hoffe es bringt mehr klarheit in die unklarheit ;-)-
PS: und jetzt würde ich halt gern einfach nur den "alert"-Befehl aus JS
mit einbringen (viel mehr befehle kenn ich nämlich nicht *schäm* )-
PS: und jetzt würde ich halt gern einfach nur den "alert"-Befehl aus JS
mit einbringen - das ist der befehl, der ein "popup" erscheinen lässt
das div#Tmenu stammt noch aus der zeit, wo ich den ganzen Quelltext aus einer Seite kopiert habe auf der noch Unterkategorien der einzelnen Menüpunkte beim Mouseover eingeblendet wurden... und weil ich mir nicht sicher war wollte ich es nicht unbedingt wegmachen, versteht ihr?
also mach ich es erstmal weg, oder?
@felix: wieso nochmal soll ich ein <h2> mit einfügen ??
es geht ja nur um Links und nicht um Überschriften...-
@ der Martin:
sorry, ich habe das Feld übersehen(passt sich farblich gut an^^)-ich habe es eher rechts erwartet... :D
-
@@ceder:
nuqneH
@ der Martin:
Plaziere deine Antworten bitte zu dem Posting, auf das du antwortest, sonst sieht niemand mehr durch, worauf du dich beziehst.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
Hallo,
dich doch noch mit grundlagen von CSS/JS befassen. deine fehlerbeschreibung liest sich wie "der fersneher ist aber gurken wenn donnerstag nicht von toshiba"
danke für das anregende Statement ;-)ja, das klingt hart, aber es trifft die Sache dennoch ganz gut.
ich denke, dass ich dazusagen sollte, dass ich ein ziemlicher Anfänger bin...
Oh, hätte ich nicht gedacht. ;-)
und man sich hier auf selfhtml.org ziemlich verlaufen kann, weil es z.B. keine Suchfunktion gibt
Ach? Was hat das Eingabefeld auf http://de.selfhtml.org/ ganz links unterhalb von "Suche nach:" wohl für einen Zweck?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Dresden in den USA</title>
<link rel="stylesheet" type="text/css" href="Style-Dateien/style.css">
</style>
</head>
<body><div id="Tmenu">
<ul id="Navigation">
<li><a href="Index.html" id="Index">Startseite</a></li>
<li><a href="DDKansas.html" id="Kansas">Dresden Kansas</a></li>
<li><a href="DDOhio.html" id="Ohio">Dresden Ohio</a></li>
<li><a href="DDTennessee.html" id="Tennessee">Dresden Tennessee</a></li>
<li><a href="Quellen.html" id="Quellen">Quellen</a></li>
</ul>
</div>Das div#Tmenu ist hier definitiv überflüssig. Es hat nur ein einziges Kindelement, gruppiert also nichts - und die Formatierungen kannst du ebensogut auf das ul-Element anwenden. > hoffe es bringt mehr klarheit in die unklarheit ;-) Nein. Vor allem das hier ... > PS: und jetzt würde ich halt gern einfach nur den "alert"-Befehl aus JS mit einbringen ... ergibt nach wie vor keinen Sinn, es ist sozusagen Polnisch-Platt mit Zungenschlag. Ich habe keinen blassen Schimmer, was du dir darunter wirklich vorstellst. So long, Martin -- TEAM: Toll, Ein Anderer Macht's. Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Lieber Martin,
Das div#Tmenu ist hier definitiv überflüssig. Es hat nur ein einziges Kindelement, gruppiert also nichts - und die Formatierungen kannst du ebensogut auf das ul-Element anwenden.
da stimme ich Dir unter Vorbehalt zu. Ja, das <div>-Element gruppiert hier nix. Man könnte auf die ID "Tmenu" komplett verzichten und die CSS-Regeln alleine von dem <ul>-Element mit der ID "Navigation" aus aufbauen. ABER: Es ist meiner Meinung nach sinnvoller, dem <div>-Element noch ein <h2>-Element hinzuzufügen. Das macht das Gesamte von der Semantik her sinnhaftiger:
<div id="Tmenu"> <h2>Menü</h2> <ul>...</ul> </div>In meinem Beispiel ist die ID "Navigation" hinfällig geworden, da man das <ul>-Element problemlos über
#Tmenu ul {...}
ansprechen kann.@ceder:
<li><a href="Index.html" id="Index">Startseite</a></li>
<li><a href="DDKansas.html" id="Kansas">Dresden Kansas</a></li>
<li><a href="DDOhio.html" id="Ohio">Dresden Ohio</a></li>
<li><a href="DDTennessee.html" id="Tennessee">Dresden Tennessee</a></li>
<li><a href="Quellen.html" id="Quellen">Quellen</a></li>> > [...] hoffe es bringt mehr klarheit in die unklarheit ;-) Nein. Deine Dateinamen solltest Du ausschließlich und immer ohne Ausnahme jedesmal (also nie anders!) in Kleinbuchstaben notieren. Verwende dazu ausschließlich Kleinbuchstaben des Englischen, sonst schießt Du Dir unter schlechten Umständen selbst ins Knie. Das Minuszeichen und der Unterstrich sind neben dem Punkt und den Ziffern natürlich auch erlaubt - aber sonst nichts! Die IDs bei jedem Link kannst Du Dir ebenso sparen. Das braucht es nicht. Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
Das div#Tmenu ist hier definitiv überflüssig. Es hat nur ein einziges Kindelement, gruppiert also nichts - und die Formatierungen kannst du ebensogut auf das ul-Element anwenden.
da stimme ich Dir unter Vorbehalt zu. Ja, das <div>-Element gruppiert hier nix. Man könnte auf die ID "Tmenu" komplett verzichten und die CSS-Regeln alleine von dem <ul>-Element mit der ID "Navigation" aus aufbauen. ABER: Es ist meiner Meinung nach sinnvoller, dem <div>-Element noch ein <h2>-Element hinzuzufügen.das ist ein sehr guter Einwand - und *dann* würde das div-Element auch wieder Sinn ergeben.
sinnhaftiger
Wieviel?? ;-)
@ceder:
Nein. Deine Dateinamen solltest Du ausschließlich und immer ohne Ausnahme jedesmal (also nie anders!) in Kleinbuchstaben notieren.Nein! So pauschal würde ich das nicht unterstützen. Der Gebrauch von Großbuchstaben in Datei- oder Ressourcennamen ist eher unüblich, und wenn man gemischte Schreibweise nutzt, sollte man bitte sehr genau darauf achten, dass man immer konsequent dieselbe Schreibweise verwendet, weil Unix-basierte Systeme die verschiedenen Schreibweisen streng unterscheiden (im Gegensatz zu Windows).
Wenn Datei- oder Ressourcennamen aber Begriffe oder Namen aus der Wirklichkeit abbilden sollen, halte ich den bewussten Einsatz von Großbuchstaben durchaus für vernünftig - speziell dann, wenn Akronyme im Namen enthalten sind oder man die Großschreibung von Eigennamen erhalten möchte.
Das Minuszeichen und der Unterstrich sind neben dem Punkt und den Ziffern natürlich auch erlaubt - aber sonst nichts!
Das ist so auch nicht richtig; Ziffern sind ebenso ohne Einschränkung zu gebrauchen. Und wenn man weiß, in welchem Kontext man sich bewegt, sind eine Menge weiterer Zeichen gefahrlos zu nutzen.
Die IDs bei jedem Link kannst Du Dir ebenso sparen. Das braucht es nicht.
Vielleicht möchte er jeden Link individuell stylen, dann wäre eine ID pro Link (besser: für das umschließende li-Element) durchaus sinnvoll.
So long,
Martin--
Wer es in einem Unternehmen zu etwas bringen will, muss so tun, als hätte er es schon zu etwas gebracht.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
Hallo!
was kann ich da tun?
Das Übliche:
- Den relevanten Quellcode hier posten (ich vermute, es ist ein HTML-Problem),
- oder besser noch ein Beispiel online stellen, welches das Problem demonstriert, und hier verlinken.
Dann kann dir wahrscheinlich schnell geholfen werden.
Mathias
-
Hi,
ich habe eine(ziemlich große) CSS-Datei mit der ich eine (dynmische) Navigationsleiste erstellt habe.
nun möchte ich einfach nur den "alert"-befehl von Javascript dazugben,
wenn ich aber mit javascript arbeite, wird das CSS ausgeschaltet und die (dynamische) Navigationsleiste wieder zu einer einfachen Liste mit Linkswas kann ich da tun?
Es einfach richtig machen - und nicht CSS und JavaScript vermischen.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Was meine Vorredner sagen wollen
Deine Sätzenun möchte ich einfach nur den "alert"-befehl von Javascript dazugben
und
wenn ich aber mit javascript arbeite, wird das CSS ausgeschaltet
sind Krampf. Was solls denn tun und wie wolltest du das erreichen?
Wie kommst du drauf dass Javascript und CSS was miteinander zu tun haben, so dass man das eine zum anderen "dazugeben" kann? -
Hallo, ceder!
Stil-Manipulationen per CSS/JS bewerkstelligt man sinnvollerweise, indem man per JS zusätzliche Klassennamen über die className-Eigenschaft eines Nodes setzt.
Unter Umständen kann es jedoch erforderlich werden, CSS-Stilangaben per JS zu setzen. Dies geht über die style-Eigenschaft.
Nur in sehr, sehr seltenen Fällen wird es notwendig, zusätzliches CSS per JS in eine Seite zu schreiben. In diesem Fall bekommt man das Problem, dass der IE in seinen älteren Inkarnationen style-Node-Inhalte nur dann definiert, wenn vorher ein block-Node mit beliebigem Inhalt stand. Man kann also folgende Funktion browserübergreifend verwenden:
function insertCss(css) { var d=document.createElement('div'); d.innerHTML='<div>IE...</div><style type="text/css">'+css+'</style>'; document.getElementsByTagName('head')[0].appendChild(d.getElementsByTagName('style')[0]); }Wie aber bereits gesagt, sollte man so etwas wirklich nur dann machen, wenn man die anderen Möglichkeiten nicht nutzen kann.
Gruß, LX
--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...)-
Lieber LX,
warum willst Du im IE folgende Struktur erzwingen?
<head> ... <div> <div>IE...</div><style type="text/css">{CSS-Code}</style> </div> </head>Mir ist nicht klar warum Du <div>-Elemente in den <head> packen willst. Wozu braucht es die? Nach meiner Erfahrung kannst Du sehr wohl ein <style>-Element dynamisch erzeugen und direkt als Kindelement in <head> einhängen.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Mache ich doch gar nicht. Ich baue nur die Struktur als anonyme DOM-Nodes, in den Head binde ich aber nur das style-Tag ein.
Das mache ich wie gesagt, damit der IE letzteres auch interpretiert, andernfalls macht er es nämlich nicht.
Gruß, LX
--
RFC 1925, Satz 3: Mit ausreichendem Schub fliegen Schweine ganz wunderbar. (...) -
Hallo Felix,
function insertCss(css) { var d=document.createElement('div'); // ein Div ... d.innerHTML='<div>IE...</div><style type="text/css">'+css+'</style>'; // .. gefüllt mit einem Div und einem Style, ... document.getElementsByTagName('head')[0].appendChild(d.getElementsByTagName('style')[0]); // ... und aus diesem Div wird das Style herausgenommen und in den Head kopiert. }Gruß, Jürgen
-
-
@@LX:
nuqneH
Nur in sehr, sehr seltenen Fällen wird es notwendig, zusätzliches CSS per JS in eine Seite zu schreiben.
Ja. (@Cybaer: JA!! ;-))
d.innerHTML='<div>IE...</div><style type="text/css">'+css+'</style>';
Warum sollte man so etwas tun wollen??
Es gibt
insertRule()(für ältere IEsaddRule()). [http://www.quirksmode.org/dom/w3c_css.html]Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
