Posts Tagged ‘HTML’

Dienstag, 23. Dezember 2008

Seitenumbruch in der Druckversion von Safari

Heute habe ich mir an Safari 3.2 die Zähne ausgebissen: Der Browser wollte partout keinen Seitenumbruch vor einem div drucken, obwohl ich diesem den CSS-Stil page-break-before:always; zugewiesen hatte.

Safari unterstützt dieses CSS-Attribut eigentlich seit Version 1.2. Doch was zum Teufel? … Unter Firefox wurde der Seitenumbruch vor dem Element tadellos gedruckt und div ist auch wie von W3C gefordert ein Block-Element, weshalb es sich hier offensichtlich um ein Browser-Problem handeln musste.

Nach einigem Pröbeln realisierte ich dann, dass das Eltern-div im CSS, welches für die Druckausgabe verwendet wurde (media="print" für Kenner), gefloated war. Nachdem ich diese Eigenschaft entfernte, wurde der Seitenumbruch problemlos gedruckt.

Tags: , , , ,
Labels: Allgemein

1 Kommentar | neuen Kommentar verfassen

Dienstag, 19. Februar 2008

Formulare mit CSS (und ohne Zeilenumbrüche) layouten

Wie man Formulare heutzutage layoutet (nämlich mit CSS und nicht etwa Tabellen), verzapfen unzählige Artikel im Netz. Einen sauberen Einstieg bietet beispielsweise Quirksmodes Tableless forms.

Auch hier wird wieder belohnt, wer die HTML-Spezifikationen kennt und spezifische Tags so einsetzt, für was sie eigentlich erdacht wurden. Bestes Beispiel in diesem Zusammenhang: Der <label>-Tag, welcher immer noch nicht allen professionellen Web-Entwicklern bekannt ist.

Eine Sache wird in vielen Artikeln hingegen nicht ausreichend erläutert: Wie kriege ich das Formular-Layout hin, ohne dabei <br>-Tags zu benutzen? (Zeilenumbrüche, für HTML-Unerfahrene – in der Regel <tt clear="all">, um mit dem Floats zurecht zu kommen …)

Heute nun habe ich mich noch einmal mit der Umbruch-Thematik auseinandergesetzt und kann folgende Lösung präsentieren, die zumindest in Firefox 2.x und Safari 3.x zu funktionieren scheint (ich schliesse mich Conrast.ie an und hasse MSIE6 ab heute öffentlich):

label {
 display:block;
 float:left;
 width:200px;
 
 clear:left;
}
input {
 display:block;
 float:left;
 
 clear:right;
}

Wichtig sind die clear-Anweisungen, die das Umbrechen der Floats steuern.

Tags: , ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Samstag, 8. September 2007

Tabellenlayout geht in Rente


Kiesen.ch new – Web 2.0
Originally uploaded by emeidi

Kiesen old – Web 1.0
Originally uploaded by emeidi

Da ich die letzten grossen Probleme der Umstellung mittlerweile gelöst habe, kann ich mich nun endlich der technischen Aufarbeitung meiner Arbeit zuwenden.

In den letzten Wochen habe ich die Web-Site der Gemeinde Kiesen einer Frischzellenkur unterzogen. Eine Auffrischung und Anpassung war dringend nötig – die Web-Site hat schon 5 Jahre auf dem Buckel. Ein Alter, das im schnellebigen Web-Bereich eindeutig dem Pensionsalter entspricht.

HTML

Zuerst wurde der HTML-Code des Inhalts tauglich für das Jahr 2007 gemacht. Dabei konnte ich natürlich auf die in den letzten fünf Jahren angesammelte Erfahrung zurückgreifen: Mittlerweile habe ich Tags wie h1-3 und p lieben gelernt. Im 2001 war ich durch eine kurze Anstellung bei nothing etwas verblendet geworden. Anstelle dass ich Überschriften mit dem von W3C vorgesehenen Titel-Tag (h1-6) versah, gab es bei mir so schöne (und sinnlose) Tags wie …

<span class="contentTextTitleFirstLevel">

PHP

Natürlich habe ich im selben Anlauf auch den PHP-Code angepasst – neben einigen problematischen Unterlassungen (XSS lässt grüssen) habe ich auch hier unnötigen Ballast abgeworfen und den Code lesbarer gemacht.

Layout

Der letzte und grösste Brocken war nun aber die Umwandlung eines tabellenbasierten Layouts (perfektioniert bei nothing – damals wohl noch gerade auf der Höhe der Zeit) in HTML/CSS2. Nach hunderten bis tausenden von Reloads (Apfel-R werden wohl auf meiner Tastatur als erstes kaputt gehen) schaut die Site nun wie gewünscht aus. Unter Safari und Firefox mehr oder weniger perfekt – unter Internet Explorer gibt es noch einige kleine Schnitzer, die ich zu beheben versuchen werde.

In Gedanken bin ich bei euch, lieber Bill Gates und liebe Frickler-Truppe des Internet Explorer-Teams. Dass man in Redmond auch 2007 die Sache mit offenen Standards nicht begriffen hat, zeigt wieder einmal die klassische Abstimmung um „Open“XML. Wer mehr über die Besonderheiten des Internet Explorers lesen will, ist bei IE und CSS eindeutig am richtigen Ort.

Tag und Nacht

Oben rechts habe mit dem faszinierenden Tool Websites as Graphs zwei Analysen des Code-Struktur.

Erste Auffälligkeit: Ich komme mit deutlich weniger HTML-Tags aus (jeder Kreis entspricht einem Tag). Dies hängt ganz klar mit dem Wechsel auf CSS zusammen: Einerseits sind in das Stylesheet die Positionierung ausgelagert, andererseits die Formatierung (Farbe, Schriften, Ränder, etc.).

Zweite Auffälligkeit: Tabellen gehören der Vergangenheit an. Jedenfalls dann, wenn sie zur Erstellung eines Layouts missbraucht werden. Auf der neuen Site werden Tabelle nur noch dazu genutzt, tabellarische Daten aufzubereiten.

  • blue: for links (the A tag)
  • red: for tables (TABLE, TR and TD tags)
  • green: for the DIV tag
  • violet: for images (the IMG tag)
  • yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
  • orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
  • black: the HTML tag, the root node
  • gray: all other tags

W3C ist pingelig und nervt

Als ich die frische Titelseite dem W3C HTML Validator zur Begutachtung vorlegte, kam ich natürlich – wie immer – nicht ohne Fehlermeldungen durch …

Vorhang auf! Halt …

Wohl im Laufe der nächsten Woche – sobald alle ausstehenden Tests durchgeführt werden konnten – werde ich die neue Version produktiv schalten.

Tags: ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen

Samstag, 8. September 2007

doctype strict und die vertical gap

Heute habe ich mir an einem CSS-Layout die Zähne ausgebissen:

Nachdem ich den doctype des HTML-Dokuments von transitional nach strict geschaltet habe, um das nervige Box-Model des Internet Explorers auszutricksen (Tabellen mit width="100%" in einem div sind in Firefox, Safari und Opera so breit wie gewünscht, nur der Internet Explorer zerschiesst das ganze Layout), gab es einen vertikalen Abstand von ca. 4 Pixeln zwischen einzelnen divs wie #header und #content.

Nach stundenlangem Pröbeln und mehreren erfolglosen Google-Suchen zum Thema fand ich endlich den massgeblichen Hinweis:

This time we set the vertical-align property of the object element to bottom. This aligns the bottom of the object with the bottom of the line box, eliminating the small gap we saw earlier.

Quelle: That mysterious gap under images and embedded objects

Ehrenwort? Wirklich? JA! Nachdem ich im Stylesheet

#header img {vertical-align:bottom;}

postuliert hatte, verschwand die nervige Spalte zwischen der Kopfzeile und dem Inhalt der Web-Site. Herueka!

Tags: ,
Labels: Web

Keine Kommentare | neuen Kommentar verfassen