div-Tags auslagern

A

AllesMeins

Guest
Moin, kennt sich hier irgendwer mit CSS (ist das überhaupt css :)) aus? ich habe folgendes Problem, ich habe es zwar geschafft wa szu basteln, das auch funzt, aber wie kann ich das in eine externe Datei auslagern, damit ich es nicht für jeden Menupunkt, neu schreiben muss und so die Seite unnötig vergrössere. Hier mein Werk, das ich gerne auslagern würde:

<div style="border: 1px solid #CFD4C8; width: 128px; background: #CFD4C8; margin-left: 12px;" onmouseove.r="this.style.border='1px solid #000000'; this.style.background='#6B7954';"
onmouseou.t="this.style.border='1px solid #CFD4C8'; this.style.background='#CFD4C8';">

Der Punkt in mouseover bzw. mouseout ist nur da, da das Forenscript mir sonst das posten verweigert...
Kann mir irgendwer helfen?
 
Ja, das ist CSS, aber auch Javascript.
Du musst eine Datei mit der Endung css und eine Datei mit der Endung js anlegen. Z.B. format.css und script.js

Es gibt dann zwei Möglichkeiten. Entweder du willst, dass diese Formatierung für alle div-Tags gilt oder nur für welche mit entsrechender ID.

Datei format.css:
div
{
border:1px solid #CFD4C8;
width: 128px;
background:#CFD4C8;
margin-left: 12px
}

Soll es für eine bestimmte ID sein, musst du nur anstelle des div ein # gefolgt von irgendeinem Namen, der die ID sein soll schreiben. Z.B. #Menu. Dies gilt allerdings nur für div-Tags. Für andere Tags muss man das Tag davorschreiben. Z.B. p#Menu.

Datei script.js:
function over()
{
this.style.border="1px solid #000000";
this.style.background="#6B7954";
}
function out()
{
this.style.border="1px solid #CFD4C8";
this.style.background="#CFD4C8";
}

Dann dürfen natürlich nicht die Einträge in der HTML-Datei fehlen. Diese drei sollten in den Head:
<link rel="stylesheet" type="text/css" href="format.css">
<script src="script.js" type="text/javascript">
</script>

Der entsprechende div-Tag:
<div onmouseove.r="over()" onmouseou.t="out()">

Wenn du die ID benutzt, solltest du noch id="Menu" einfügen.
 
danke, teilweise klappt es schon... Sehr gut (und wunderbar verständlich erklärt :) )Danke...
Der CSS Teil funzt schonmal, nur der JS-Teil will noch net. Der IE spuckt mir ein wunderbares: "this.style ist kein Objekt" aus. Und da ich in Sachen JS ne absolute Niete bin muss ich hier nochmal um Hilfe bitten. hat noch jemand für dieses Problem ne Lösung?
 
Ich nochmals.
Versuch mal this durch...

Ohne ID:
...document.getElementsByTagName("div")...

Mit ID:
...document.getElementsById("Menu")...

...zu ersetzen.
 
Nur this ersetzten?
Dann bekommen ich document.getElementsByTagName("div").style ist kein Element

this.style ersetzen:
Kein fehler, keine Änderung

Oder wie genau soll das in der Datei aussehen?
 
Hmm...
Mir fällt gerade ein, dass das ja nur Menüpunkte betreffen soll. Wenn das Verweise sind, dann gibt es noch eine andere Möglichkeit. Diese betrifft aber nur die Formatierung der Verweise selbst. Zur Sicherheit schreibe ich beide auf:

1. (Javascript) Möglichkeit:
Datei script.js:
function over(i)
{
document.getElementsByTagName("div").style.border="1px solid #000000";
document.getElementsByTagName("div").style.background="#6B7954";
}
function out(i)
{
document.getElementsByTagName("div").style.border="1px solid #CFD4C8";
document.getElementsByTagName("div").style.background="#CFD4C8";
}

Der (erste) div-Tag muss dann so aussehen:
<div onmouseove.r="over(0)" onmouseou.t="out(0)">
Jetzt muss du nur noch bei jedem div-Tag bei der Zahl eintragen, der wievielte div-Tag es in der Seite es ist -1. Z.B. ...over(4)...out(4)... (Das wäre der fünfte div-Tag in der HTML-Datei)

2. (CSS) Möglichkeit:
a:active(gerade angeklickter Verweis)
a:focus(ausgewählter Verweis)
a:hover(mit der Maus über dem Verweis)
a:link(normaler Verweis)
a:visited(besuchter Verweis)

Dies sind die sogenannten Pseudoformate eines Verweises. Hierfür brauchst du kein Javascript mehr, da sie in der CSS-Datei formatiert werden.

Für den Fall das irgendetwas von dem nicht funzt oder du weitere Fragen zur HTML-Programmierung hast:
Online-Tutorial zu HTML-Programmierung: http://selfhtml.teamone.de
Da habe ich das programmieren von HTML-Seiten gelernt. Man kann es sich auch herunterladen um es offline lesen zu können.
 
Danke, du bist ab jetzt mein Held! :)
Es funzt... Selfhtml kenne ich (natürlich) aber leider ist das für micht nicht das richtige um eine Script-Sprache zu lernen. Ich nutze es um befehle nachzuschlagen, aber wie man ein spezielles Problem am besten löst kann man da halt nicht lernen (Wenn es sich dabei, wie hier noch um eine Mischung aus JS und CSS handelt ist es um so schwerer). Naja, nochmals danke, werde mich bei gelegenheit revangieren...
 
Ach ja, noch was neues. Kann ich irgendwie die Linkeigenschaften (underline, farbe) die im menu geltemn sollen abändern. So das alle div Tags mit der id 'menu' eine andere Linkfarbe haben? Geht doch sicher, oder? Wie ist da die genaue Syntax? Und wo muss das hin? Zwischen die geschweiften klammern von #menu?
 
CSS-Lösung:
Das geht mit Klassen. Ob es auch mit IDs geht weiss ich nicht. Musst du mal ausprobieren.
Ausserdem müssen hierfür die entsprechenden Verweise selbst formatiert werden und nicht die div-Tags.
Definierung einer Klasse:
Tag gefolgt von Punkt und Klasse. Z.B. p.menu. Wenn der Tag weggelassen oder durch ein * ersetzt wird kann man die Klasse auf alle Tags anwenden.

Beispiel für dein Problem:
a.menu:hover
{
...(Formatierung)...
}

Dies musst du für jedes Pseudoformat eines Verweises schreiben.
Dann kannst du mit
<a class="menu" href="...">
die Formatierung für die Klasse "menu" des Verweises aufrufen.

Du kannst aber auch die Klasse weglassen. Dann gilt die Formatierung für alle Verweise in der HTML-Datei.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben