Style'chen wechsel dich (jetzt mozillatauglich)

Nun gut, dass das mit dem Style wechseln und merken funktioniert ist ja jetzt schon eins zwei Tage alt ^-^'' Habe gestern und heute noch ein wenig gebastelt und jetzt gibt es zwei Stile mehr, aus denen ihr wählen könnt.
Auf den einen Stil bin ich ganz besonders stolz. Habe ich doch dort mal wieder eine neue Technik verwendet.. inclusive Trick 3729 ^-^''. Ihr könnt nämlich auch Text in Überschriften verschwinden lassen, und den Text im Hintergrund als Bild erscheinen lassen (stil 04). Wie man das macht? Aalso - wichtig ist, dass ihr jeder einzelnen Überschrift eine eigene ID zuweißt (oder Klasse, falls ihr ID schon verwendet habt ;)). Dann definiert ihr folgendes in der CSS-Datei für z.B. u id="titel"

u#titel {
display:block;
font-size:0pt;
color:'Farbe des Hintergrundes;
background: url(bild.gif) no-repeat left;
line-height: 'höhe des bildes'px;
text-align:right;
}

Wenn möglich richtet den Text entgegengesetzt zum Bild aus ^-^. Dies ist eine weitere Maßname um zu verhintern, dass das restliche Textfitzelchen doch noch über dem Bild hängt und man es sieht. In dem Bild habt ihr dann vorher mit einem Bildbearbeitungsprogramm die Überschrift geschrieben. Am besten ist hier, wenn ihr das Bild möglichst genau am Rand der Schrift enden lasst und den Hintergrund transparent macht!!, dann könnt ihr es z.B. bei mehreren Hintergrundfarben verwenden ^-^.
Ach so, display:block; ist sinnvoll, da es die 'u'-Box auf die komplette Breite des blockes ausdehnt, den es überdecken soll.
Es gibt auch noch eine einfacherere Möglichkeit Überschriften zu setzen, wenn diese gar nicht vorhanden sind! So wie bei der Seitenüberschrift. Das jeweilige Bild muss dann nur als Hintergrundbild gesetzt werden (no-repeat beachten!!) und ein genügend großer oberer Randabstand (padding-top:;), damit der Text das Bild nicht überschneidet!
Wie immer gibt es tausend Möglichkeiten! Könnt ja mal eure posten ^-^'' Sie freut sich nämlich immer, neue Dinge dazulernen zu können!

Mozillaproblem: ok, der Fehler ist gefunden. Anders als vermutet ist die U-Box nicht zu niedrig, sie ist zu kurz. Beheben kann man das Problem also, in dem man noch eine Weitendefinition einfügt. Außerdem habe ich die Schriftgröße mal auf 1 geändert, falls Mozilla damit auch Probleme hat. Der Korrekte CSS-Code muss also lauten:

u#titel {
display:block;
font-size:1pt;
color:'Farbe des Hintergrundes;
background: url(bild.gif) no-repeat left;
line-height: 'höhe des bildes'px;
text-align:right;
width:120pt;
}

funktioniert zumindest bei mir ^-^''

Tags: , , ,

5 comments

  1. Und noch ein Mackel des Stilwechslers behoben: Wenn man den Stil wechselt, wird nun die gleiche Seite aufgerufen, von der man den Stilwechsel betätigt hat und nicht mehr die Indexseite ^-^

  2. knuffeltierchen

    Leider, leider funktioniert dieser Trick mit Fontsize 0 irgendwie in Mozilla nicht. :-(

  3. ok, jetzt habe ich den code so umgeschrieben, dass es mit Mozilla auch genauso aussehen sollte, wie mit dem IE oder Safari ^-^ – auch den Abstand zum oberen Rand. Irgendwie hatte ich da etwas doppelt und dreifach, was der IE nicht interpretierte, Mozilla korrekterweise aber schon. Getestet habe ich es mit K-Meleon und dort sah es ziemlich identisch aus. Habe zwar keine Ahnung, wie es bei anderen Auflösungen aussieht, aber eigentlich sollte es ja funktionieren. ;)

  4. knuffeltierchen

    Jap, jetzt funktionierts auch mit Mozilla. ^_^

  5. *schulterklopft*
    *ganzstolzaufdichist*
    mir gefällt 04 am besten *zwinker*
    *knuddeldich*
    Jacky!!