 CSS läßt sich nicht in Editor einbinden, Sehe den Wald vor lauter Baumen nicht |
|
Willkommen, Gast ( Anmelden | Registrierung )
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML  |
 14.03.2005 - 0:29
Beitrag
#1
|
|
|
Rookie Gruppe: User Beiträge: 4 Mitglied seit: 13.03.2005 Wohnort: Porta Westfalica Mitglieds-Nr.: 4.859  |
Halllo Zusammen,
ich habe phase 5 schon seit einigen Jahren und gebrauche ihn in erster Linie zum Erstellen von Auktionen.  Haabe also schon einige Erfahrung und gedacht, dass das ausreichen würde mal eine eigene Homepage in Angriff zu nehmen. Dabei habe ich allerdings festgestellt, dass ich wohl doch eher zu den wirklich blutigen Anfängern gehören muss. Ich wurschtel jetzt schon seit einigen Abenden daran rum über eine ausgelagerte CSS-Datei meinen Seiten ein einheitliches Layout der Menueleite zu geben. Leider ohne Erfolg. Ich muß irgendetwas falsch machen und dass, obwohl ich SelfHTML und diverse andere Hilfeseiten studiert habe. Aber irgendwie habe ich ein Brett vor dem Kopf!  Je mehr ich lese, desto weniger verstehe ich, warum es nicht klappt. Im Editor finde ich immer nur ein weißes Blatt vor (keinerlei Fehlermeldungen) oder aber er öffnet mir ein separates Fenster mit der CSS-datei.Hier einmal meine Test-Versionen: Zuerst die eigendlich mal entstehende Homepage: <html> <head> <title></title> <meta name="author" content="ANMADEWE"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <link rel="stylesheet" href="menuetest.css"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> dann die CSS-datei, die dazugehören soll: body { #menu{ width:200px; color:black; background:#b8ab8f; padding:10px; border-top:1px solid #837C6B; border-right:1px solid #E4D9C0; border-bottom:1px solid #E4D9C0; border-left:1px solid #837C6B;} <div id="menu"> <ul class="liste"> <li> <a href="#"><span class="dot">• </span>Test-Button 1</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 2</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 3</a> </li> </ul> </div> #menu a{ color:maroon; font:bold 13px verdana, sans-serif; margin:5px 0 5px 0; padding:1px 3px 1px 4px; text-decoration:none; background:transparent; display:block; border-top:1px solid #99917d; border-right:1px solid #e4d9c0; border-bottom:1px solid #e4d9c0; border-left:1px solid #99917d; width:155px;} #menu a:hover{ color:#f6e4c1; background:transparent; border-top:1px solid #e4d9c0; border-right:1px solid #837c6b; border-bottom:1px solid #837c6b; border-left:1px solid #e4d9c0;} #menu a .dot{ color:#a59a81; background:transparent; font-weight:bold; font-size:14px;} #menu a:hover .dot{ color:#c8ba9b; background:transparent; font-weight:bold; font-size:14px;} </body> </html> Abgespeichert hat der Editor die CSS-Datei als CSS, level 2 (ich hatte CSS, level 1 angeklickt). Woran zum Henker liegt es bl0ß, dass ich das nicht eingebunden bekomme???? Bis jetzt habe ich gute Erfahrungen mit Phase 5 gemacht, aber langsam verzweifle ich wirklich!  Ich bin für jede Hilfe dankbar, aber BITTE schickt mir keine Links auf Hilfe-Seiten, davon habe ich jede Menge. Ich habe nur das Gefühl, dass dort leider nicht alles genau genug für Anfänger beschrieben wird. Das fängt schon damit an, dass man die Reihenfolge der CSS-Befehle nicht angegeben hat. Und ich weiß auch nicht, ob der CSS-link richtig positioniert ist (vor dem </head>-Befehl oder besser schon vor den META-Tags eingebunden werden sollte. Tja, ich denke man sieht, dass ich mir da schon so meine Gedanken mache. Aber im Endeffekt hapert es am Verständnis und der Erfahrung der Profis.... Irgendwie doch Brett vor´m Kopf.... Ich gehe zwar jetzt meinen rauchenden Kopf ins Bett tragen, aber ich danke im voraus für jede Hilfe, die Ihr mir zu Teil werden lasst. CU, Anja |
 |
 
|
|
14.03.2005 - 1:12
Beitrag
#2
|
|
|
is getting harder Gruppe: User Beiträge: 28 Mitglied seit: 14.06.2003 Mitglieds-Nr.: 769 |
Hallo, ich bin nicht ganz sicher, ob sich deine beiden Dateien erst beim Posten vermengt haben.
Auf die Schnelle auseinandergepfriemelt sehe ich zumindest etwas einigermaßen Sinnvolles. QUELLTEXT <html> <head> <title></title> <meta name="author" content="ANMADEWE"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <link rel="stylesheet" href="menuetest.css"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> <div id="menu"> <ul class="liste"> <li> <a href="#"><span class="dot">• </span>Test-Button 1</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 2</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 3</a> </li> </ul> </div> </body> </html> QUELLTEXT #menu{ width:200px; color:black; background:#b8ab8f; padding:10px; border-top:1px solid #837C6B; border-right:1px solid #E4D9C0; border-bottom:1px solid #E4D9C0; border-left:1px solid #837C6B;} #menu a{ color:maroon; font:bold 13px verdana, sans-serif; margin:5px 0 5px 0; padding:1px 3px 1px 4px; text-decoration:none; background:transparent; display:block; border-top:1px solid #99917d; border-right:1px solid #e4d9c0; border-bottom:1px solid #e4d9c0; border-left:1px solid #99917d; width:155px;} #menu a:hover{ color:#f6e4c1; background:transparent; border-top:1px solid #e4d9c0; border-right:1px solid #837c6b; border-bottom:1px solid #837c6b; border-left:1px solid #e4d9c0;} #menu a .dot{ color:#a59a81; background:transparent; font-weight:bold; font-size:14px;} #menu a:hover .dot{ color:#c8ba9b; background:transparent; font-weight:bold; font-size:14px;} Komisch übrigens: Weiße Blätter finde ICH eigentlich immer nur im Drucker, vornehmlich nach einem Papierstau 
|
|
|
|
|
14.03.2005 - 7:45
Beitrag
#3
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad!  Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hi,
zu Nosferatu seine Ausführung noch folgende Ergänzung: Wenn Du die CSS in der HTML-Seite einbinden willst, machst Du das im Head-Bereich. Etwas so: HTML <HEAD> <STYLE TYPE="text/css"> <!-- #menu{ width:200px; color:black; UND DER REST } --> </STYLE> </HEAD> Die CSS hat dann nur für diese Seite Gültigkeit! Soll die CSS extern abgelegt werden und für alle Seiten Gültigkeit haben, muss man sie entsprechend verlinken. Etwa so: (Im HEAD-Bereich) <LINK REL="stylesheet" HREF="menuetest.css" TYPE="text/css"> Jede neu erstellte HTML-Seite sollte diesen Link dann natürlich auch haben! cu Conny |
|
|
|
|
14.03.2005 - 20:13
Beitrag
#4
|
|
|
Rookie Gruppe: User Beiträge: 4 Mitglied seit: 13.03.2005 Wohnort: Porta Westfalica Mitglieds-Nr.: 4.859 |
ZITAT Soll die CSS extern abgelegt werden und für alle Seiten Gültigkeit haben, muss man sie entsprechend verlinken. Etwa so: (Im HEAD-Bereich) <LINK REL="stylesheet" HREF="menuetest.css" TYPE="text/css"> Jede neu erstellte HTML-Seite sollte diesen Link dann natürlich auch haben! Das ist ja genau das, was ich machen möchte! Ich habe auch verstanden, dass ich jede Seite gleich verlinken muß. Das Problem ist einfach, dass auf der Test.html die Internet-Vorschau nur ein weißes Fenster anzeigt!  Habe die Verlinkung geändert, wie folgt: <html> <head> <title></title> <meta name="author" content="ANMADEWE"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <link rel="stylesheet" href="menuetest.css" type="text/css"> </head> <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> </body> </html> Meine menuetest.css sieht wie folgt aus: #menu{ width:200px; color:black; background:#b8ab8f; padding:10px; border-top:1px solid #837C6B; border-right:1px solid #E4D9C0; border-bottom:1px solid #E4D9C0; border-left:1px solid #837C6B;} <div id="menu"> <ul class="liste"> <li> <a href="#"><span class="dot">• </span>Test-Button 1</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 2</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 3</a> </li> </ul> </div> #menu a{ color:maroon; font:bold 13px verdana, sans-serif; margin:5px 0 5px 0; padding:1px 3px 1px 4px; text-decoration:none; background:transparent; display:block; border-top:1px solid #99917d; border-right:1px solid #e4d9c0; border-bottom:1px solid #e4d9c0; border-left:1px solid #99917d; width:155px;} #menu a:hover{ color:#f6e4c1; background:transparent; border-top:1px solid #e4d9c0; border-right:1px solid #837c6b; border-bottom:1px solid #837c6b; border-left:1px solid #e4d9c0;} #menu a .dot{ color:#a59a81; background:transparent; font-weight:bold; font-size:14px;} #menu a:hover .dot{ color:#c8ba9b; background:transparent; font-weight:bold; font-size:14px;} Eigendlich müßte nach dem Beispiel auf der Internet-Seite fractatulum daraufhin grau unterlegte buttons erscheinen, die beim mouseover ihre Farbe verändern. Sinnvoll finde das, da ich alle Seiten mit der gleichen Menuleiste versehen will. Es ist halt nur einfach so, dass ich meinen Fehler nicht finden kann! Ich habe die css-Datei im Editor unter "CSS, level 2" im "Farbschema für die Syntaxhervorhebung" und als .css gespeichert. Und wenn ich die interne Vorschau der .html-Datei anklicke erscheint eine weiße Seite. Dann hat wohl mein Editor einen elektronischen Papierstau!  Vielleicht fehlt mir irgendwo ein Häckchen, Pfeil, Klammer, Befehl oder so, damit es geht. Oder muß ich im Editor etwas anders einstellen? Das kann doch nicht so schwierig sein und ich kriege es einfach nicht hin! Wenn Ihr mir da weiterhelfen könnt, dann wäre ich Euch echt dankbar! Cu, Anja |
|
|
|
|
14.03.2005 - 21:27
Beitrag
#5
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hallo Anja,
steht denn dieser Teil auch in deiner CSS? HTML <div id="menu"> <ul class="liste"> <li> <a href="#"><span class="dot">• </span>Test-Button 1</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 2</a> </li> <li> <a href="#"><span class="dot">• </span>Test-Button 3</a> </li> </ul> </div> Wenn ja, dann ist das nicht richtig! Es ist reines HTML und sollte in der HTML-Seite stehen... Wenn Du es hinein Kopierst, dann nehme mal das hier: HTML <div id="menu"> <ul class="liste"> <li> <a href="#" class="dot">• Test-Button 1</a> </li> <li> <a href="#" class="dot">• Test-Button 2</a> </li> <li> <a href="#" class="dot">• Test-Button 3</a> </li> </ul> </div> cu Conny |
|
|
|
|
14.03.2005 - 21:42
Beitrag
#6
|
|
|
Rookie Gruppe: User Beiträge: 4 Mitglied seit: 13.03.2005 Wohnort: Porta Westfalica Mitglieds-Nr.: 4.859 |
Hi Conny,
danke, daran hat es gelegen. Es wird zwar noch nicht so angezeigt, wie im Beispiel, aber ich wollte es sowieso abändern. Werde mal wieder probieren müssen....am besten TESTEN! Als Regel gilt also: ich kann die eigentliche Tabelle für die späteren Menuepunkte nicht auslagern? Oder kann ich sie mit in die .CSS-Datei einbinden. Vielleicht stand sie nur nicht in der richtigen Reihenfolge der Befehle. Gibt es da eine Möglichkeit? Danke schonmal im voraus, für Eure lieben Bemühungen. CU, Anja |
|
|
|
|
14.03.2005 - 22:30
Beitrag
#7
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hi Anja
ZITAT(Anja) ich kann die eigentliche Tabelle für die späteren Menuepunkte nicht auslagern? Nein, so wie Du das möchtest geht das nicht. (Es gibt zwar alternative Möglichkeiten wie die include-technik des Editors, oder mittels php zu includieren; Ich glaube aber, daß das zunächst noch zu verwirrend wäre.) ZITAT(Anja) Oder kann ich sie mit in die .CSS-Datei einbinden. Nein, auch das geht nicht. Was Du mit CSS machen kannst sind die 'events' die sich zeigen, wenn Du einen Link oder Button anklickst. cu Conny |
|
|
|
|
15.03.2005 - 19:10
Beitrag
#8
|
|
|
Rookie Gruppe: User Beiträge: 4 Mitglied seit: 13.03.2005 Wohnort: Porta Westfalica Mitglieds-Nr.: 4.859 |
Danke für Deine Hilfe! Jetzt kann ich mich richtig an die Arbeit machen und sitze nicht wie "Ochs vorm Berg". Wenigstens geht es jetzt voran! Wenn ich noch einmal Fragen habe, wende ich mich gerne wieder an dieses Forum.
 CU Anja |
|
|
|
|
16.03.2005 - 9:10
Beitrag
#9
|
|
|
Ausnahme Poster  Gruppe: User Beiträge: 147 Mitglied seit: 14.07.2003 Wohnort: Schwäbisch Gmünd Mitglieds-Nr.: 947 |
Hi Anja,
hier nochmal kurz eine Erklärung von mir: CSS sind Formatierungsdefinitionen HTML ist die Seitenbeschreibung CSS kannst du, wenn einmalig auftretend, direkt dem HTML-Tag mitgeben (z.B.: <p style="font-size: 12pt"> </p>) Wenn eine Formatierung auf nur einer Seite öfter verwendet werden soll, kanns du dafür eine Klasse oder ID festlegen (eine Klasse definiert man mit einem eindeutigen Namen der mit einem Punkt beginnt .meineKlasse, eine ID ist ein eindeutiger Name der mit # beginnt: #meineID). Diese CSS-Formatierung legt man im Kopf (<head> </head>) der HTML-Seite fest. QUELLTEXT <style type="text/css"> <!-- .meineKlasse {text-align: right;} --> Wenn eine Formatierung in mehreren HTML-Seiten vorkommen soll, dann erstellt man eine externe CSS-Datein (meine_styles.css) und schreibt dort die Formatierungen hinein (.meineKlasse {color: black; text-align: center;}). Diese bindet man dann in den HTML-Seiten im Header (<head> </head>) ein: <link rel="stylesheet" href="meine_styles.css" type="text/css"> Man kann HTML-Tags direkt (p {font-size: 12pt;}) im Seitenkopf oder der externen CSS-Datei formatieren. HTML-Tags in einer externen CSS-Datei haben keine Funktion(!) und gehören dort nicht hinein, sondern eben nur in .htm(l)-Dateien. Auf CSS-Klassen oder ID greift man dann innerhalb eines HTML-Tags zu: <p class="meineKlasse"> </p>, also den definierten Klassennamen ohne Punkt. Das nochmal kurz und wenig ausführlich zu deinem Problem. Ich persönlich habe mir SelfHTML nicht nur als Hilfe auf meinen Rechner heruntergeladen, sondern mir auch das Buch gekauft, in dem ich immer wieder mal drin lese, wenn mir was nicht ganz klar ist. |
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
|
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 05.07.2025 - 0:44 |