CSS position: absolute als externe Datei einbinden

[User#221]

Liebe CSS-Fachleute,

ich habe das Problem mit dem Einbinden der position: absolute, die für meine Divs, die in mehreren HTML-Dateien mit der gleichen Gestaltung erscheinen. Seit einigen Tagen stöbere im Forum und in der Suche herum, und kann leider nichts finden.
Hier einen Ausschnitt vom HEAD:

<style type="text/css">
<!--
#Titel {
position:absolute;
left:1px;
top:0px;
width:1280px;
height:91px;
z-index:1;
background-image: url("images/il_home1_Logoleiste.gif");
background-repeat:no-repeat;
}
#Menues {
position:absolute;
left:30px;
top:430px;
width:170px;
height:240px;
z-index:4;
}
#Inhalt {
position:absolute;
left:16px;
top:102px;
width:1265px;
height:290px;
z-index:2;
background-image: url(images/villen.jpg);
background-repeat:no-repeat;
}
</style>

Diese "#" im HEAD wirken sich, wie üblich auf die gleichbenannte DIVs im BODY aus.
Bereits habe ich die CSS-Eigenschaften als CSS-Datei exportiert(mit "link rel=...", dabei habe ich die "#"mit dem Klasse-Zeichen"." ersetzt. Dann habe ich diese CSS-Eigenschaften in HEAD gelöscht. Das Ergebnis:
Die CSS-Eigenschaften wirken, aber die Positionen stürzen ein(collapse) und einige Hintergrundgrafiken werden nicht angezeigt.
Als CSS-Anfänger hoffe ich, dass mir jemand helfen kann, da dieses Problem, sehr prosaisch aussieht.
Herzlichen Dank!
Bran

[ChrisB]

Hi,

Als CSS-Anfänger hoffe ich, dass mir jemand helfen kann, da dieses Problem, sehr prosaisch aussieht.

Vor allem deine Problembeschreibung ist leider fast nur Prosa.

Aus dem Tipps für Fragende weißt du aber bereits, dass du relevanten Quellcode posten sollst, bzw. bevorzugt sogar ein Online-Beispiel (valides HTML & CSS, selbstverständlich).
Dass wenig zu deinem Problem zu sagen ist, wenn du nur CSS zeigst, und das HTML, auf das es angewandt werden soll, verheimlichst, sollte eigentlich absolut logisch sein.

MfG ChrisB

[Shadowcrow]

'ǝɯɐu$ ıɥ

Diese "#" im HEAD wirken sich, wie üblich auf die gleichbenannte DIVs im BODY aus.

Auf die gleichlautenden IDs die zufälligerweise zu DIVs gehören.

Bereits habe ich die CSS-Eigenschaften als CSS-Datei exportiert(mit "link rel=...", dabei habe ich die "#"mit dem Klasse-Zeichen"." ersetzt.

Warum zum Geier?? Hast du auch im Body id="" durch class="" ersetzt?

Die CSS-Eigenschaften wirken, aber die Positionen stürzen ein(collapse) und einige Hintergrundgrafiken werden nicht angezeigt.

Ist die Datei in einem Unterverzeichniss? Die Pfade musst du relativ zur CSSDatei angeben, nicht zum Dokument in dem diese Eingebunden ist.

ssnɹƃ
ʍopɐɥs

[User#221]

Das mit dem Klassen im Body habe ich auch ausprobiert. Es klappt nicht. Die Verlinkung mit styles.css ist bei mir richtig.
Es ist augenscheinlich, wie es Thomas meint, dass diese # im Head die Divs im Body charakterisieren, die einzigartig in Site sind. Obwohl man die gleiche Struktur in allen HTML-Dateien hat, muss man evtl. gleiche Änderungen in den Heads manuell vornehmen. Die Klassen charakterisieren gut globale Eigenschaften wie Text, Farbe, Stil etc. Für Positionen, die vereinzelt in den HTMLs definiert sind, sind die Klassen keine Losung.
Es mangelt mir an Erfahrung. Es kann sein, dass es oben nicht ganz stimmt.

Gruß,
Bran

'ǝɯɐu$ ıɥ

Diese "#" im HEAD wirken sich, wie üblich auf die gleichbenannte DIVs im BODY aus.

Auf die gleichlautenden IDs die zufälligerweise zu DIVs gehören.

Bereits habe ich die CSS-Eigenschaften als CSS-Datei exportiert(mit "link rel=...", dabei habe ich die "#"mit dem Klasse-Zeichen"." ersetzt.

Warum zum Geier?? Hast du auch im Body id="" durch class="" ersetzt?

Die CSS-Eigenschaften wirken, aber die Positionen stürzen ein(collapse) und einige Hintergrundgrafiken werden nicht angezeigt.

Ist die Datei in einem Unterverzeichniss? Die Pfade musst du relativ zur CSSDatei angeben, nicht zum Dokument in dem diese Eingebunden ist.

ssnɹƃ
ʍopɐɥs

[Shadowcrow]

'ǝɯɐu$ ıɥ

Das mit dem Klassen im Body habe ich auch ausprobiert. Es klappt nicht. Die Verlinkung mit styles.css ist bei mir richtig.

Ich meinte nicht die Verlinkung mit der CSS sondern IN der CSS - stimmen die Pfade ZU den Hintergrundbildern?

Es ist augenscheinlich, wie es Thomas meint, dass diese # im Head die Divs im Body charakterisieren, die einzigartig in Site sind.

Sach das nicht mir ;-), deshalb wunderte mich ja warum du das geändert hast.

Obwohl man die gleiche Struktur in allen HTML-Dateien hat, muss man evtl. gleiche Änderungen in den Heads manuell vornehmen. Die Klassen charakterisieren gut globale Eigenschaften wie Text, Farbe, Stil etc. Für Positionen, die vereinzelt in den HTMLs definiert sind, sind die Klassen keine Losung.

Sach das nicht mir ;-), deshalb nimmt man ja CSSDateien und unterscheidet u.a. zwishen IDs und Klassen.

Es mangelt mir an Erfahrung. Es kann sein, dass es oben nicht ganz stimmt.

Schmeiß mal ein Online Beispiel rüber, dann können wir besser sehen woran's liegt.

ssnɹƃ
ʍopɐɥs

[Thomas]

Hallo.

<style type="text/css">
<!--
#Titel {

Der HTML-Kommentar hat in <style>-Bereichen nichts zu suchen und auf das type-Attribut kannst du guten Gewissens verzichten.

}
</style>

(Mal abgesehen davon, dass es unsinnig ist, einen HTML-Kommentar auf-, aber nicht wieder zuzumachen.)

Diese "#" im HEAD wirken sich, wie üblich auf die gleichbenannte DIVs im BODY aus.

Nein, doppelt falsch. Sie beziehen sich auf alle (!) Elemente, deren id-Attribut (!) den jeweiligen Bezeichner trägt. Sie wirken sich weder auf Elemente aus, deren name-Attribut dieser wäre, noch speziell auf <div>-Elemente.

Bereits habe ich die CSS-Eigenschaften als CSS-Datei exportiert(mit "link rel=...", dabei habe ich die "#"mit dem Klasse-Zeichen"." ersetzt.

Warum das? Es ist für die CSS-Selektoren völlig unerheblich, in welcher Datei sie stehen, # bleibt # und . bleibt . – genau da liegt dein Fehler. Mit dem Ändern von # (id-Attribut) auf . (class-Attribut) hast du die Bezüge geändert, <bla id="fasel"> ist nicht gleich <bla class="fasel"> und #fasel ist nicht gleich .fasel .
Ändere das zurück in # und es sollte wieder so funktionieren, wie zuvor, als der Krams noch im <head> untergebracht war.

Nur am Rande: Verwende id bzw. # dort, wo du nur ein Element, class bzw. . dort, wo du mehrere Elemente formatieren möchtest.

[suit]

und auf das type-Attribut kannst du guten Gewissens verzichten.

Das hängt von der DTD ab - in den meisten Fällen kann man nicht darauf verzichten:

<!ELEMENT STYLE - - %StyleSheet        -- style info -->  
<!ATTLIST STYLE  
  %i18n;                               -- lang, dir, for use with title --  
  type        %ContentType;  #REQUIRED -- content type of style language --  
  media       %MediaDesc;    #IMPLIED  -- designed for use with these media --  
  title       %Text;         #IMPLIED  -- advisory title --  
  >

Diese "#" im HEAD wirken sich, wie üblich auf die gleichbenannte DIVs im BODY aus.

Nein, doppelt falsch. Sie beziehen sich auf alle (!) Elemente, deren id-Attribut (!) den jeweiligen Bezeichner trägt.

Das Verhalten für diesen Fall ist meines Wissens nicht definiert - da es sich um eine theoretische Unmöglichkeit handelt.

Manche Browser selektieren das erstbeste Element, manche das letzte, manche alle.

Nur am Rande: Verwende id bzw. # dort, wo du nur ein Element, class bzw. . dort, wo du mehrere Elemente formatieren möchtest.

Nein, auch bei einem einzelnen Element kann eine Klasse sinnvoll sein.

[Thomas]

und auf das type-Attribut kannst du guten Gewissens verzichten.

»»

Das hängt von der DTD ab - in den meisten Fällen kann man nicht darauf verzichten:

Eine vollkommen irrelevante Korinthe, die lediglich dem Hinkacker dient, selbstzufrieden auf sein Werk blicken zu können.

Diese "#" im HEAD wirken sich, wie üblich auf die gleichbenannte DIVs im BODY aus.

Nein, doppelt falsch. Sie beziehen sich auf alle (!) Elemente, deren id-Attribut (!) den jeweiligen Bezeichner trägt.

Das Verhalten für diesen Fall ist meines Wissens nicht definiert - da es sich um eine theoretische Unmöglichkeit handelt.

Warum es unmöglich sein soll, statt eines <div>s beispielsweise einem <p> oder einem <table> ein id-Attribut zu geben, möge auch bitte dein Geheimwissen bleiben.

Nur am Rande: Verwende id bzw. # dort, wo du nur ein Element, class bzw. . dort, wo du mehrere Elemente formatieren möchtest.

Nein, auch bei einem einzelnen Element kann eine Klasse sinnvoll sein.

"Das dämlich war darauf bezogen, dass eine Antwort hingerotzt wird". Ja, im dämlichen Hinrotzen nur um des Hinrotzens Willen bist du offenbar Experte. Hurra! :>

[apsel]

Om nah hoo pez nyeetz, Thomas!

Das Verhalten für diesen Fall ist meines Wissens nicht definiert - da es sich um eine theoretische Unmöglichkeit handelt.

Warum es unmöglich sein soll, statt eines <div>s beispielsweise einem <p> oder einem <table> ein id-Attribut zu geben, möge auch bitte dein Geheimwissen bleiben.

Es ist sicher möglich, auch einem <p> eine Id zu verpassen und du kannst davon ausgehen, dass suit dies weiß, dennoch darf eine Id dokumentenweit nur einmal vorkommen.

div#foo {bar:baz}
p#foo   {quz:zui}

ist dennoch gültiges CSS. Es wird erst dann fehlerhaft, wenn sich in einem Dokument sowohl der Absatz als auch das div mit der Id "foo" befinden.

Warum du eine fachlich fundierte und sachlich formulierte Antwort als "hingerotzt" bezeichnest,

möge auch bitte dein Geheimwissen bleiben.

Matthias

[suit]

Eine vollkommen irrelevante Korinthe, die lediglich dem Hinkacker dient, selbstzufrieden auf sein Werk blicken zu können.

So wie auch Geschwindigkeitsbegrenzungen oder Grundregeln der zwischenmenschlichen Kommunikation (gemeinhin als Soft Skills bezeichnet) wichtig sind, werden sie gerne nicht beachtet - das sieht man an deiner Antwort hier.

Warum es unmöglich sein soll, statt eines <div>s beispielsweise einem <p> oder einem <table> ein id-Attribut zu geben, möge auch bitte dein Geheimwissen bleiben.

Das habe ich nicht bestritten.

Ja, im dämlichen Hinrotzen nur um des Hinrotzens Willen bist du offenbar Experte. Hurra! :>

Dem kann ich nicht folgen, kannst du bitte eine sachliche Kritik abgeben, damit ich mich ggf. verbessern kann?

Nvm - kannst du nicht.

[User#221]

Hallo allerseits,
vielen Dank!!!
Es geht ja so schnell, dass ich Eure Antworten noch nicht so schnell verdauen kann. Hier ist die komplette HTML meiner "index.html" gepostet.
Ich brauche die feste Positionen, da sich diese Gestaltung auf andere verknüpfte HTML bezieht, bzw. beziehen soll. Ich möchte wenn ich Änderungen in Position oder anderen Eigenschaften mache,dass ich nicht die Head-Elemente aller Dateien manuell ändern muss. Dafür will ich die letzten in eine ext. Datei einbinden, um eine Änderung für alle HTML-Dateien gleichzeitig vorzunehmen.

Herzliche Grüße,
Bran

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Immo-Leistungen_IBK</title>
<meta name="Author" content="Branimir Georgiev" />
<meta name="keywords"content= Immobilien, Geb&auml;de, Energieberatung,Energiekosten, Hamburger Energiepass, Bauqualit&auml;tskontrolle, Blower Door,Thermografie"/>
<meta name= "description"content="IBK Kr&ouml;ger, Dipl.-Ing. Carsten Kr&ouml;ger,Humboldtstr.123,Hamburg","Immobilien-Leistungen, Immobilienberatung,Geb&auml;deenergieberatung im Gro&szlig;raum Hamburg />
<meta name="geo.region" content="DE-HH" />
<meta name="geo.placename" content="Hamburg" />
<meta name="geo.position" content="53.5780300;10.0200500" />
<meta name="ICBM" content="53.5780300;10.0200500" />

<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link href="style_text.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
#Titel {
position:absolute;
left:1px;
top:0px;
width:1280px;
height:91px;
z-index:1;
background-image: url("images/il_home1_Logoleiste.gif");
background-repeat:no-repeat;
}
#Menues {
position:absolute;
left:30px;
top:430px;
width:170px;
height:240px;
z-index:4;
}
#Inhalt {
position:absolute;
left:16px;
top:102px;
width:1265px;
height:290px;
z-index:2;
background-image: url(images/villen.jpg);
background-repeat:no-repeat;
}
#mittlere_leiste{
  position:absolute;
  left:16px;
  top:400px;
  width:1070px;
  height:8px;
  z-index:4
  }
 #untere_leiste{
position:absolute;
left:1px;
top:700px;
width:1280px;
height:8px;
z-index:5;
background-image: url(images/il_home1_Leiste.gif);
background-repeat:no-repeat;
  }
#impressum{
position:absolute;
left:1px;
top:715px;
height:60px;
width:1280px;
z-index:6 }

#Thumbs {
position:absolute;
left:16px;
top:414px;
width:1265px;
height:272px;
z-index:3;
}

#back_home {
position:absolute;
left:1px;
top:545px;
width:80px;
height:25px;
z-index:6;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

-->
</style>
</head>

<body>
<div id="Titel">
<a href="index.html"></a>
</div>
<div id="Menues">
  <a href="index.html"><img src="images/Home_h.gif" alt="Home" width="170" height="40" border="0"></a>
  <a href="gebaeudeenegieberatung.html"><img src="images/Gebaeudeenegieberatung.gif" alt="Gebaeudeenegieberatung" width="170" height="40"border="0"></a>
  <a href="verkehrswertermittlung.html"><img src="images/Verkehrswertermittlung.gif" alt="Verkehrswertermittlung" width="170" height="40" border="0"></a>
   <a href="immobilienvermarktung.html"><img src="images/Immobilienvermarktung.gif" alt="Immobilienvermarktung" width="170" height="40" border="0"></a>
  <a href="bauqualitaetskr.html"><img src="images/Bauqualitaetskontrolle.gif" alt="Bauqualitaetskontrolle" width="170" height="40" border="0"></a>
  <a href="impressum_kontakt.php"><img src="images/Kontakt.gif" alt="kontakt" width="170" height="40" border="0"></a></div>
<div class="graurosa"id="Inhalt"></div>
<div class="style1 mittlere_leiste" id="mittlere_leiste"
 div align="right"><span class="style1">Unser Ziel ist Ihre Zufriedenhei</span>t</div>
<div class="graurosa"id="Thumbs"></div>
<div id="untere_leiste"></div>
<div class="textnormal1 impressum graurosa" id="impressum"

div align="left">
<pre><a href="index.html">  <span class="textnormal1">   Home </span></a> <span class="textnormal1"><a href="impressum_kontakt.php" class="textnormal1">     Disclaimer       Impressum </a></span> </pre>
</div>
</body>

</html>

[Gunnar Bittersmann]

@@User#221:

nuqneH

Dafür will ich die letzten in eine ext. Datei einbinden, um eine Änderung für alle HTML-Dateien gleichzeitig vorzunehmen.

Ja. Du solltest aber konsequent sein und _alle_ Regeln ins externe Styelsheet schreiben.

Der Validator hat deinen Quelltext noch nicht zu Gesicht bekommen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

'<' startet einen Tag, wenn dessen Bezeichner mit dem darauffolgenden Zeichen beginnen kann. Auf '<' trifft das nicht zu, deshalb startet erst das zweite '<' ein Tag; das erste '<' ist Textinhalt. Solchen darf aber das 'head'-Element nicht haben, ergo HTML-Fehler.

'/' schließt in HTML (SGML) ein Tag (auch wenn kaum ein Tagsoup-Parser das so interpretiert), das folgende '>' ist Textinhalt. Solchen darf aber das 'head'-Element nicht haben, ergo HTML-Fehler.

In HTML 4 werden die Tags von leeren Elemente nicht mit '/>' geschlossen, sondern mit '>' – im Gegensatz zu XHTML. (In HTML5 ist beides erlaubt.) Mache dich mit den <http://de.selfhtml.org/html/xhtml/unterschiede.htm@title=Unterschieden zwischen XHTML und HTML> vertraut und entscheide dich, ob du HTML 4 oder XHTML 1 (oder HTML5) schreiben willst. Ich empfehle XHTML 1.0 – und zwar Strict, nicht Transitional –, dann wäre der entsprechende http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=DOCTYPE anzugeben.

<meta name="keywords"content= Immobilien, Geb&auml;de, […]

Zwischen Attribuen muss Whitespace stehen, setz also ein Leerzeichen zwischen 'name="keywords"' und 'content'. Hinter 'content=' fehlt ein '"'.

Nicht 'Geb&auml;de', sondern 'Gebäude'! „Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden. Die Verwendung von Escapes macht den Quelltext schlechter lesbar und schwerer zu pflegen […]“ [ESCAPES]

<meta name= "description"content="IBK Kr&ouml;ger, Dipl.-Ing. Carsten Kr&ouml;ger,Humboldtstr.123,Hamburg","Immobilien-Leistungen, Immobilienberatung,Geb&auml;deenergieberatung im Gro&szlig;raum Hamburg />

Zusätzlich zu dem schon Genanntem: Das '"' von 'Hamburg"' schließt den Wert des @content-Attributs. Danach darf nicht ',"' stehen. Du willst aber alles als Attributwert haben: <meta name="description" content="IBK Kröger, Dipl.-Ing. Carsten Kröger,Humboldtstr.123,Hamburg,Immobilien-Leistungen, Immobilienberatung,Gebäudeenergieberatung im Großraum Hamburg">

<div id="Titel">
<a href="index.html"></a>
</div>

Was soll das?

<div id="Menues">
  <a href="index.html"><img src="images/Home_h.gif" alt="Home" width="170" height="40" border="0"></a>
  <a href="gebaeudeenegieberatung.html"><img src="images/Gebaeudeenegieberatung.gif" alt="Gebaeudeenegieberatung" width="170" height="40"border="0"></a>
  <a href="verkehrswertermittlung.html"><img src="images/Verkehrswertermittlung.gif" alt="Verkehrswertermittlung" width="170" height="40" border="0"></a>
   <a href="immobilienvermarktung.html"><img src="images/Immobilienvermarktung.gif" alt="Immobilienvermarktung" width="170" height="40" border="0"></a>
  <a href="bauqualitaetskr.html"><img src="images/Bauqualitaetskontrolle.gif" alt="Bauqualitaetskontrolle" width="170" height="40" border="0"></a>
  <a href="impressum_kontakt.php"><img src="images/Kontakt.gif" alt="kontakt" width="170" height="40" border="0"></a></div>

„Ich möchte furchtbar gern eine Liste sein. Bitte bitte lass mich doch!“ (frei nach wahsaga) Formatierung der Liste (<http://de.selfhtml.org/css/eigenschaften/listen.htm@title=keine Bullets>, Menüpunkte http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=nebeneinander) per CSS.

Und die Alternativtexte mit richtigen Umlauten schreiben:

<ul id="Menues">  
  <li><a href="index.html"><img src="images/Home_h.gif" alt="Home" width="170" height="40" border="0"></a></li>  
  <li><a href="gebaeudeenegieberatung.html"><img src="images/Gebaeudeenegieberatung.gif" alt="Gebäudeenegieberatung" width="170" height="40"border="0"></a></li>  
  <li><a href="verkehrswertermittlung.html"><img src="images/Verkehrswertermittlung.gif" alt="Verkehrswertermittlung" width="170" height="40" border="0"></a></li>  
  <li><a href="immobilienvermarktung.html"><img src="images/Immobilienvermarktung.gif" alt="Immobilienvermarktung" width="170" height="40" border="0"></a></li>  
  <li><a href="bauqualitaetskr.html"><img src="images/Bauqualitaetskontrolle.gif" alt="Bauqualitätskontrolle" width="170" height="40" border="0"></a></li>  
  <li><a href="impressum_kontakt.php"><img src="images/Kontakt.gif" alt="Kontakt" width="170" height="40" border="0"></a></li>  
</ul>

Und: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

<div class="graurosa"id="Inhalt"></div>
<div class="style1 mittlere_leiste" id="mittlere_leiste"

Benenne Klassen und IDs nach deren Funktion, nie nach der gegenwärtig(!) gewünschten Darstellung!

div align="right">

Gib sämtliche Darstellung mit CSS an, nicht mit HTML-Attributen!

<pre><a href="index.html">  <span class="textnormal1">   Home </span></a> <span class="textnormal1"><a href="impressum_kontakt.php" class="textnormal1">     Disclaimer       Impressum </a></span> </pre>

Wozu 'pre'?

Qapla'

[User#221]

Hallo Gunnar Bittersmann,

einen ganz herzlichen Dank für die ausführliche analytische Antwort!!!
Das ist was anderes als bisher. Du hast die Fähigkeit, konsequent etwas zu vermitteln. Es gibt in meinem Code einige klare Fehler, die ich beseitigen muss. Ich werde es morgen bei klarem Kopf tun.
Auf jeden Fall finde ich die Diskussion insgesamt positiv, da es viele wie ich gibt, die die Elemente und deren Eigenschaften noch nicht gut verstehen.
Gute Nacht und vielen Dank noch ein Mal!
Gruß,
Bran

[User#221]

Hallo Thomas,

dann wie soll ich diese Styles als externe Datei exportieren, damit die Positionen stimmen und die Styles gleichzeitig für alle HTMLs zu bearbeiten sind?

Gruß,
Bran

[User#221]

Sorry,
ich habe meine erste Anfrage nicht klar formuliert. Deswegen habe ich vier verschiedene Antworten gekriegt und weiß ich noch nicht wem was antworten kann.
Der Unterschied zwischen ID und Klasse ist mir theoretisch klar, nur in der Praxis sieht es anders aus. Ich hoffe, meine Anfrage ist jetzt klarer:
Ich will diese IDs(#) vom Head wegkriegen(als externe Datei setzen), da ich mindestens 5-6 solche HTML-Dateien mit dem Gleichen im Head habe und will sie nicht separat manuell synchronisieren, sondern flexibel. Die externe CSS wirken schon(bei Probe), die Position und Hintergrundgrafik aber verschwinden.

Herzlichen Dank an alle!
Bran

[suit]

ich habe meine erste Anfrage nicht klar formuliert. Deswegen habe ich vier verschiedene Antworten gekriegt und weiß ich noch nicht wem was antworten kann.

Dann versuch erstmal eines deiner Löcher zu stopfen.

#1 wäre: <http://de.selfhtml.org/css/formate/einbinden.htm@title=wie lagere ich ein style-Element in eine Externe Datei aus>?

Das style-Element im Head entfernst du hierzu und fügst dessen Inhalt (abzüglich der HTML-Kommentare) in eine externe Datei ein, die du dann - wie du schon gesagt hast - per link-Element einbindest.

Wenn dass geschafft ist, kannst du zu #2 übergehen:

Korrigiere deinen HTML-Code, validiere ihn und räume ihn aus Übersichtsgründen auf (Einrückung).

Das ist entgegen der Aussage von Thomas nicht, damit du mit selbstzufrieden auf den Werk blicken kannst oder irgendwelche Korinthen ausscheidest sondern schlichtweg eine enorme Arbeitserleichterung, da du offensichtliche Syntaxfehler in den Meldungen des Validators schneller findest, wenn du sonst keine Fehler gemacht hast. Aktuell ist dein Dokument noch einfach und wenig komplex, aber spätestens in 3 Monaten weißt du nicht, mehr was du da gemacht hast und selbst ein simples Dokument mit einem einzelnen Fehler kann sehr frustrierend werden, wenn man - in der Wüster der Fehlermeldungen das eigentliche Problem kaum zu finden vermag.

Konstrukte wie dieses hier sind z.B. offensichtlich falsch - andere Fehler sind aber ohne Validator oder ordentliches Syntaxhighlighting teilweise nur sehr schwer zu finden.

<div class="textnormal1 impressum graurosa" id="impressum"  
  
div align="left">

Nur Gott^WTim Berners-Lee weiß, was dein oder ein andere Browser mit diesem Code anstellt.

Wenn das geschafft ist, geht es an #3: Aufräumen deiner ID- und Klassenwüste - hier hast du aus logischen und arbeitstechnischen Gründen sicher auch noch einiges zu lernen.

Die Klasse "graurosa" oder "textnormal1" sind mit ziemlicher Sicherheit unsinnig - "impressum" als Klasse reicht hier völlig aus, wobei man nach dem aufräumen des Dokuments wahrscheinlich sogar darauf verzichten kann und das Element anderweitig selektierbar ist.

[User#221]

@suit,

vielen Dank für deine Antwort.
Ich hatte heute komischerweise keinen Zugang zu SHTML(ich weiß es nicht, woran es lag, aber die Seite war nicht abrufbar) und konnte deine Antwort erst jetzt lesen. Ich arbeite an der Code und werde mich bald melden.
 Herzlichen Dank,
Bran

[suit]

Ich hatte heute komischerweise keinen Zugang zu SHTML(ich weiß es nicht, woran es lag, aber die Seite war nicht abrufbar)

https://forum.selfhtml.org/?t=199380&m=1341455

Ich arbeite an der Code und werde mich bald melden.

Wenn dieser Thread noch offen ist, am besten gleich hier in einem neuen Ast unter deinem Ausgangsposting.