zurück zur Startseite
  


Zurück XHTMLforum > Sonstiges > Fragen, Konstruktive Kritik, Lob / Bekanntmachungen > http://csskueche.xhtmlforum.de/
Seite neu laden des hundes hexenküche

 
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.05.2005, 09:45
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard des hundes hexenküche

na gut,

http://csskueche.xhtmlforum.de/index.php?css=5

dann will ich auch mal. (anm.: wie ich gerade feststelle, befinden sich in diesem text kaum details zur technik, wer sich also dafür interessiert, braucht praktisch garnicht erst mit dem lesen anfangen)

ursprünglich hatte ich gar kein interesse an einer teilnahme und wie immer auch keine zeit (u.a. wegens der gepardenforelle). philippps beitrag zum thema nicht-anzeige des background im body/html hat dann irgendwie doch mein interesse geweckt, drei tage vor dem einsendeschluß

ursprünglich wollte ich den screen vertikal halbieren, schwarz/weiß, mit nem schönen bild (a la dieser fehlerseite), welches dann aber wohl der zensur zum opfer gefallen wäre.

dadurch wäre das design dann recht flexibel gewesen, die idee habe ich aber dann recht schnell fallen lassen, ich weiß nicht mehr genau, warum. also blieb eigentlich nur das zentrierte, welches auch auf einen 800er paßt.

die frau am seitenende war dann das erste bild. das rot, welches man ab und an mal findet, stammt von ihren lippen. der rest ist scharz/weiß/verschiedene grautöne, und ein wenig grün (abbr), welches aus dem stiel der gelben paprika stammt.

die h1/h2 habe ich nebeneinander gesetzt, weil ich mir dachte, daß das sonst niemand machen wird ^^ dadurch ergab sich auch die schmale textbreite, die ich eigentlich ganz nett finde - blocksatz (eigentlich dem print vorbehalten) bot sich da dann auch an. die idee, den text beim hover lesbarer zu machen, habe ich wohl mal im csszengarden aufgeschnappt.

ich hatte teile des textes ursprünglich noch per relativer positionierung hin- und hergeschoben, habe es dann aber aufgrund größerer unterschiede in den verschiedenen browser (die ich auch nicht beseitigen konnte) verworfen.

die texte hatten auch ursprünglich eine 40px breiten rahmen, was einen optischen sehr netten effekt erzeugt hat - mir war vorher nie bewußt, daß die border sich dann im 45° Winkel aneinanderlegen - nach der ersten entzückung habe ichs dann aber wieder entfernt.

dadurch, daß ich mich irgendwann entschlossen hatte, irgendwas themenrelevantes zu machen, sind die h3s auch so hoch geworden - ich habe ja recht schöne, passende bilder gefunden.

bei den h3s sollte der erste buchstabe eigentlich gleich groß wie der rest des textes sein, zusammen mit dem lowercase sah das ganz nett aus. so, wies jetzt ist, ist aber auch ok. lowercase/uppercase benutze ich sowieso gern und in dem css auch noch häufiger.

im header hatte sich zuerst ein schönes sonnenblumenfeld, welches zwar themenfremd war, aber echt super aussah. ich habs dann verworfen, und mir die schöne arbeitsküche gesucht. die war anfangs nur halb zu sehen, neben dem menu - zum glück habe ich sie dann über die gesamte breite verteilt - wirkte gleich viel besser. die idee, das menu erst beim hover erscheinen zu lassen, kam mir dann auch irgendwie.

den gestreiften hintergrund habe ich mir auch bei csszengarden abgeschaut, in dem design, welches ich auch bei der gepardenforelle nachgemacht/geklaut habe.

wie ich auf die idee kam, den title der abbr mit anzuzeigen, weiß ich nicht mehr ... doch, sie entstand wohl aus einem meiner print-stylesheets, wo die hrefs auf diese art angegeben werden. daraus folgte dann auch der erste zusatz-text (im footer, ich hatte gerade musik gehört ... wer kennt den song? niemand? ok.)

ich habe in letzter zeit die pseudos after/before nicht mehr verwendet, wegens dem ie, aber hier sah ich meine chance. allerdings habe ichs wohl etwas übertrieben, mich hat es dann gepackt, und ich habe bei fast jedem element irgendwie noch after/before reingequetscht - was eigentlich dem konzept von css widerspricht, da ich ja zusätzlichen inhalt eingefügt habe ... hmm.

das einzige, was mir garnicht gefällt, ist das icon bei den externen links ... stammt einfach aus web/windings ... naja, auch da fehlte mir dann die lust/zeit. sowieso wurden viele kleine details nicht umgesetzt, weil mir die zeit fehlte. das stylesheet ist auch so schon groß genug.

viele sachen sind auch einfach nur entstanden, weil noch soviel freiheitsgrade vorhanden waren, so z.b. die gedrehten vertikalen und die horizontal gefadeten 'ranken'.

wie ich die größere schnecke (bei 'wachstum') gefunden habe, weiß ich auch nicht mehr ... zumindest habe ich gleichzeitig die zweite (kleine, im footer) gefunden ... diese wurde geteilt, um den effekt zu erzeugen, daß sie von einem in den anderen bereich kriecht. zum küchenthema habe ich mir dann noch das obst im header gesucht ... sind euch die zwei schoten aufgefallen, die übereinandergelgt ein X ergeben ^^ ... leider hatte ich keine lust mehr, daß besser mit dem xhtml in verbindung zu bringen ...

sind außerdem jemanden die kaffeebohnen aufgefallen, die sich beim hover verändern? einer der vielen gimmicks, die eigentlich wegen over-gimmickierung rausfliegen sollten, aber trotzdem geblieben sind.
das kaffee-thema paßt auch im bereich 'eigene rezepte' ganz gut - auf mich bezogen.

der link im footer, der auf den nächsten contest verweist, ist übrigens (eigentlich) so formatiert, daß er erst sichtbar wird, wenn dort wirklich ein ziel definiert wurde (#footer a[href="#"]) ... ich sehe gerade, daß dort wohl noch ein kleiner fehler sitzt, naja.

gehackt wurden z.b. alle sachen, die auf einem anderen als dem <a> hovern, außerdem die transparenz-simulation per schachbrett für den ie. glücklicherweise bleibt der text dabei noch lesbar. ie-spezifisches wurde meistens/immer mittels * html selector definiert, dinge, die der ie nicht sehen sollte, mittels attribut-selektor (#navigation[id] ul ...)

die idee, alle stati der link-bgs in eine datei zupacken, habe ich, soweit ich mich erinner, von wahsaga ... es hat den nicht zu unterschätzenden vorteil, daß beim hover gleich das bild da ist und nicht erst geladen werden muß. die bilder für #active und :visited habe ich dann auch gleich mit hineingenommen.

irgendwie habe ich beim betrachten des nackten quellcodes dann auch die idee gehabt, das irgendwie mit einzubauen ... die umsetzung gefällt mir auch nicht besonders, aber ich fand das metaphorische darin so genial. daraus folgte dann der text ganz oben, und aus den ganzen zusätzen der erklärende text unter dem menu. aus der positionierung ergab sich dann auch die zweite, höher gesetzte ebene ... auch nicht so schön, wie ich finde.

dort (im menu) habe ich dann auch nochmal exzessiv die pseudos verwendet, im opera sogar noch counter (nachdem ich endlich begriffen hatte, wie die syntax lautet). das alt/neu in klammern leitet sich übrigens aus dem visited-status des links her, falls ihr es nicht mitbekommen haben solltet ...

den lateinischen satz auf dem rechten rand (teil der ursprünglichen aufzeichnung der fermatschen vermutung) hatte ich gerade zuvor gelesen ... beim warten auf meine frau, die einkaufen war.

zwei gimmicks, die ursprünglich noch in den freiheiten waren, dann aber rausgeflogen sind, will ich hier trotzdem kurz noch nennen, da ich die bilder dafür extra noch 'angefertigt' hatte ...

das erste war ein stapel meiner bücher, die in zeitlicher reihenfolge (m)eine entwicklung ungefähr widerspiegelten ... angefangen von 'vor dem anfang' über 'web-publishing mit html', 'kreuz und quer', 'einstürzende neubauten', 'css - kurz und gut', 'rauschdrogen', 'kraftwerk - ich war ein roboter' bis hin zu 'defensive design for the web' und 'die zukunft ist fuzzy' ... war echt bedeutungsschwanger leider war das bild nachher viel zu klein, um erkennbar zu sein ...

das zweite war ein photo eines schreibtisches mit einem monitor, auf dem der ala-artikel Usability experts are from Mars, graphic designers are from Venus zu sehen war ^^

alles in allem bin ich total ohne konzept heran gegangen, das css ist mit den ideen gewachsen, und durch die ständige veränderung des grundlayouts auch recht chaotisch geworden.

schlußendlich habe ich noch ein kleines php-script geschrieben, welches die verwendeten grafiken samt dimension und größe auflistet.

mir hat der contest auf jeden fall spaß gebracht, neue erfahrungen, neues wissen, vorallem über die unterschiedlichen bugs in den verschiedenen browsern ...

irgendwie habe ich auch viel mehr über mich und meine intension gesprochen, als über technik und ...

es gäbe wohl noch viel zu sagen, aber ich denke, das reicht erstmal

falls ihr fragen habt (die im hauptthread noch nicht geklärt wurden), nur zu. das css ist zwar unkommentiert, sollte aber selbsterklärend sein.

mein eines ü wird als ? angezeigt, kann man da server-seitig etwas machen?

so richtig gefällt mir mein design nicht, so von den farben her.

wow, der text ist ganz schön lang geworden ^^
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Sponsored Links
  #2 (permalink)  
Alt 18.05.2005, 11:44
Neuer Benutzer
neuer user
 
Registriert seit: 11.05.2005
Beiträge: 23
steffen befindet sich auf einem aufstrebenden Ast
Standard

nachdem ich mich durch die langen Erklärungen gekämpft habe möchte ich auch mein Statement abgeben.

Erst mal ein dickes Lob - Du hast das Experiment auch als Experiment verstanden und mächtig viel aus dem CSS rausgeholt. Dabei hast Du viele Techniken angewandt, die (leider) auf vielen Browsern nicht zu sehen sind. Aber darum gehts ja gar nicht, das hat doch auch seinen Reiz, wenn die Seite auf allen Browsern gut aussieht, und dann kleine Schmankerl bei "besseren" Browsern sichtbar werden.

Der Header mit der Küche und dem transparenten Menü ist Dir super gelungen. Es hat den richtigen "Wow"-Effekt. Die Reaktion kam auch direkt von meiner Frau, die noch nichtmal den Namen CSS kennt

Die 2-Teilung im unteren Bereich gefällt mir nicht, der scrollbare Bereich wird dadurch sehr lang.

Die Bilder sind Spitze, und das Gimmick mit den Kaffebohnen ist klasse - das zeugt auch von Deiner Spielfreudigkeit.
Nur das Bild der Frau gefällt mir in dem Kontext nicht, ich sehe kein Bezug zum Rest. Durch den langen Scrollbereich ist es auch weit vom Rest entfernt.

Das einzige was ich objektiv nicht gut finde, das die Browser bei Deinem Layout ziemlich in dei Knie gehen. Ich habe nun wirklich keinen langsamen Rechner, aber bei Opera muss ich doch recht lange warten, bis er die Seite gelesen hat, Föxchen tut sich auch beim Menü und beim scrollen etwas schwer.

Insgesamt ist das Layout in meinen Augen eins der besten, zeugt von Geschmack und Experimentierfreudigkeit, Hut ab !
__________________
*** bloody greenhorn ***
Hommingberger Gepardenforelle
Sponsored Links
  #3 (permalink)  
Alt 18.05.2005, 14:15
Anonymous
Gast
 
Beiträge: n/a
Standard

schließe mich steffens meinung an!

das nächste mal sollte wirklich die kompatibilität der wichtigsten browser berücksichtigt.
dein layout ist wirklich sehr schön aber für den alltagsgebrauch im web nicht geeignet. setzen 6!

mein opera hat noch immer probleme mit deiner seite. sie wird jetzt zwar jetzt geladen aber um auf eine andere seite zu gelangen braucht mein opera fast 10sec.
  #4 (permalink)  
Alt 19.05.2005, 00:39
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2004
Beiträge: 990
psycho_dmr befindet sich auf einem aufstrebenden Ast
Standard

wah is das viel text, mir jetz zu viel!

aber eine sache, warum geht das menu nur bei mouseover auf?


"Sie lebten gl�cklich" ... oO (das liegt aber an css ... leider)
__________________
Wer sich über Kritik ärgert, gibt zu, dass sie verdient war.
Gaius Cornelius Tacitus (um 55 - nach 115), römischer Historiker und Politiker
  #5 (permalink)  
Alt 19.05.2005, 08:10
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von steffen
Die 2-Teilung im unteren Bereich gefällt mir nicht, der scrollbare Bereich wird dadurch sehr lang.
das empfand ich eigentlich als vorteil - gerade weil der text auch so kurz ist.

Zitat:
Das einzige was ich objektiv nicht gut finde, das die Browser bei Deinem Layout ziemlich in dei Knie gehen.
es erschließt sich mir auch nicht vollständig, woher das nun genau kommt. wie gesagt, opera 7.23 ist der einzige, in dem es wirklich super flüssig läuft ... ich habe die zigfach wiederholten hintergründe auch schon vergrößert, ohne daß es viel gebracht hat, mal schauen, wie es ist, wenn ich noch größer mache ...

Zitat:
das nächste mal sollte wirklich die kompatibilität der wichtigsten browser berücksichtigt.
ist doch kompatibel zu den wichtigsten browsern ... ^^
Zitat:
wah is das viel text, mir jetz zu viel!
steht auch nix wichtiges drin
Zitat:
aber eine sache, warum geht das menu nur bei mouseover auf?
damit man das menu erst einmal suchen muß, so als aha-effekt ... nein, habs irgendwann mal so probiert und dann so gelassen.
Zitat:
"Sie lebten gl�cklich" ... oO (das liegt aber an css ... leider)
ja, ich konnte nicht als utf speichern und hatte gehofft, daß phillippp es nochmal macht ...
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
  #6 (permalink)  
Alt 19.05.2005, 14:00
Anonymous
Gast
 
Beiträge: n/a
Standard Re: des hundes hexenküche

Zitat:
Zitat von derHund
mein eines ü wird als ? angezeigt, kann man da server-seitig etwas machen?
bei mir ist das ü ein kleines Quadrat. auch in anderen Beiträgen!

der grund dafür ist wohl der hier:

Sie lebten gl& #65533;cklich" ... das ü müßte wohl
Code:
&#_252;
notiert werden hab ich mir sagen lassen.
  #7 (permalink)  
Alt 19.05.2005, 18:47
Neuer Benutzer
neuer user
 
Registriert seit: 11.05.2005
Beiträge: 23
steffen befindet sich auf einem aufstrebenden Ast
Standard

nein, in utf-8 ist ü ein ü und braucht nicht maskiert werden.
Das ist ja gerade der Vorteil von utf-8, das man alles so schreiben kann wie es ist, utf-8 sorgt dann automatisch für die richtige Darstellung, egal in welchem Land auf der Welt das betrachtet wird.
Vorraussetzung ist aber, man speichert in utf-8 und schickt dem Browser das charset utf-8 mit.
__________________
*** bloody greenhorn ***
Hommingberger Gepardenforelle
  #8 (permalink)  
Alt 19.05.2005, 22:15
Anonymous
Gast
 
Beiträge: n/a
Standard

warum nun wird das ü falsch angezeigt?
  #9 (permalink)  
Alt 19.05.2005, 22:45
Neuer Benutzer
neuer user
 
Registriert seit: 11.05.2005
Beiträge: 23
steffen befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von legman
warum nun wird das ü falsch angezeigt?
weil es nicht als utf-8 gespeichert wurde.
__________________
*** bloody greenhorn ***
Hommingberger Gepardenforelle
Sponsored Links
  #10 (permalink)  
Alt 19.05.2005, 23:23
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von steffen
weil es nicht als utf-8 gespeichert wurde.
wurde das nicht schon mehrfach erwähnt ^^
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...
Sponsored Links
 

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Grafikposition mit scrollbarem DIV koppeln -- aber außerhalb des DIV? Eberh@rd CSS 15 03.11.2009 23:05
Zustand des Internets: Das Web wird langsamer Pascolo Offtopic 11 23.10.2009 11:55
Die offizielle Version des Internet Explorer 7.0 ist endlich da Webstandard Ressourcen 15 17.11.2006 17:25
3 Spalten, Breite des Inhalts dynamisch schmidtsmikey CSS 1 30.10.2006 12:39
Bildlaufleiste des IE unsichtbar machen Jürgen CSS 10 06.06.2003 16:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:07 Uhr.