www.alexander-merz.com | Alexander Merz

Erster und wichtigster Schritt: Sichere den aktuellen Inhalt der "Über mich"-Sektion in einer Datei auf deinem Rechner. Dann kannst du jederzeit den aktullen Stand wiederherstellen, wenn deine Experimente schiefgelaufen sind.

Wenn du das getan hast, kann es los gehen.

Wie funktioniert das eigentlich?

Eine MySpace-Seite besteht aus HTML-Code. HTML war ursprünglich eine Sprache die logische ("Das ist eine Tabelle") und physische ("Das ist ein kursiver Text") Formatierung fröhlich mit einander kombinierte. Da das mit der Zeit zu aberwitzigen Konstruktion führte, wurde entschieden, HTML als rein logische Sprache zu betrachten und die konkrete physische Darstellung (kursiv, unterstrichen, Farbe, Umrandung, Breiten etc.) einer anderen Technik zu überlassen: Cascading Style-Sheets (CSS).

CSS-Anweisungen können innerhalb des HTML-Code definiert werden. Dabei gibt es zwei Varianten:

1. innerhalb des HTML-Tags mit dem Style-Attribute:

   <p style="color:#FFFFFF">Ein Absatz</p>

2. als eigenständiger Code-Block:

   <style type="text/css">
   p {
    color:#FFFFFF;
   }
   </style>
   <p>Ein Absatz</p>
   

Die erste Variante bietet sich an, wenn du Text, ein Wort oder Satz innerhalb einer der Sektionen, quasi im Vorbei gehen, formatieren willst.

Die zweite Variante benötigen wir zum Formatieren der gesamten Seite. Hierbei nutzen wir aus, dass die <style>-Anweisung nicht unbedingt am Anfang stehen muss, sondern auch nach dem zu formatierenden Element stehen kann. Dann wird das Element erst normal "gerendert" (dargestellt), und wenn der Browser die Formatierungsanweisung sieht, dann ändert er die Darstellung des Elementes. (Das erklärt auch den Effekt, das bei einer langsamen Verbindung manchmal zuerst das normale MySpace-Layout erscheint und dann plötzlich die eigene Darstellung da ist.

Deshalb kann man eine MySpace-Seite auch formatieren, in dem man die Formatierungen über die "Über mich"-Sektion einpflegt. Normalerweise gänge das nicht, da wir keinen Einfluß auf die HTML-Elemente der MySpace-Seite haben.

Wie kann ich das Aussehen jetzt ändern?

Ok, du weißt jetzt, dass man mit dem Einfügen von <style>...</style> Formatierungsanweisungen unterbringen kannst. Aber welche gibt es überhaupt? Eine Übersicht, inklusive Erklärungen und Beispielen, findest du hier: http://de.selfhtml.org/css/eigenschaften/index.htm

Wenn du dich dort ein wenig umschaust, wirst du feststellen, dass es nicht weniger als drei Anweisungen für die Breite gibt: width, min-width und max-width.

Aber das bringt uns erstmal noch gar nichts, weil wir auch schreiben müssen, für welches HTML-Element die Anweisung gelten soll. Nochmal obiges Beipiel:

p {
 color:#FFFFFF;
}

Die Anweisung steht in geschweiften Klammern, davor steht der Identifier - in dem Fall ist es das Tag <p>. In CSS regulieren wir das Aussehen eines Tags in dem wir den Namen des Tags <p> einfach ohne die spitzen Klammen an den Anfang stellen als Identifier. Für das <table>-Tag schreiben wir:

table {
 ...
}

Und so gilt das auch für alle übrigen Tags.

Diese Art der Zuweisung ist vorteilhaft und nachteilig zugleich - die Formatierung gilt für jeden Einsatz des Tags:

<style type="text/css">
 color:#FFFFFF;
</style>
<p>
 Erster Absatz
</p>
<p>
 Zweiter Absatz
</p>

Beide Absätze erscheinen mit weißer Schrift.

Wollen wir für eine Tabelle eine feste Breite von 350 Pixeln erzwingen, können wir schreiben:

<style type="text/css">
table {
 width:350px;
 max-width:350px;
}
</style>

Damit wird aber jede Tabelle auf der MySpace-Seite 350 Pixel breit, und MySpace verwendet sehr viele (unsichtbare Tabellen)!

Wir benötigen also einen Weg, eine oder mehrere Tabellen gezielt anzusprechen. Dafür stehen uns nicht weniger als drei Weg zur Verfügung (und wir müssen auch alle drei anwenden bei MySpace).

1. Per id-Attribut: einige Tabellen bzw. Elemente besitzen ein id-Attribut. Die Tabelle der Interessen besitzt die ID "Table1". Statt eines Tag-Namens geben wir diesen Wert als Einleitung für die Formatierungsanweisungen an:

   #Table1 {
    width:350px;
    max-width:350px;
   }
   

   Wenn eine ID gemeint ist, dann müssen wir das Doppelkreuz # vor den Namen angeben. Der Vorteil ist übrigens, dass das ID-Attribut sich imer eindeutig auf ein bestimmtes Element bezieht.
2. Per class-Attribut: manche Elemente besitzen ein class-Attribut. Mehrere Elemente dürfen den gleichen Wert für das class-Attribut besitzen. Deshalb kann sich die Formatierungsanweisung auf mehrere Elemente beziehen. Dabei muss es sich nicht um die gleichen Elemente handeln. Die Tabelle der Interessen besitzt auch ein class-Attribut: "interestsAndDetails". Wir können die Formatierungsanweisung also auch über das class-Attribut addressieren:

   .interestsAndDetails {
    width:350px;
    max-width:350px;
   }
   

   Wenn das class-Attribut zur Adressierung verwendet werden soll, dann müssen wir den Punkt "." davor setzen.
3. Per Tag-Verschachtelung: Nehmen an, du willst das der Link in einer Tabelle anders formatiert wird als ausserhalb einer Tabelle. Dann kannst du diese beiden Tags auch hintereinander schreiben zu Adressierung:

   table a {
    color:#FFFFFF;
   }
   

   Würden wir das "table" weg lassen, würden als Links als weißer Text erscheinen, so aber nur Links in einer Tabelle.

Man kann übrigens auch ID und class-Angabe entsprechend kombinieren:

table .interestsAndDetails a {
 color:#FF0000;
}

Diese Anweisung besagt: Alle Links ("a"), die sich in einem Element mit der class "interestsAndDetails" befinden, welche wiederum sich innerhalb einer Tabelle ("table") befinden, sollen rot dargestellt werden.

Im Grunde hast du jetzt das notwendige Handwerkszeug.

Und was ist jetzt so kompliziert?

Wenn MySpace alles schön und sauber mit IDs und Class-Angaben versehen hätte, wäre alles schön einfach. Haben sie aber nicht. Im Gegenteil, die meiste Zeit beim Probieren geht dafür drauf, heraus zu finden, wie man am besten ein Element anspricht.

Nehmen wir ein Stück Formatierungsanweisung von deinem aktuellen Code:

table table table {
  width:100%; max-width: 600px;
}

Das beeinflußt im Prinzip diejenigen Elemente, die du auf dem Profil als optisch eigenständige Boxen wahrnimmst (Es handelt sich je um eine Tabelle, die in einer Tabelle steckt, die sich wiederum in einer Tabelle befindet). Wenn sie schmaler werden sollen, besteht die Lösung darin, einfach die Breiten-Angabe zu ändern, bzw. zu ergänzen:

table table table {
  width:350px;
  max-width: 350px;
  min-width: 350px;
}

Nehmen wir an, du willst in der Interessen-Übersicht eine andere Schriftgröße als in den übrigen Boxen, die Adressierung funktioniert nicht mehr über "table table table", also musst du einen Blick in den Quelltext der Webseite werfen, um herauszufinden, wie du genau dieses Element ansprechen kannst.

Hier haben wir Glück und können über das id-Attribut gehen, wie oben bereits gezeigt. Aber das funktioniert eben nicht immer. Vorallem kann uns hier eine andere Sache störend ins Handwerk pfuschen: das "Cascading" in CSS. Darstellunsanweisungen werden für untergeordnete Elemente übernommen, oder auch nicht.

Folgender HTML-Code sei gegeben:

<p>Ich bin ein Absatz mit einem <a href="...">Link darin</a>

Wir formatieren den Absatz mit

p {
 font-size:20px;
}

Normalerweise wird die Schriftgröße auch für den Link (Kind-Element des Absatzes) übernommen, obwohl er ein eigenständiges Element darstellt. Aber es ist eben innerhalb des Absatzes (Eltern-Element) und somit wird die Eigenschaft an die Elemente darin vererbt.

Wenn aber auch eine Formatierung für den Link existiert, dann wird diese genommen:

p {
 font-size:20px;
}
a {
 font-size:10px;
}

Damit wäre der Text des Link tatsächlich kleiner als der des umgebenden Absatztextes, die Vererbung wird ignoriert. Aber! Aber auch nur für die Anweisungen, welche auch explizit niedergelegt wurden:

p {
 font-size:20px;
 color:#FF0000;
}
a {
 font-size:10px;
}

In diesem Fall ist die Textgröße zwar unterschiedlich, der Link wird aber trotzdem rot eingefärbt, weil die Farb-Anweisung für den Absatz nicht im untergeordneten Element überschrieben wird.

Jetzt gehts los! Ein Arbeitsbeispiel

Im HTML-Code der Profil gibt es leider eine recht große Anzahl solcher Kombinationskonstruktionen, dass sieht dann schon mal so aus:

<table class="userProfileSchool" bordercolor="#6699cc" cellspacing="0" cellpadding="0" width="300" border="1">
 <tr>
  <td class="text tdborder" valign="middle" align="left" width="300" bgcolor="#6699cc" height="10"
	wrap="" style="WORD-WRAP:break-word">
	   <span class="whitetext12">Sarah: Schulen</span>
  </td>
  ...

Wir haben insgesamt vier(!) Formatzuweisungen (wahrscheinlich sogar mehr)

• Die Formatzuweisungen über das class-Atribut der Tabelle
• Die Formatzuweisungen über das class-Attribut mit zwei Klassen-Angaben ("text" und "tdborder")
• Die Formatzuweisung über das class-Attribut in <span>

Wenn du die Textfarbe und andere Eigenschaften von "Sarah: Schulen" ändern willst, dann wäre der erste Versuch, es direkt über die Klasse zu probieren. Du fügst also folgende Formatierungsanweisung ein:

 .whitetext12 {
  color:#0000FF;
  font-size:20px;
 }

Das Ergebnis wird eine Katastrophe sein. Denn es gibt auch andere Elemente, welche dieser Klasse angehören und die sind jetz auch größer und blau.

Also müssen wir das Element irgendwie besser adressieren. Wir kombinieren es mit dem Tag:

 span.whitetext12 {
  color:#0000FF;
  font-size:20px;
 }

Beachte, dass zwischen Punkt und span kein Leerzeichen ist. Damit adressieren wir alle span-Elemente mit einer bestimmten class. Wenn wir ein Leerzeichen dazwischen hätten, dann hiesse es: adressiere die Elemente mit der Klasse innerhalb eines <span>, z.B.: <span><a class="whitetext12">...</a></span>.

Auch das hift uns nicht weiter, selbes Problem, es ist noch nicht eindeutig genug. Also ergänzen wir das Eltern-Element des <span>-Tags: <td>.

 td span.whitetext12 {
  color:#0000FF;
  font-size:20px;
 }
 

(Hier haben wir ein Leerzeichen zwischen td und span)

Da fast sämtliche Daten eines Profils in Tabellenzellen stehen, ist das auch noch nicht das Wahre. Aber wenn man den HTML-Code ein wenig studiert, stellen wir fest: Die class-Attribute bei Tabellen sind komischerweise eindeutig - hier: userProfilSchool (Aus professioneller Sicht ist der MS-Code einfach nur Schrott und widerspricht sämtlichen Regeln guter HTML-Erstellung). Damit könnten wir es schaffen:

#userProfileSchool td span.whitetext12 {
  color:#0000FF;
  font-size:20px;
 }
 

So, das war jetzt der erste Versuch, 10 Jahre Erfahrung in der Webentwicklung auf einen Crash-Kurs runterzubrechen.