Taxi Driver, Design, CSS
Das wird der beste Eintragstitel des Jahres - oh ja. Momentan brauch ich wieder mal jede Abwechslung, die zu haben ist. Ich war nie ein Freund von Weblogs wo die Leute ihre persönlichen Sachen ausbreiten, daran hat sich eigentlich auch nichts geändert. Darum wird auch das hier kein persönliches RL-Whine Topic.
“Loneliness has followed me all my life. Bars, cars, sidewalks, stores, everywhere. There´s no escape.” Travis Bickle
Taxi Driver, oh Gott wie oft hab ich den nun schon gesehen: 10, 20, 30 mal? Der Film ist brilliant. Wenn man glaubt, das übelste, persönliche Wrack zu sein, dann kommt Taxi Driver daher und reisst einen noch weiter nach unten. Das ist immer noch der beste Scorsese! Es ist schwer geworden eine passende Abwechslung zu finden die mich ausreichend ablenken. Ein gutes Dutzend Einträge sind grad gleichzeitig im Entstehen. Neben dem Schreiben hilf momentan am Besten: Web- bzw. CSS Design!
Das Zeug ist perfekt: meist logisch, knochentrocken und ab einem Punkt durchaus komplex. Auch wenn davon in Kürze nicht viel wirklich fertig wird, die Abwechslung und der Aufwand tun extrem gut. Es ist besser drüber zu grübeln wieso das eine gemeine DIV nicht so wirklich das tut, was es sollte, als darüber zu verzweifeln wieso … ach lassen wir das. Zurück zum Blog Alltag.
Inline vs. Block Element
Die Überschriften innerhalb von Textblöcken haben es mir angetan. Das Problem: ein h-Tag stellt selbst ein Block Element dar und das funktioniert nun mal nicht als Inline Element z.b. innerhalb eines p-Blocks. Der erste Versuch einer Lösung war ein Test mit span-Tag: Versuch 1.
CSS:
h3 {
font: 140% Georgia, Times, "Times Roman", serif;
color: #C3B19D;
margin: 0;
padding: 0;
line-height: 124%;
letter-spacing: -1px;
}
.inlineHeadLeft {
width: 50%;
float: left;
margin: 0;
padding: 12px 10px 12px 0;
display: inline;
font: 135% Georgia, Palantino, "Times New Roman", serif;
color: #C3B19D;
line-height: 124%;
letter-spacing: -1px;
}
HTML:
<p>Lorem ipsum...
<span class="inlineHeadLeft">
<h3>Headline... </h3>
</span>
</p>
Ja der Code ist ziemlich übel, aber es funktionierte zumindestens im Firefox erstaunlich gut. Das span-Tag tarnte das h3-Tag als Inline Element. Wo dies mal wieder absolut nicht funktioniert, ist der gute alte Internet Explorer. Grrrr. Nicht nur, das im IE der p-Block zerbricht, auch sämtliche Paddings und Margins sind im IE, mit der Lösung, buggy.
Ja ich weiss, dass dies mit einem einfachen einzelnen Span Tag leicht machbar ist, momentan ist dies auch meine Lösung für den Moment.
HTML: <p>Lorem ipsum... <span class="inlineHeadLeft">Headline... </span> </p>
Mit dieser Lösung hab ich allerdings ein Problem. Der Inhalt dieses Span-Tags hat nichts im p-Block verloren. Es ist eine Art Zwischenüberschrift, die separat vom p-Block stehen muss. Das Stichwort hier lautet Accessibility. Um das h-Tag beizuhalten, muss es aus dem p-Block raus. Aus einem p-Block werden somit 2 separate mit jeweils separatem Margins und Paddings, womit optisch eine Lücke entsteht, die nur per extra Einstellungen für das jeweils dem gefloatetem H-Block folgendem Absatz, zuzuordnen wäre, viel zu umständlich. Da muss es noch eine bessere und einfachere Lösung geben.
thinking outside the box
Damit hätte ich die Quoten Catch Phrase hinter mir. Worum geht es? Ein Projekt was momentan entsteht ist auch die fünfte Version dieser Website hier. Ich bin momentan in der Konzeptionsphase. Eine Idee hier, eine Idee da und irgendwann kommt was Vorzeigbares bei raus.
Ich möchte weg, vom klassischen Blog Look aber das ist überaus schwer, denn das 2 Spalten Layout funktioniert einfach sehr sehr gut und das ist ein Vorteil den ich so schnell nicht wegschmeissen kann. Ich hänge immer noch zu sehr an festgefahrenen Ideen, an denen ich mich dann viel zu schnell satt sehe. Das neue Design muss minimalistisch und dennoch charakterisch sein mit starkem Wiedererkennungswert.
Mitlerweile hab ich auch das Buch zum CSS Zengarden durch. Sehr zu empfehlen, nicht weil ich viel neues gelernt habe, sondern weil das Buch sehr schön Lösungen zu bestimmten Problemen erläutert dazu liest es sich sehr angenehm. Der Zengarden bietet wundervolle Beispiele, das brauch ich sicher nicht mehr zu erwähnen.
Ich würde gern einen anvisierten Termin für den neuen Internet Explorer wissen. Das Thema PNG wird dann erstmals zur Alternative, damit wären eine paar schicke Tranzparenzspielerein möglich, naja man hat nie zu viele Photoshop Website Templates und momentan sprudeln die im Dutzend. Damit hab ich die Kurve von DeNiro, über das span-Tag bis hin zum Website Upgrade geschlagen, nicht übel. Das war es für heute. /bye
1 Kommentar
Für diesen Eintrag wurden die Kommentare geschlossen.
Das mit der Abwechslung vom Blog Lauyout kennen ich. Meine Ergebinsse zu dem Thema:
http://kidaishoran.buddhabot.de/ [Die Idee ist allerdigns von einem CD-Rom Design]
http://greenhouse.buddhabot.de/ [Leider zu eng geworden]
Ich bin gespannt auf deine Lösungen.