Hauptsache pixelgenau in allen Browsern

Ich hab ja schon eine Menge Hässlichkeiten im HTML-Code einer Seite gesehen, aber womit ich es letztlich zu tun hatte, hat den Vogel abgeschossen. Ich musste ein "Layout" einer Seite weiterbearbeiten, die von einer erfahrenen Agentur fabriziert wurde. In diesem Layout wurde erst mal alles absolut positioniert. Wozu floaten und skalieren? position: absolute-Attribute in Verbindung mit top und left sind deine Freunde. Noch interessanter war das Abstands-Management. Margins und Paddings waren wohl zu gewöhnlich. Die beste Art des Abstand-Haltens geht über die Rahmenstärke. Willst du, dass das Bild einen Abstand von 20 pixel zum nebenstehenden Bild hat? Hau rein dat border-right: 20px solid white; (bei weißem Hintergrund). Das ist wahre Code-Schönheit. Achja ... und wer braucht schon einen Validator. Sind ja eh nur 14 Fehler in einer Seite (von denen 10 sehr leicht behoben werden könnten, würde man den Validator einmal anschmeißen). Aber sie haben wenigstens schonmal divs benutzt und Tabellen nur noch, um Formularelemente zu positionieren. Das ist ein Fortschritt in der Welt der Agenturen. In 10 Jahren hören sie vielleicht auch mal was von Semantik und leicht wartbarem Code.
Wednesday, August 8. 2007
Comments (4) | Trackbacks (0)
Defined tags for this entry: , ,
103 hits

Comments

Display comments as (Linear | Threaded)

1

YellowLed (Homepage) on 2007-08-09 03:37 (Reply)

Ich kann mir nicht helfen, aber bei position: absolute; muss ich immer an gephotoshoppte Zusammenklick-Sites denken, bei denen dann die einzelnen Elemente »festgezurrt« werden ... der weiße Rahmen hingegen erinnert mich an diese auch leicht werkmürdige Technik, faux columns über einen dicken, farbigen Rahmen zu simulieren. Damit allerdings margin/padding zu ersetzen, grenzt an eine Abenteuerlichkeit, von der Frontpagenutzer nur träumen können g
1.1

alp on 2007-08-09 09:25 (Reply)

Genau so war's auch, Design nach einer Photoshop-Vorlage. So nach folgendem Produktionsablauf: Grafiker macht ein Mockup und schmeisst die PSD-Datei rüber zum oben beschriebenen Super-Coder, der u.a. auch wichtige Formulare baut, die nur über JavaScript zu erreichen sind ;-)
1.1.1

YellowLed (Homepage) on 2007-08-09 15:02 (Reply)

Das ist dann ja noch ein Vorteil eines Linux-Systems: Man hat kein Photoshop. Und mit Gimp würde man nie auf die Idee kommen, Webseiten zusammenzuklicken ;-)
2

Boris (Homepage) on 2007-08-09 15:33 (Reply)

Das mit dem "border-right: 20px solid white;" ist der Freudebringer der Woche!
Da sprechen die wahren Webdesigner.

Aber ansonsten hättest du den Artikel nach dem ersten Absatz eigentlich beenden können (...fabriziert wurde.). Alles weitere wäre dann irgendwie bekannt gewesen...
;-)

Trackbacks

Trackback specific URI for this entry

No Trackbacks

Add Comment

BBCode format allowed
Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA


Über

Das hier ist das private Weblog von Alp Uçkan. Ich entwickle Websites seit 1997 und arbeite derzeit als freiberuflicher Frontend-Entwickler.

Specialp Features

fapulous Framework (neu!)
Das erste XHTML/CSS-Framework auf Basis der Faux Absolute Positioning-Technik. Beinhaltet viele performante Konstrukte. Der Stoff, aus dem professionelle Websites gemacht sind ... ;-)

monitorThis 1.0
With MonitorThis you can subscribe to 26 different search engine feeds at the same time.

Business Blogging Weeks
Blog-Serie über die Kommerzialisierung der Blog-Szene in 2005

Getaggte Artikel

neueste Leser-Kommentare:

ich-zitiere.de about Coole Filmzitate II.
06.02.2011 17:28
Lucky Number Slevin hat sowieso die besten Filmzitate! Hier noch ein paar sehr Gu [...]
mark about Tutorial: Custom 3 Column FAP Layout width Fapulous (Update)
21.01.2011 13:26
Ok, I will do this in the next few days, probably two weeks. I have to do some three [...]
alp about Tutorial: Custom 3 Column FAP Layout width Fapulous (Update)
21.01.2011 12:52
Dear Mr Binder, a free german translation of this tutorial would be highly apprec [...]

Archive

del.icio.us-Links

(More)