- Hinweis-Fenster mit Text beim Öffnen der HP
- Hinweis-Fenster mit Text beim Schließen der HP
- farbiger Rand um die Homepage
- Text schnell und einfach einrahmen
- fixiertes, feststehendes Hintergrundbild (inkl. Firefoxproblem!)
- Hintergrundfarbe ändern
- Kontextmenü (Rechtsklick) unterbinden
- Markieren verhindern
- fester Statustext
- Body-Randabstand verändern
- Zwangs-Rand umgehen
- Imagetoolbar ausschalten
- Link: Seite zu Favoriten
- Link: Zur Startseite machen
- Bild/Text nebeneinander
- Scrollbar (vertikal) ausblenden
- Linkfocus-Rahmen entfernen
- Fenstergröße beim Seitenladen bestimmen
- identische Textübernahme mit <pre>
- vertikalen und horizontalen Zentrierungszwang erreichen
- Bilder "schützen"
Hinweis-Fenster mit Text beim Öffnen der HP
<script>alert(' Text ')</script>
Anstelle von Text gewünschen Text ersetzen! (nicht ' & ' vergessen).Hinweis-Fenster mit Text beim Schließen der HP
<body onunload="alert(' Text ')">
Anstelle von Text gewünschen Text ersetzen! (nicht ' & ' vergessen).Farbiger Rand um die Homepage
<style type="text/css"><!--body{border: 20px #DF0000 solid}--></style>
Wir bedienen uns eines externen CSS-Aufrufes. Sämtliche Inhalte (inkl. Scrollbar) rücken um die entsprech. Pixelanzahl nach innen. Werte für Stärke und Farbe des Rahmens wie gewünscht ändern.20px=Rahmenstärke, #DF0000=Farbwert (hier rot), solid=Rahmenfülle (unverändert lassen)
Text schnell und einfach einrahmen
<div style="border:5px solid #0000FF; padding:10px;"> Inhalt </div>
Eine einfache Umrahmung erzielt man mit einem gestylten DIV-Bereich, in dem der Inhalt neben gewöhnlichem Text natürlich auch weitere HTML-Funktionen einnehmen kann.Erläuterungen zu den Parametern:
border:5px solid #0000FF - Rahmen mit 5 Pixel Stärke, durchgehende Linie und Farbwert #0000FF (blau)
padding:10px - Abstand des Inhalts zum Rahmenrand, hier im Beispiel 10 Pixel
fixiertes Hintergrundbild (feststehend)
<body bgproperties="fixed">
Das Hintergrundbild steht fest angewurzelt im Hintergrund und ''läuft'' beim Scrollen nicht mehr mit. Diesen Code kann man an einer beliebigen Stelle auf der HP einfügen.Seit Mai 2005 braucht man im Knuddels-Homepageeditor übrigens nur noch das Häkchen bei [Fixieren (Hintergrund scrollt nicht mit)] setzen. Der Editor übernimmt den Rest von allein.
Probleme beim Firefox-Browser?
Wird der Hintergrund nicht feststehend angezeigt? Dann mit CSS aushelfen:
<style type="text/css"><!--body{background-attachment:fixed;}--></style>
Hintergrundfarbe ändern
<body style="background-color: #007F00">
oder
<style type="text/css"><!--body{background-color: #007F00}--></style>
Der Knuddels-Homepageeditor erlaubt nur eine begrenzte Anzahl von Farbhintergründen. Also muss hier CSS ran um HTML zu übertrumpfen.Die 1. Variante zeigt den Style-Paramter direkt im HTML-Tag "body".
Die 2. Variante zeigt die generelle Bestimmung durch eine typische CSS-Klasse.
In beiden Beispielen können die HEX-Codes oder die Farbnamen verwendet werden.
Im Beispiel würde der Hintergrund in dieser Farbe erscheinen.
Kontextmenü (Rechtsklick) unterbinden
<body oncontextmenu="return false">
Das Kontext-Menü, welches nach einem Rechtsklick erscheint, bleibt verborgen.Markieren verhindern
<body onselectstart="return false">
So kann nicht mehr (vor allem Text) markiert werden.fester Statustext
<body onmouseover="window.status=' Text ';return true;">
Erzielt einen festen Text in der Statuszeile.Body-Randabstand verändern
<body marginheight="0" marginwidth="0" topmargin="0" leftmargin="0">
Hier im Beispiel wäre der Rand Null. Hat bei einer Knuddels-HP jedoch geringe Auswirkungen.Zwangs-Rand umgehen
<div style="width:1000px"> Inhalt </div>
Um die vom Knuddels-Homepage-Script festgesetzte, maximale Zwangsausdehnung von 600 Pixeln zu umgehen, verwendet man für jedes Editierfenster das oben stehenden <div>-Tag. So kann man z.B. bis an den linken Rand der Seite schreiben. Am Ende eines Editierfensters bitte nicht </div> vergessen.Imagetoolbar ausschalten
<meta http-equiv="imagetoolbar" content="no">
Der Internet Explorer bietet ein neues Feature namens "MyImage Toolbar" an, welche es ermöglicht, Grafiken mit einem einfachen Mausklick zu speichern, zu drucken oder via E-Mail zu versenden. Der o.g. Meta-Tag schaltet diese Funktion jedoch aus.Um die Toolbar bei einzelnen Bildern zuzuschalten, folgenden Zusatz verwenden:
<img src="http://..../bild.jpg" GALLERYIMG="yes">
Link: Seite zu Favoriten (nur Internet Explorer)
<a href="javascript:window.external.addfavorite('http://www.chathomepage.de/','Ramnips Homepage-Help')">Ramnips Homepage-Help zu den Favoriten</a>
URL, Favoriten-Eintrag und Link-Text wie gewünscht abändernBeispiel: Ramnips Homepage-Help zu den Favoriten
Link: Zur Startseite machen
<a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.chathomepage.de/');">Ramnips Homepage-Help als Startseite</a>
URL und Link-Text wie gewünscht abändernBeispiel: Ramnips Homepage-Help als Startseite
Bild/Text nebeneinander
<img src="http://www..../bild.jpg" align="left"> Text...
oder
<img src="http://www..../bild.jpg" align="right"> Text...
Beispiel für align="left":
So und hier schreiben wir jetzt mal Text!Links sehen wir ein Bild.
Wenn man weiter und weiter schreibt,
wird der Text irgendwann unter dem Bild weitergehen.
Man muss natürlich etwas testen!
So kann man auch ohne Tabellen
Text und Bild nebeneinander zaubern.
Scrollbar (vertikal) ausblenden
<style type="text/css"><!--body{overflow-y:hidden;}--></style>
Wer das Knuddels-Gimmick "Autoscrolling" verwendet, braucht nicht unbedingt die Scrollbar auf der rechten Seite. O.g. Stylesheet-Code blendet die Scrollbar aus.Linkfocus-Rahmen entfernen
<a onfocus="this.blur()" href="http://www.chatfarben.de/" target="_blank">Ramnips Farbtabelle</a>
Beim Klick auf den Link wird bei einigen Browsern der meistens kaum sichtbare gestrichelte/gepunktete Rahmen um das Linkobjekt entfernt. Dem a-tag wird einfach der Zusatz onfocus="this.blur()" verpasst.Fenstergröße beim Seitenladen bestimmen
<body onload="window.resizeTo(800,600)">
In diesem Beispiel würde das Fenster auf 800 x 600 Pixel eingestellt.Die Werte für die Größe also nach eigenem Wunsch anpassen.
identische Textübernahme mit <pre>
<pre> Text </pre>
Für die "faulen" Codierer, die für und <br> nichts übrig haben!Der PRE-Befehl übernimmt Leerzeilen und Abstände aus dem Editortext. Normalerweise entfernt der Browser nämlich "überflüssige" Leerzeichen und Leerzeilen.
vertikalen und horizontalen Zentrierungszwang erreichen
Wer kennt das nicht, ein relativ kleiner Inhalt einer Webseite soll stets genau in der Mitte angezeigt werden. Ganz egal wie groß das Browserfenster ist.
So funktioniert es: Hier klicken
Bilder "schützen"
Jeder kennt den Rechtsklick auf ein Bild und den Klick auf Speichern unter. Schwupps - schon ist das Bild gespeichert oder der Bild-URL abgelesen.
Mit der Tabelle kann man dem jedoch etwas trickreich entgegenwirken.
So funktioniert der Bildertrick (klicken).