Posts tagged with "css"
STICKY POST
Wednesday, 8. February 2006, 11:50:14
css, about, ueber mich, xfn
...
... mit Bemerktem und Angemerktem von Thomas Hofmann in und um Dorfen, Buchbach und dem Rest.
Meine Themen außer Dorfen und Buchbach sind noch der weitere Raum Richtung Taufkirchen/Vils, Suchmaschinen, Kalenderrechnung, das Internet und seine Entwicklungen und "Erfindungen" wie z.B. Smilies und RSS und sonst Interessantes. Siehe dazu auch meine Tags bzw. Kategorien. Kontakt ist möglich auf meiner Internetseite bei Kontakt Thomas Hofmann.
Erläuterungen zum Layout
Wegen SPAM Missbrauchs habe ich die anonymen Kommentare abgeschaltet. Nach kurzem anmelden kann man Kommentare posten.
Wie? in Kommentaren formatieren
siehe auch microformats (auch XFN-friendly)
Saturday, 15. March 2008, 09:45:19
blog, css, opera, styles
...
Heute bemerkt:
Bei jedem Blog wird oben rechts sehr dominant ein Suchfeld mit Werbung für Google eingeblendet. Und: Die Styles sind total zerschossen. Hat noch jemand diese Probleme?
Gruß Thomas
siehe auch:
Tuesday, 11. March 2008, 22:13:51
opera, styles, ie, blog
...
Der IE6 (Internet Explorer 6) macht wieder mal nicht das, was CSS gut finden würde.
Wer Firefox oder Opera als Browser benutzt, sieht alles korrekt. Wie macht das eigentlich der IE7? Hm, naja, fast richtig. Das scheint auch noch von der Bildschirmauflösung abzuhängen. Er macht es jedenfalls "richtiger" als der IE6. Nur daß er auf meinem Testsystem die Schrift sowohl rechts als auch die Jahreszahl unten abgeschnitten hat. Aber ich weiß schon, die Vermengung von PX und em. Hier eine
Testdatei in reinem HTML mit integriertem CSS. Diese Version unterscheidet sich von der aktuellen Version in diesem Blog. Damit stellt er zumindest den Kasten so groß dar, daß der Text reinpaßt.
siehe auch:
Opera Blog: Datum als Kalenderblatt formatiert
Tuesday, 11. March 2008, 01:37:02
css, opera blog, blog, opera
...
Habe heute bissel rumgespielt mit den Datumseinträgen jedes Posts in Opera-Blogs bzw. speziell in meinem Opera Blog. Da leider nur der gesamte Eintrag mit einem Element und einer dazugehörigen Klasse umschlossen ist, kann man auch nur den ganzen Eintrag formatieren. Man kann also nicht davon die Uhrzeit ausblenden. Das habe ich aber gelöst durch eine Beschneidung des Kastens in der Höhe und ein overflow: hidden;. Damit wird das "Überstehende" verborgen. In wenigen ungünstigen Fällen verschwindet dabei auch das Jahr. Das verschwundene Jahr und auch die Uhrzeit jedes Blogeintrags kann man aber bei Bedarf sichtbar machen durch umschalten in den Benutzermodus bzw. Anzeige ohne Styles (CSS).
Wenn jemand eine Lösung weiß, mit CSS ein Javascript ausführen zu lassen, was den code ändert, bin ich um Hinweise dankbar. Der von OperaBlogs generierte HTML-Code sieht an der stelle so aus:
<p class="postdate">Wednesday, 8. February 2006, 12:50:14</p>
Er müßte dann ungefähr so modifiziert werden:
<p class="postdate"><span class="wday">Wednesday, </span><span class="mday">8.</span><span class="mon"> February </span><span class="year">2006</span><span class="time">, 12:50:14</span></p>
Dann könnte man alle einzelnen Bestandteile separat mit CSS formatieren.
siehe auch:
Erläuterungen zum Layout
Monday, 29. May 2006, 19:46:59
css, opera blog, howto, blog
Ich wurde gefragt, wie man den in meinem Blog auf der Startseite zu sehenden Link hinter der Grafik "
Thomas at Home" in Opera Blogs realisieren kann:
Hello Thomas:
Could you please tell me how to add a corner picture like "Thomas at
home" on your blog?
I tried but never succeed :-(
thanks
Ich habe geantwortet:
Das "Geheimnis" liegt im CSS. Wie du vielleicht gesehen hast, erscheint die Eckwerbung mit Link nur auf der Startseite des Blogs. Der trick ist, "etwas" in das Blog einzubauen, auf das man eindeutig verweisen kann (eindeutig ansprechbar). Bitte sieh dir mein sticky post an. Nun sieh dir bitte den Quelltext an. Du findest dort den folgenden Code:
< img src="http://www.th-o.de/img/opera/tathome.gif" id="zettel" />
Ich habe ihn eingegeben wie folgt (ohne Leerzeichen nach "<"):
< IMG src="http://www.th-o.de/img/opera/tathome.gif" id="zettel">
Zusätzlich schau dir bitte mein Stylesheet an. Du findest dort den Style für #zettel.
#zettel {
position: fixed;
right: 0;
bottom: 0;
display: block;
/* height: 80px;*/
/* width: 80px;*/
content: url(http://www.th-o.de/img/opera/tathome.gif) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
z-index:9;
}
Der Style ist festgemacht am Bild (IMG). Bei andern Blogs habe ich gesehen, daß sie den Style für die Eckwerbung an den Link Get your own blog geheftet haben (dann kann man allerdings keinen eigenen Link hinterlegen). Dieser Link hat eine einmalige ID, an der man den Style festmachen kann, die ID ist "get". So bekommst du die Eck-Werbung auf jeder Seite deines Blogs.
Friday, 12. May 2006, 17:58:37
opera, userjs, howto, firefox
...
via
Opera Community ForumOpera hat sogenannte Tooltips. Wenn man mit der Maus über einen Link fährt, dann wird ein gelber Kasten mit der hinterlegten Internetadresse angezeigt. Diese Anzeige kann man in den Optionen Ausschalten über:
Einstellungen -> Erweitert -> Browser -> [_]Tooltips zeigen
Wenn man dies ausschaltet, werden aber nicht mehr die mit dem Attribut
title des Elementes
A eingestellten Hinweise gezeigt, die in den Tooltips oberhalb der Adresse eingeblendet werden. Manchmal sind dort aber wichtige Informationen hinterlegt. Man kann aber die Anzeige von
title und Adresse nicht separat einstellen, es geht nur beides oher keins von beiden.
Es gibt nun ein
user.js, also ein Benutzer-JavaScript, welches genau das realisiert. Man kann sich die
title anzeigen lassen und die Adresse aber nicht. Dazu geht man wie folgt vor:
- Tooltips wie oben genannt ausschalten. Einstellungen -> Erweitert -> Browser -> [_]Tooltips zeigen
- das Script Multipopup UserJS herunterladen
- In Opera das Verzeichnis angeben, wo das JavaScript hingelegt wird in den Einstellungen: Einstellungen -> Erweitert -> Inhalte -> JavaScript-Optionen -> User-JavaScript-Dateien
- das im Archiv oberste multipopup.js in das oben angegebene User-JavaScript-Verzeichnis kopieren/entpacken, aber ohne Unterverzeichnis
- eventuell Browser neu starten
Das Script funktioniert auch für Firefox. Im Archiv sind noch andere Versionen des Scripts mit andern Styles, auch externe Styles (CSS) der Boxen sind möglich.
Zusätzlicher Tipp: Bei gedrückter
Strg-Taste wird die Adresse trotzdem gezeigt.
Friday, 24. March 2006, 17:17:54
firefox, opera, css
im Zusammenhang mit dem Beitrag über die
Alpha-Version von Firefox 2.0 sei erwähnt, daß der
ACID2-Test anscheinend doch recht schwierig ist. Golem hatte über die neue Vorabversion des Firefox
berichtet. Hier scheint der Firefox noch Probleme zu haben:
Die Frage ergibt sich, wie stark die Rendering-Engine bis zur endgültigen Version noch geändert wird.
Die
Vorschauversion zu Opera 9 TP 2 liefert folgendes Bild:
Schon ziemlich nah dran. Nur die Augen müßten noch deutlich werden und die rote Fläche schwarz.
Monday, 13. March 2006, 18:17:57
browser, css, opera, firefox
...
wie in
Opera Watch berichtet, besteht die aktuelle Vorschauversion des Opera Browsers den
ACID2 Test. Bitte die URL des Tests auch mal mit den anderen Browsern Firefox und Internet Explorer testen. :-D
Monday, 6. March 2006, 12:12:35
opera, browser, css, howto
...
mit einem Bookmark kann dies leicht herausgefunden werden:
javascript:alert(document.compatMode);
Man kann dieses Bookmark, wenn man es häufiger brauchen sollte, auch in die persönliche Leiste aufnehmen. Dieser Status entscheidet teilweise stark über die Darstellung im Browser. Der Standardmodus hält sich eng an die offiziellen Darstellungsregeln wie CSS. Der Modus "Quirk" (
für "Eigenheit") wird benutzt, wenn kein standardkonformer Dokumenttyp der Seite erkannt wurde. Die Entscheidung wird bei Opera anhand der
Document Type Declaration getroffen. Opera hat dazu noch
weitere Erläuterungen. Beachtenswert sind bestimmte Feinheiten. Z.B. wird eine HTML 4.0 Deklaration (
strict.dtd) auch mit fehlender DTD-Adresse (
Document Type Definition) als standardkonform anerkannt, wogegen ein Transitional Dokumenttyp (
loose.dtd) ohne URL als nicht Standard-konform betrachtet wird. Hier hilft nur die Angabe einer URL, womit die vollständige Document Type Deklaration dann so aussieht:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
Auch Firefox und IE unterscheiden nach Standard- und Quirks-Modus.
Friday, 3. March 2006, 00:42:37
opera blog, opera, css, blog
...
Das Script wurde geändert und liest die Liste der Tags nun selbst und man muß die Liste nicht mehr mit cut and paste (
markieren, kopieren und einfügen) selbst herstellen.
siehe dazu:
tag cloud für Opera Blog
Tuesday, 28. February 2006, 04:30:23
blog, opera, opera blog, social software
...
(
Änderung am 03.03.2006)
Ich habe Gefallen an diesen Tag Clouds wie bei del.icio.us verwendet gefunden. Allerdings gibt es soetwas bis jetzt nicht für die Tags in Opera Blogs. Ich habe nun selbst eine Umsetzung probiert.
Tag Cloud Opera BlogZur Erstellung dieser Seite wurde mit einem selbst erstellten Perl-Script eine Liste generiert. Basis bildet die Tag-Liste von "Preferences--Tags"
(von Hand markiert und cut and paste) bereinigt, so dass nur die Tags übrig bleiben , die das Script ausliest und schreibt als Protokoll die Liste auf Festplatte als reine Text-Datei. Das Perl-Script arbeitet die abgespeicherte Liste der Tags ab. Zuerst teilte ich gleichmäßig in 5 Kategorien nach Anzahl von Postings in Schritten von 20%. Ich hatte zuerst Probleme, da sehr viele Tags sehr wenige Postings haben. Dadurch wurden nur sehr
wenige Tags (3?) ganz groß geschrieben. Die zweit grösste Kategorie existierte dadurch überhaupt nicht. So habe ich die Berechnung umgestellt auf selbst definierte Prozentstufen: 5%, 10%, 25%, 50% und darüber. Dabei ist die häufigste Anzahl=100%. Die Tags enthalten nun Links auf die Postings zu diesem Tag. Bei einem Hover oder Mouse-over wird durch einen hinterlegten "Title" angezeigt, wie viele Postings absolut zu diesem Tag existieren. Bei mir lief das Script lokal auf dem PC und holt sich mit wget die Seiten aus der Opera Community, aus denen es sich die Zahlen heraus sucht. Das abgespeicherte Ergebnis kann dann in eine selbst erstellte HTML-Seite mit cut and paste eingefügt werden.
Die Größe der Tags wird momentan mit einem Attribut style im das Tag umschließenden a bestimmt. Zusätzlich wird noch eine der Kategorie entsprechende Klasse (class)
kat0 ..
kat4 vergeben, so daß die Tags auch noch über CSS formatiert werden können.
Wednesday, 15. February 2006, 19:09:58
css, opera, opera blog, blog
...
Achtung:Diese Seiten sehen mit dem Microsoft Internet Explorer nicht korrekt aus, da dieser das CSS2 nicht korrekt darstellt. Die erste Empfehlung (recommendation) von CSS2 erfolgte vom
W3 Consortium (W3C) am 12 Mai 1998. Korrekte Darstellung bieten
Opera und
Mozilla bzw.
Firefox.
Wem es womöglich aufgefallen ist, mein Blog hat eine stylistische Umgestaltung erfahren. Drüber gestolpert bin ich über
jonimueller, beeindruckt wegen der völlig gewandelten Gestaltung gegenüber den vorgegebenen Vorlagen fand (und finde) ich
ricewood und die Anleitungen und detailierten howto's hab ich über die
Opera Community Startseite gefunden bei
SerbianFighter mit seinem
Pimp my Blog. Danke! :-D
Zum Vergleich hier mal ein Link auf ein Blog mit dem Original Layout, auf dem meine Änderungen (sämtliche nur über CSS) aufsetzen:
Merlinband. Mein Stylesheet sieht so aus:
Zeitung auf Holztisch. Die Bilder sind alle selbst nachbearbeitet. ;-) Die Kulisse von Dorfen ist von der Seite des
Pfarramt Dorfen. Die Pin bei einem STICKY POST wie dem
ersten Post ist aus dem Internet, der Stempel links neben jeder Überschrift auch. Alles natürlich nachbearbeitet.
Die Grafiken für den Menübalken oben sind alle einzeln händisch Pixel für Pixel gemalt. Das No-IE Icon ist auch selbst erstellt. Wie man sehen kann, ist es das normale Icon des Internet Explorer 6.0 unter Windows XP in doppelter Größe. Das rote Kreuz ist händisch mit einer neuen Freihandmaske erzeugt. Die Grafik für die Zitate ist mit Werkzeug Text im Grafikprogramm mit der Schrift "Times New Roman" Zeichen 187 (hex:BB) erzeugt.
Die Bilder:Zeitung rechts -->
Titel Background vorher
Titel Background nachher
Stempel bei verlinkten Titeln
Pin-Nadel bei Sticky Post
neues Zeichen für Quote
Menü normal
Menü Wahl + Hover
siehe auch:
Monday, 29. August 2005, 11:05:48
opera blog, nofollow, blog, opera
...
So kommt man drauf:
(über
Matt Cutts)
Realisierung über das User-Stylesheet
- mit Firefox:
- find your profile directory
- bearbeite userContent.css
- a[rel~="nofollow"] {
border: thin dashed firebrick ! important;
background-color: rgb(255, 200, 200) ! important;
}
- mit Opera:
- finde User-Stylesheet: Alt-P--Erweitert--Inhalt u. Darstellung--Eigenes Stylesheet
- Autorenmodus und Benutzermodus:
[X] Mein Stylesheet
- bearbeite user.css
- a[rel~="nofollow"] {
border: thin dashed firebrick ! important;
background-color: rgb(255, 200, 200) ! important;
}
Tuesday, 2. August 2005, 13:35:33
opera, css
via
LarsOpera verwendet einige
Anstrengungen auf das weitere Vorantreiben der Kompatibilität mit Standards. Dazu gibt es den
Acid 2 Test vom
Web Standards project. Wie der Beitrag unten
zeigt, ist man mit einer internen Version dabei schon sehr weit gekommen.
Wednesday, 6. July 2005, 13:49:58
css
