seeseekey.net

Der pre Tag dient dazu einen Text wie­der­zu­ge­ben wie er ein­ge­ge­ben wurde. Das ist an sich auch ganz schön, kann aber bei klei­nen Auf­lö­sun­gen oder einem responsiven Design zum Pro­blem wer­den. Den dort wird ent­we­der das Lay­out zer­schos­sen oder der Inhalt des pre Tags durch eine over­flow CSS Anwei­sung abge­schnit­ten. Abhilfe schafft hier:

pre
{
        white-space: pre-wrap;
}

im CSS. Dadurch wird der pre Tag im Zwei­fels­fall umge­bro­chen und bleibt somit lesbar.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://www.css4you.de/Texteigenschaften/white-space.html
http://blog.bissinger.biz/zeilenumbruch-im-pre-tag/
http://de.selfhtml.org/html/text/praeformatiert.htm

Responsives Design ist schon eine tolle Sache. Je nach den Fähig­kei­ten des Aus­ga­be­ge­rä­tes wird die Web­seite ange­passt. Vor eini­gen Wochen habe ich mich auch daran gemacht und mein Design um eine reponsive Kom­po­nente erwei­tert. Das ganze sieht auf klei­ne­ren Gerä­ten nun so aus:

Dabei wird per CSS geschaut ob eine bestimmte Min­dest­breite unter­schrit­ten wird:

@media screen and (max-width: 850px)
{
 ...
}

Wenn das der Fall ist wer­den bestimmte Ele­mente (wie die Sider­bar) aus­ge­blen­det, die Größe der Schrift­art ver­än­dert, et cetera. Nur gibt es anschei­nend ein Pro­blem mit unge­klär­ter Ursa­che. Wenn ich auf einem Mobil­ge­rät die Seite „Blog“ auf­rufe so ergibt sich fol­gen­des Bild:

Er igno­riert anschei­nend das ange­passte CSS für Bild­schirme klei­ner 850 Pixel und zeigt statt­des­sen die „nor­male“ Seite an. Dies pas­siert auf allen getes­te­ten Gerä­ten und auch nur auf der Blog Seite. Nun zum Rät­sel: Woher kommt das? Über Ideen zur Lösung des Pro­blems würde ich mich freuen

Wei­tere Infor­ma­tio­nen gibt es unter:
http://www.elmastudio.de/webdesign/webseiten-optimierung-fur-mobile-gerate-verschiedene-losungen-im-vergleich/
http://www.elmastudio.de/webdesign/diskussionsanregung-wie-wichtig-ist-die-webseiten-optimierung-fur-mobile-gerate-heute-schon/

Als ich an einem Word­Press Theme baute, hatte ich das Pro­blem das es die Absätze nicht rich­tig dar­stellte. Nach eini­ger Weile und dem stö­bern in ande­ren The­mes ent­deckte ich das ein einfaches:

.entry p
{
    margin-bottom: 1em;
}

in der style.css die­sen Umstand behebt. Danach wer­den die Absätze kor­rekt angezeigt.

Bei der mobi­len Anwen­dungs­ent­wick­lung steht man vor dem Pro­blem das man für jedes Sys­tem meist eine andere Spra­che sowie andere Klas­sen­bi­blio­the­ken benut­zen muss. In diese Lücke springt Pho­ne­Gap, wel­ches vor kur­zem in der Ver­sion 1.0 erschie­nen ist. Dabei han­delt es sich um ein quell­of­fen­des Frame­work mit wel­chem Anwen­dun­gen in Java­Script, HTML und CSS geschrie­ben wer­den kön­nen wel­che dann mit dem nati­ven Ele­men­ten der jewei­li­gen Platt­form auf dem Gerät laufen.

Dabei ist es mit Pho­ne­Gap mög­lich Anwen­dun­gen für Android, iOS, webOS, Micro­soft Win­dows Mobile, Nokia Sym­bian OS und RIM Black­Berry zu schrei­ben. Bezo­gen wer­den kann das Frame­work dabei unter http://www.phonegap.com/.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://en.wikipedia.org/wiki/PhoneGap
http://www.pro-linux.de/news/1/17341/phonegap-10-veroeffentlicht.html

Die Syn­tax einer Web­seite sowie deren Ein­hal­tung der Spe­zi­fi­ka­tion (XHTML, HTML et cetera) kann man leicht mit Tools wie dem Val­idome (http://www.validome.org/) über­prü­fen. Bei CSS Dateien wird dies etwas schwie­ri­ger. Mit CSS Lint gibt es aber nun seit eini­ger Zeit ein Open Source Tool wel­ches genau die­ses leistet.

Unter http://csslint.net/ kann man seine CSS Datei hin­ein­ko­pie­ren und die­ses auf Feh­ler prü­fen las­sen. Nach der Prü­fung bekommt man eine Liste mit Feh­lern und War­nun­gen wel­che man in die Ver­bes­se­rung der CSS Datei ein­flie­ßen las­sen kann.

Wei­tere Infor­ma­tio­nen gibt es unter:
http://www.golem.de/1106/84230.html

Unter der Web­seite http://www.colorzilla.com/gradient-editor/ fin­det man einen Gene­ra­tor wel­cher CSS Gran­dien­ten erzeugt. Er besticht dabei durch seine Kon­fi­gu­ra­ti­ons­mög­lich­kei­ten und ein­fa­che Hand­ha­bung. Ein sehr schö­nes Web­tool

Manch­mal steht man vor dem Pro­blem das man eine HTML Tabelle hat, wel­che man schnell gra­fisch auf­wer­ten möchte ohne all zu viel rum­zu­pro­bie­ren. In die­sem Fall hilft CSS Table Gal­lery in der man sich die pas­sende CSS Datei her­un­ter­la­den kann. Zu fin­den ist diese unter http://icant.co.uk/csstablegallery/tables/96.php. Im Moment sind in ihr 67 Designs für Tabel­len enthalten.

Der visu­elle Edi­tor von Word­Press hat eine ganz inter­es­sante Eigen­schaft bei man­chen The­mes. Sobald man im visu­el­len Edi­tor etwas schreibt und dann ein Bild ein­fügt und danach einen Text schreibt so taucht die­ser rechts neben dem Bild auf, anstatt unter dem Bild.

Die Lösung ist es eine editor-style.css wel­che in das The­me­ver­zeich­nis gepackt wird. In die­ser sollte dann fol­gen­des stehen:

html .mceContentBody {
 max-width: 640px;
}

Damit wird die maxi­male Breite im Edi­tor beschränkt was die­sen Effek­ten vor­beugt. Nun muss die CSS Datei noch in der functions.php regis­triert wer­den. Das ganze sieht dann so aus:

//Init
add_action( 'after_setup_theme', 'ocean_setup' );

//Setup
function ocean_setup() {
 add_editor_style();
}

Damit ist das Pro­blem dann gelöst

Da kauft man sich eine DVD und muss dann fest­stel­len das man sie nicht abspie­len kann weil die DVD mit dem Con­tent Scram­ble Sys­tem kurz CSS „geschützt“ wird. Geschützt des­halb in Anfüh­rungs­zei­chen weil CSS wie der Chaos Com­pu­ter Club so schön sagte: ein „lai­en­haf­tes Ver­schlüs­se­lungs­sys­tem“ sei. Was also muss man tun damit man sol­che DVDs unter Ubuntu abspie­len kann? Es müs­sen einige Klei­nig­kei­ten nach­in­stal­liert wer­den. Dazu öffnet man eine Kon­sole und gibt fol­gen­des ein:

sudo apt-get install libdvdread4
sudo /usr/share/doc/libdvdread4/install-css.sh
sudo reboot

Nach dem Reboot sollte das ganze dann funk­tio­nie­ren, so das z.B. VLC (Video­Lan) das ganze abspie­len kann.

Wei­tere Infor­ma­tio­nen gibt es unter:
https://help.ubuntu.com/community/RestrictedFormats/PlayingDVDs
http://de.wikipedia.org/wiki/Libdvdcss
http://de.wikipedia.org/wiki/Content_Scramble_System

Auf der Suche nach einem klei­nen Skript wel­ches mir meine CSS Dateien for­ma­tiert bin ich über die Seite http://www.lonniebest.com/ gestol­pert. Dort fin­det man unter http://www.lonniebest.com/FormatCSS/ ein Skript wel­ches eine CSS Datei hübsch for­ma­tiert wie­der aus­gibt. Sehr schön das ganze

In den let­zen Tagen habe ich ein Lay­out mit­tels CSS defi­niert. Bei dem gan­zen han­delte sich es um ein Spal­ten­lay­out. Nach eini­gem rum­pro­bie­ren war ich dann doch der Mei­nung das ich mir dazu erst ein­mal etwas fun­dier­tes zu Gemüte füh­ren sollte

Dabei sind mir zwei Sei­ten beson­ders ins Auge gefal­len. Ein­mal ist das die Seite http://www.css4you.de/ auf der die Mög­lich­kei­ten von CSS über­sicht­lich prä­sen­tiert wer­den. Spe­zi­ell mit dem Spal­ten­lay­out befasst sich ein Arti­kel von SELFHTML Aktu­ell unter http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout.