css und javascript
levin
- javascript
im Code gibt es dieses css-Element
<style type="text/css">
.clTopMenu {position:absolute; width:101px; height:150px; clip:rect(0px 101px 14px 0px); layer-background-color:#eeeeee; background-color:#eeeeee; z-index:31; visibility:hidden;}
.clTopMenuBottom {position:absolute; width:101px; height:3px; clip:rect(0px 101px 3px 0px); top:11; layer-background-color:#cecfce; background-color:#cecfce; z-index:2;}
.clTopMenuText {position:absolute; width:91px; left:5px; top:15px; font-family:arial,helvetica,sans-serif; font-size:11px; background-color:#eeeeee; z-index:1;}
</style>
nun will ich aber das auf diese htmlseite zusätzlich eine externe cssDatei angewendet wird. Üblicherweise mache ich das dann so
<html>
<head>
<title> bla bla </title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script language="JavaScript">
</script>
</head>
<body>
</body>
</html>
sobald ich aber link rel einsetze funktioniert das pulldown menu nicht mehr
auch das einkopieren der classes in die externe css hat nichts gebracht,
wie könnte ich das sonst lösen ?
Tach,
Du kannst das eigentlich lösen wie immer. Allerdings mußt Du Dir die externe Datei nochmal genauer ansehen. Es scheint, als würdest Du die Klassen der HTML-Seite damit überschreiben. Wahrscheinlich werden die Klassennamen bereits verwendet, bzw. die Klasse wird anders definiert...
Poste doch mal das externe CSS.
Gruß,
Danny
Tach,
Du kannst das eigentlich lösen wie immer. Allerdings mußt Du Dir die externe Datei nochmal genauer ansehen. Es scheint, als würdest Du die Klassen der HTML-Seite damit überschreiben. Wahrscheinlich werden die Klassennamen bereits verwendet, bzw. die Klasse wird anders definiert...
Poste doch mal das externe CSS.
Gruß,
Danny
Hi Danny,
danke für dein Interesse.
hier meine externe css.
BODY {
font-family: Arial;
font-size: 32pt;
color: #14469B;
background-color: #FF7E28;
/* in der vorigen Zeile ist die Hintergrundfarbe definiert...
alte Farbnummer war :#FDA867,die folgende war:ff9933 */
margin: 0px;
}
/*
P {
padding-bottom: 0px;
font-family: Arial;
font-size: 10px;
color: #14469B;
}
*/
a.navlink
{
font-weight: bold;
text-decoration: none;
font-family: Arial;
font-size: 12px;
color: #1A0000;
}
a.textlink
{
font-family: Arial;
font-size: 13px;
}
.titel {
font-family: Arial;
font-size: 20px;
padding-bottom: 26px;
padding-top: 5px;
color: #14469B;
}
.fliesstext {
font-family: Arial;
font-size: 13px;
color: #14469B;
}
Das externe CSS ist okay, es überschreibt die Menü-Styles nicht. Bist Du Dir sicher, daß Deine Angaben in der HTML-Datei korrekt sind?
Du kannst ohne Probleme CSS-Angaben vermischen, deshalb ja auch die Bezeichnung "Cascading...". Ich meine externe Angaben, die auf alle Seiten angewandt werden und individuelle Formate, so wie z.B. ein besonderes Menü, das nur in einer Datei steht. Also versuche es doch mal so:
<html>
<head>
<title> bla bla </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.clTopMenu {position:absolute; width:101px; height:150px; clip:rect(0px 101px 14px 0px); layer-background-color:#eeeeee; background-color:#eeeeee; z-index:31; visibility:hidden;}
.clTopMenuBottom {position:absolute; width:101px; height:3px; clip:rect(0px 101px 3px 0px); top:11; layer-background-color:#cecfce; background-color:#cecfce; z-index:2;}
.clTopMenuText {position:absolute; width:91px; left:5px; top:15px; font-family:arial,helvetica,sans-serif; font-size:11px; background-color:#eeeeee; z-index:1;}
</style>
<script language="JavaScript">
</script>
</head>
<body>
</body>
</html>
Das externe CSS ist okay, es überschreibt die Menü-Styles nicht. Bist Du Dir sicher, daß Deine Angaben in der HTML-Datei korrekt sind?
Du kannst ohne Probleme CSS-Angaben vermischen, deshalb ja auch die Bezeichnung "Cascading...". Ich meine externe Angaben, die auf alle Seiten angewandt werden und individuelle Formate, so wie z.B. ein besonderes Menü, das nur in einer Datei steht. Also versuche es doch mal so:
<html>
<head>
<title> bla bla </title>
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
.clTopMenu {position:absolute; width:101px; height:150px; clip:rect(0px 101px 14px 0px); layer-background-color:#eeeeee; background-color:#eeeeee; z-index:31; visibility:hidden;}
.clTopMenuBottom {position:absolute; width:101px; height:3px; clip:rect(0px 101px 3px 0px); top:11; layer-background-color:#cecfce; background-color:#cecfce; z-index:2;}
.clTopMenuText {position:absolute; width:91px; left:5px; top:15px; font-family:arial,helvetica,sans-serif; font-size:11px; background-color:#eeeeee; z-index:1;}
</style>
<script language="JavaScript">
</script>
</head>
<body>
</body>
</html>
Hi,Danny
Du setzt die style Angaben jetzt in den head, könnte das der Grund sein, das hatte ich glaube ich auch ausprobiert....
alles funktionierte wunderbar, bis ich
<link rel="stylesheet" href="style.css" type="text/css">
in die htmldatei einkopiere.
könnte es auch an type= text/css liegen, gibt es noch andere types, die sich vielleicht auch auf mein internes javascript beziehen können, sollten, müssten ?
Leider kann ich jetzt nichts ausprobieren, erst heute abend wieder.
Danke nochmals für dein Interesse.
Nö, der Link ist schon in Ordnung. Und die Styles mache ich immer in den Head. Wenn das Javascript umfangreich ist, solltest Du es ebenfalls auslagern. Wenn die Funktionen direkt nach dem Laden der Seite starten, mußt Du die Funktion per onload initialisieren, da es sonst zu Problemen kommen kann, wegen Ladezeit-Verzögerung. Vielleicht ist das auch die Ursache des Problems, weil durch das externe CSS die Seite jetzt länger zum laden braucht und das Javascript bereits startet, bevor fertig geladen wurde... ???
meinst du die Funktion, also das javascript muss vor der css geladen sein ?
ich baue eine Navigationsleiste mit etwas komplexeren Pulldown über zwei Frames,
die Funktion startet bei mouseover, wenn ich den link auf die externe
css lege, gibt es keine Mousezeigeränderung mehr, also scheinbar kein Erkennen von mouseover.
die Funktion Vielleicht ist das auch die Ursache des Problems, weil durch das externe CSS die Seite jetzt länger zum laden braucht und das Javascript bereits startet, bevor fertig geladen wurde... ???
Wenn die Funktionen direkt nach dem Laden der Seite starten, mußt Du die Funktion per onload initialisieren, da es sonst zu Problemen kommen kann, wegen Ladezeit-Verzögerung.
wo muss ich das tun ?
Oh je, so viele Fragen... ;-)
Am Besten Du gibst mir mal die URL oder schickst den ganzen Kram per Mail, sonst kann ich Dir wohl nicht wirklich weiterhelfen.
Gruß
Danny