College Block Design

[nissl]

Hallo Leute.

Ich suche nach einem 'Template' das ich auf meine seite anpassen möchte.
Der Design Stil - wie der Titel verrät - soll College Block sein.

Leider finde ich garnichts und zum selbst machen bin ich Photoshop oder ähnlichem einfach zu schlecht.

Ich würde gerne einen div Container mit kariertem Hintergrund erstellen und dessen Header (ein weiterer div) soll die Ringbuchbindung darstellen.
Alternativ oder optional würde ich auch gerne bindung links oder oben variieren können. Ich weiss nämlich noch nicht was auf der Seite am Besten aussehn wird.

So oder so ähnlich stelle ich mir das vor. =)


Weiss jemand wo ich sowas herbekommen kann ? oder ist vielleicht selbst jemand fit in PS um mir da auszuhelfen ?

 

[stuzz]

Sieht in der Tat interessant aus. Wo hast du den Screenshot denn her?

 

[Daaron]

Ich hab mal (vor einigen Jahren) was sehr ähnliches gebaut und kann dir sagen: Das sieht zwar hübsch aus, ist aber unpraktisch.

1.) Responsive Design klappt kaum. Für kleine Displays, insbesondere Mobile Devices, müsstest du weite Teile des Layouts umstrukturieren.
2.) Wachsender Content lässt das Blatt immer länger werden, läuft über oder wird abgeschnitten. Alternativ hast du einen inneren Scrollbalken. Sowas sieht einfach nicht hübsch aus.
3.) Die Schaltflächen rechts musst du als Bilder lösen, außer du scheißt auf IE<=8. Dann hast du Zugriff auf transform:rotate(90deg)

Rein gestalterisch isses aber einfach.

- Das Gitter im Hintergrund kannst du mit jeder brauchbaren Bildbearbeitung sehr schnell anlegen. Da braucht es kein 500€-Photoshop, GIMP kann wirklich JEDE Aufgabe, der man als Webdesigner begegnet, genau so gut (oder gar besser, siehe Favicon) lösen. Erstell ein minimalistisches Gitter, dass du dann kachelst. (GIMP: Filter -> Render -> Muster - Gitter)
- Die Rundung der Ecken und die Schatten brauchen dich, wenn du auf IE8 scheißt, auch nicht kratzen. border-radius und box-shadow sind dein Freund.
- Die Löcher und Bügel links sind auch nur gekachte Grafiken. Mit CSS3 Multiple Backgrounds kannst du die perfekt über die Gitter-Kackeln legen, ohne zusätzliche Hilfscontainer anzulegen. Für IE<=8 brauchts natürlich Hilfscontainer... aber scheiß der Hund drauf. Wer den Schund benutzt ist selbst Schuld und verdient nichts hübsches.
- "Glossy"-Effekt auf den Menüs: kinderleicht mit nem CSS3 Verlauf.

 

[nissl]

Hi Daaron,

klingt interessant. das problem das ich hab ist, dass ich keinen Schimmer habe wie ich die Bügel (Ringlochbindung) hinbekommen soll oder herbekommen soll.

Das karierte Blatt als solches bekomme ich sicherlich hin, das problem stellen nur die 'metallischen' Ringe dar die ich gerne an das Blatt anfügen will.
Aber auch dein Vorschlag mit dem Schatten per CSS ist gleich mal auf meinem Notizblock gelandet. IE8, wie du oft erwähnst, da scheiss wirklich der Hund drauf. Ich werde die Seite für Chrome/Firefox in Desktopgrösse erstellen. Mobile Devices interessieren mich hierbei nicht, und der Internet Explorer kann mir gestohlen bleiben.

- Die Löcher und Bügel links sind auch nur gekachte Grafiken. Mit CSS3 Multiple Backgrounds kannst du die perfekt über die Gitter-Kackeln legen, ohne zusätzliche Hilfscontainer anzulegen. Für IE<=8 brauchts natürlich Hilfscontainer...

Hast du mir dazu noch Tip in form des Codeschnipsels?

Sieht in der Tat interessant aus. Wo hast du den Screenshot denn her?

Aus irgend einem Forum, weiss nicht mehr wo genau, war nur ein Produkt meiner googelei heute morgen.

 

[Daaron]

klingt interessant. das problem das ich hab ist, dass ich keinen Schimmer habe wie ich die Bügel (Ringlochbindung) hinbekommen soll oder herbekommen soll.

Wenn du keine perspektivischen Effekte haben willst... Was ist ein Bogen, wenn man genau von oben drauf guckt? Genau: Ein Rechteck mit nem Glanz-Effekt und/oder Helligkeitsverlauf.

Ich werde die Seite für Chrome/Firefox in Desktopgrösse erstellen. Mobile Devices interessieren mich hierbei nicht

Unsere eigenen Statistiken zeigen, dass (je nach Seite) 20-50% der Besucher mit Mobile Devices kommen...

Hast du mir dazu noch Tip in form des Codeschnipsels?

Nö, aber das ist echt trivial. Du brauchst:
- ne Grafik, die einen Bogen + Loch darstellt und zusätzlich transparenten Freiraum nach oben und unten hat
- background-repeat: repeat-y;

CSS3 Multiple Backgrounds würden das alles hübsch kompakt halten. Dazu gibts ne Menge Dokumentation.
Wenn du (die teilweise etwas missbräuchliche Verwendung von) Multiple Backgrounds in Aktion sehen willst: http://sonnenkaefer-ev.de/

 

[x.treme]

Billige Lösung für die Grafiken
Block auf einen Scanner legen, einscannen, und etwas mit Photoshop überarbeiten

 

[Daaron]

das sieht furchtbar aus... da sitzt du länger am Nachbearbeiten, als wenn du alles selbst erstellst.

 

[nissl]

Auf jeden

Da bin ich schneller und besser wenn ich erstmal einen Anfängerkurs GIMP mache.

@Daaron zu der Sache mit den Mobile Devices. Ich bin ja kein professioneller entwickler, nicht annähernd. Ich denke ich werde die seite so für Desktopgrösse schreiben. Später wenn es auf Smartphones garnicht gehen sollte werde ich evtl noch eine Mobile ansicht parallel dazu basteln.

Ich Danke dir für deine 'trivialen' CSS tips, die für mich garnicht soo Trivial sind
Denn um ehrlich zu sein beherrsche ich nur die einfachsen Grundlagen und versuche mir das alles grad - mit diesem Projekt - anzueignen.

Leider suche ich immernoch nach den Ringen für die Seitenbindung. Ich versuche zudem das mit Gimp selbst zu machen, vielleicht stosse ich noch auf ein Brauchbares Tutorial.

Was mir dann noch aufgefallen ist, was echt schön wäre. Wenn der Block nicht leer aussieht, sondern man eben die unteren Seiten des Blockes an den Rändern entsprechend sieht. Der Vorteil ist, dass ich nur links und oben oder rechts und unten die überlappenden Ränder darstellen muss.

 

[Daaron]

Leider suche ich immernoch nach den Ringen für die Seitenbindung. Ich versuche zudem das mit Gimp selbst zu machen, vielleicht stosse ich noch auf ein Brauchbares Tutorial.

Wie gesagt: ein Ring/Bogen in Draufsicht ist am Ende nur ein Rechteck mit ein paar Lichteffekten. In dem Falle sollte ein Verlauf über ein paar Silber-Schattierungen vollkommen ausreichen.
Woran erkennst du, das ein Ding gewölbt ist? Nun, erst einmal hast du 2 Augen, das fällt aber hier weg. Für flache Darstellungen entscheiden einzig und allein Licht und Schatten über den 3D-Effekt. Bevor du mit GIMP & Co herumklickst, mach es doch mal mit Papier und nem weichen Bleistift. Oder mach mit der Kamera ein paar Fotos von einem ähnlichen Objekt und schau dir an, was auf Fotos den plastischen Eindruck erweckt.

Was mir dann noch aufgefallen ist, was echt schön wäre. Wenn der Block nicht leer aussieht, sondern man eben die unteren Seiten des Blockes an den Rändern entsprechend sieht. Der Vorteil ist, dass ich nur links und oben oder rechts und unten die überlappenden Ränder darstellen muss.

Was genau meinst du? Willst du Content anderer Seiten in der aktuell offenen Seite darstellen, so als würdest du sie nur unvollständig überblättert haben?
Mit AJAX wäre das möglich, aber etwas knifflig und vor allem ziemlich stressig für Client und Server.

Viel wichtiger: Es passt nicht. Damit bei dem Block unten etwas durchguckt müsstest du eine perspektivische Darstellung wählen, keine reine Draufsicht. Du müsstest eine 3D-Transformation machen. Da kommst du in Teufels Küche. Zum Beispiel müssten deine Ringe plötzlich tatsächlich perspektivisch verzerrte Ringe sein (und über die Tiefe entsprechend mehr oder weniger verzerrt).

 

[nissl]

Nein nicht umblättern, hatte ich auch kurz dran gedacht ist mir aber zu aufwendig. Eigentlich dachte ich nur, dass es so aussieht als wären ein paar seiten im Block und die sieht man ja perspektivisch links an der ecke zB.

Aber du hast sicherlich recht, wir wollen es ja nicht gleich übertreiben.


Dieses Tutorial hat mir meine ringe gebracht. Dein Tip mit dem doppelten Hintergrund bereitet mir noch ein paar probleme.
Ich dachte eigentlich ich mache das mit zwei divs. der eine so hoch wie der eigentliche Content und 50px breit mit dem Ring drin, rechts daneben der Content div mit dem Karo als Hintergrund.

Mit den doppelten Hintergründen habe ich das Problem, dass die Ringe in den Block hereinstehen anstatt über ihn drüber. Wahrscheinlich ein Kosmetisches Problem und behebbar, nur wie is mir nicht klar.
Anhang anzeigen 412885 mit den ringen bin ich soweit ganz zufrieden, auch wenn sie ein bisschen 'echter aussehen dürften.

https://drive.google.com/folderview?id=0B_mMnHstjs_-VUZQSEQ2WHJBWVU&usp=sharing

aber ich bin erstaunt, das wird richtig was

Ergänzung (1. Mai 2014)

So ich präsentiere mal mein bisheriges werk

http://testrange.nissl24.de/

Kann mir jemand noch eine bessere idee verraten diesen Füller zu platzieren ?
im moment mach ich das so :

<div id="fueller"></div>

#fueller {position: absolute; background-image:url(fueller.png); 
               top: 300px; width: 150px; height: 590px;}

Gefällt mir aber nicht so gut, weil er sich bewegt wenn man das Browserfenster verkleinert/vergrössert.
Gibt es eine möglichkeit, dass es aussieht als gehöre diese Grafik zum hintergrund ?

Gibt es sonst noch etwas daran auszusetzen ?

Wie ich das mit dem Menü mache weiss ich auch noch nicht wirklich.
Entweder wie auf dieser 'Vorlage' mit diesen Lesezeichen in dem Block.
Oder ich gestalte das Menü wie so eine Handschriftliche darstellung links oder oben.
Der nachteil bei beiden Varianten ist, dass ich Grafiken für die Menüpunkte nehmen muss.Das an sich macht allerdings nichts, da der Content soweit statisch ist.

Ich bin weiterhin für Kritik und Tipps offen. =)

 

[Daaron]

Ergänzung (1. Mai 2014)

So ich präsentiere mal mein bisheriges werk

Kleiner Bug: An der linken unteren Ecke des Blocks (bzw. der Bindung) ist der Schatten etwas daneben und die Rundung kann die Ringe clippen, wenn die Höhe des Contents anders ist als die von dir festgelegte.

Gefällt mir aber nicht so gut, weil er sich bewegt wenn man das Browserfenster verkleinert/vergrössert.
Gibt es eine möglichkeit, dass es aussieht als gehöre diese Grafik zum hintergrund ?

Du müsstest sie eben an den Content angliedern und absolut zum Content positionieren (und selbigen dafür relativ). Dann wird der Füller aber irgendwann abgeschnitten.

Der nachteil bei beiden Varianten ist, dass ich Grafiken für die Menüpunkte nehmen muss.Das an sich macht allerdings nichts, da der Content soweit statisch ist.

Stimmt nicht. Wenn du IE8 ignorierst kannst du mit transform:rotate() arbeiten. Rotate() nimmt hierbei Grad-Angaben, also z.B. 90deg für 90° im Uhrzeigersinn. Außerdem ist Google Fonts dein Freund. Such dir ne hübsche Handschrift und gut.

 

[Kanibal]

Vielleicht bin ich auch der einzige, mir fällt es jedenfalls recht schwer, den Fließtext über den Karos zu lesen. Vielleicht solltest Du die Karo's etwas dezenter gestalten.

 

[nissl]

Vielleicht solltest Du die Karo's etwas dezenter gestalten.

Danke, die Kritik kam schon von einer anderen Stelle und wird im nächsten Feinschliff erledigt. Zudem habe ich gedacht, wenn ich die Schriftart für den Content ausgewählt habe, den Zeilenabstand so einzustellen, dass die schrift weitgehend wirklich in den Karos ist. Oder die Schrift wird so gross und auffällig das man damit keine Probleme (mehr) hat.

Kleiner Bug: An der linken unteren Ecke des Blocks (bzw. der Bindung) ist der Schatten etwas daneben und die Rundung kann die Ringe clippen, wenn die Höhe des Contents anders ist als die von dir festgelegte.

Danke für den Hinweis, ist mir garnicht aufgefallen, habe die Höhe des Content Div einfach noch um 10Pixel verlängert. Ist aber sowieso noch feinschliff.. Vielleicht richte ich das auch so ein das bei einer gängigen Bildschimgrösse/auflösung alles auf einer seite ist ohne scollen.
Oder nur scollen innerhalb des div.

Du müsstest sie eben an den Content angliedern und absolut zum Content positionieren (und selbigen dafür relativ). Dann wird der Füller aber irgendwann abgeschnitten.

Ich schau mir das nochmal an. Der füller ist nicht lebenswichtig. Dachte aber der und ein paar Büroklammern drum herum beleben das bild ein bisschen.

Stimmt nicht. Wenn du IE8 ignorierst kannst du mit transform:rotate() arbeiten. Rotate() nimmt hierbei Grad-Angaben, also z.B. 90deg für 90° im Uhrzeigersinn. Außerdem ist Google Fonts dein Freund. Such dir ne hübsche Handschrift und gut.

Cool wieder was gelernt, danke!!! Google FOnts kannte ich ebenso wenig wie ich den ausdruck 'rotate' in CSS kannte.
Bisher sieht das allen im IE genau so aus wie im Firefox. also die neueren können das. Wie du schreibst kann ich den IE8 sicherlich ignorieren, also werde ich mir das auch mal anschauen.
Aber dieses 'Lesezeichen' müsste ich noch als Grafik hinterlegen? Oder kann ich mir das auch mittels CSS mitsamt der Effekten zusammenzaubern? Effekte sollen ja wie man in der Vorlage sehen kann, oder in meinem Entwurf, so ein bisschen verlauf bling bling sein, dass es lebendig oder plastisch (ist glaube der Fachausdruck) aussieht?

 

[Daaron]

Danke, die Kritik kam schon von einer anderen Stelle und wird im nächsten Feinschliff erledigt. Zudem habe ich gedacht, wenn ich die Schriftart für den Content ausgewählt habe, den Zeilenabstand so einzustellen, dass die schrift weitgehend wirklich in den Karos ist.

Schaffst du nicht. Verlasse dich NIE darauf, dass etwas so dargestellt wird wie bei dir zuhause.
Außerdem sieht ein Karo-Block selten so aus. Bei denen, die ich früher verwendet habe, waren die Karos eher blau und deutlich schwächer.

Vielleicht richte ich das auch so ein das bei einer gängigen Bildschimgrösse/auflösung alles auf einer seite ist ohne scollen.
Oder nur scollen innerhalb des div.

Beides keine gute Lösung. Vor allem das Scrollen im <div> sieht entweder total beschissen aus oder erzwingt JavaScript.
Mach es Responsive, dann machst du es richtig. Wenn du dafür auf gewisse Aspekte verzichten musst, dann ist das halt so.

Ich schau mir das nochmal an. Der füller ist nicht lebenswichtig. Dachte aber der und ein paar Büroklammern drum herum beleben das bild ein bisschen.

Ah. Ich hab mich gewundert, warum der Füller in nem <a> lag. Dachte, der soll mal klickbar sein...
Wenn es eh alles nur Deko ist, dann...
- Multiple Backgrounds
- CSS Pseudo Elements (:after & :before)
Damit kriegst du allerlei geile Effekte hin, OHNE mit total unsinniger <div>-Suppe die Semantik des Dokuments zu versaubeuteln.

Bisher sieht das allen im IE genau so aus wie im Firefox. also die neueren können das. Wie du schreibst kann ich den IE8 sicherlich ignorieren, also werde ich mir das auch mal anschauen.

Du musst für dich selbst entscheiden, ob du den IE8-Marktanteil komplett missachtest oder aber für den IE8 einen Fallback baust. Das 2. wäre meine Wahl.
Übrigens, um zu gucken welche HTML5/JS/CSS3 - Tricks du wo verwenden kannst: http://caniuse.com/

Aber dieses 'Lesezeichen' müsste ich noch als Grafik hinterlegen? Oder kann ich mir das auch mittels CSS mitsamt der Effekten zusammenzaubern?

CSS3 Verläufe (englisch: Gradients) lösen dein Problem. Gibt gute Gradient-Generatoren für sowas. Mit etwas Übung kriegt man damit auch schöne Schattierungen oder allgemeinen "Glossy"-Kram hin. Denk vor allem dran: CSS-Gradients sind keine Background-Color, sondern ein Background-Image. Das heißt: du kannst Multiple Backgrounds verwenden. Außerdem... wenn du schon CSS3 für Gradienten udn Rotation einsetzt, dann kannst du auch auf die erweiterten Farbräume zugreifen: RGBA und HSLA. HSLA ist etwas gewöhnungsbedürftig, aber RGBA wirst du lieben, außerdem ist mans ja aus der Bildbearbeitung gewohnt.

Zusätzlich kannst du auch noch die :hover - Pseudoklasse verwenden. Die geht ab einschließlich IE8 überall (IE6&7 nur bei <a>, sonst nicht). Und dann wären, wenn dir plötzliche Übergänge nicht gefallen, ja immer noch CSS3 Transitions und CSS3 Animations (gehen beide erst ab IE10). Aber gerade Transitions verwende ich immer wieder. Wenn der Browser sie nicht unterstützt passiert nichts "hässliches". Es ist halt eine harte Zustandsänderung, keine sanfte. Total egal.

 

[nissl]

RGBA und HSLA. HSLA ist etwas gewöhnungsbedürftig, aber RGBA wirst du lieben, außerdem ist mans ja aus der Bildbearbeitung gewohnt.

Wenn du das sagst. ;D

Ich war froh dass ich das Gitternetz für meine Karos so leicht hinbekommen hab, aber wie heisst es so schön, versuch macht klug.
RGBA hab ich schon in einem Tutorial gesehen, werde ich definitiv verwenden, auch wenn ich das noch nicht so ganz auf die Reihe bekomm.

Zu dem Rotate mal eine Logikfrage:

nehmen wir an ich will eine Box mit runden Ecken links oben und rechts oben und dem Text 'Home' darin. Das alles soll um 90° clockwise gedreht werden. Meinem ersten versuch gestern abend betrifft das nicht den Text, wahrscheinlich liegt das an einem Fehler, oder muss ich den Text separat drehen? Ausserdem, modelliert es erst die Box und dreht sie dann oder muss ich beim Runden der Ecken die Logik schon beachten, also ist die linke obere und rechte obere ecke dann gleich rechts oben und unten ?

CSS3 Verläufe (englisch: Gradients) lösen dein Problem. Gibt gute Gradient-Generatoren für sowas. Mit etwas Übung kriegt man damit auch schöne Schattierungen oder allgemeinen "Glossy"-Kram hin. Denk vor allem dran: CSS-Gradients sind keine Background-Color, sondern ein Background-Image. Das heißt: du kannst Multiple Backgrounds verwenden. Außerdem... wenn du schon CSS3 für Gradienten udn Rotation einsetzt, dann kannst du auch auf die erweiterten Farbräume zugreifen:

Zusätzlich kannst du auch noch die :hover - Pseudoklasse verwenden. Die geht ab einschließlich IE8 überall (IE6&7 nur bei <a>, sonst nicht). Und dann wären, wenn dir plötzliche Übergänge nicht gefallen, ja immer noch CSS3 Transitions und CSS3 Animations (gehen beide erst ab IE10). Aber gerade Transitions verwende ich immer wieder. Wenn der Browser sie nicht unterstützt passiert nichts "hässliches". Es ist halt eine harte Zustandsänderung, keine sanfte. Total egal.

Wahnsinn... oO was man mit dem neuen CSS machen kann. Gut das du mir diese Tipps gibst, weil ganz ehrlich mit Google und nur den W3shools-Unterlagen wäre ich wahrscheinlich höchstens zufällig auf ein paar der möglichkeiten gestossen.

Ich werde heute also noch mit den neuen Erkenntnissen weitermachen. Vorab nochmal kurz zum Aufbau:

Ist es sinnvoll wie ich es jetzt habe. DIe beiden divs nebeneinander shene so aus wie ich mir das vorstelle, auch auf dem Handy oder kleineren Displays scheint es soweit keine Probleme geben, dass es irgendwie zerschoben wird.
Diese linksleiste rechts am Rand ist mir noch ein Dorn im Auge, es hat mich eine ganze weile gekostet bis ich das so plaziert hatte wie es jetzt ist. Allerdings ist der Aufbau wieder ein Div in dem ich die Boxen erstellen will,
wie erstelle ich die Boxen?(Linklesezeichen) wieder div?

So sieht das aus:

CSS:
#linkbox  { height: auto; margin-top: 50px ; width: 30px; float:right; }

HTML:
<div id="main">   <!-- Defieniert den inneren Bereich -->
	<div id="linkbox"><a class="right" href="#">Home</div>  <!-- Linkbereich -->
<div id="contentl"></div>  <!-- Linker Rand 'Ringbindung' -->
<div id="content"> <!-- Innerer Container mit Karohintergrund -->
<div id="textfield"><!-- Textbereich innerhalb des Containers  mit Fester Höhe, evtl Scrollbar -->

Geht das evtl. ein bisschen simpler? Habe auch nicht das gefühl das es 'solide' ist.

Beides keine gute Lösung. Vor allem das Scrollen im <div> sieht entweder total beschissen aus oder erzwingt JavaScript.

Ich hatte da gedacht ich lassden den Hintergrund stehen und scrolle nur in einem Transparaten div den Text. Wie das allerdings aussieht kann ich mir nicht vorstellen, Ist das wirklich so schlimm? Auch im Punkt Java Script?

Ah. Ich hab mich gewundert, warum der Füller in nem <a> lag. Dachte, der soll mal klickbar sein...
Wenn es eh alles nur Deko ist, dann...
- Multiple Backgrounds
- CSS Pseudo Elements (:after & :before)

Werde ich mal ausprobieren. Dürfte wohl klappen wenn ich sage, no-repeat und den irgendwie auf eine feste positon zuteile. Hierzu: Muss ich das PNG einfach erweitern, dass ich den Randabstand so bekomme oder kann ich das auch mit Koordinaten lösen?

 

[Daaron]

Meinem ersten versuch gestern abend betrifft das nicht den Text, wahrscheinlich liegt das an einem Fehler, oder muss ich den Text separat drehen? Ausserdem, modelliert es erst die Box und dreht sie dann oder muss ich beim Runden der Ecken die Logik schon beachten, also ist die linke obere und rechte obere ecke dann gleich rechts oben und unten ?

Wenn nichts schief geht wird das betroffene Element inklusive Inhalt gedreht. Hierbei wird normalerweise erst gezeichnet und dann gedreht.

Wahnsinn... oO was man mit dem neuen CSS machen kann. Gut das du mir diese Tipps gibst, weil ganz ehrlich mit Google und nur den W3shools-Unterlagen wäre ich wahrscheinlich höchstens zufällig auf ein paar der möglichkeiten gestossen.

Ich mach den Kram beruflich, da muss man so etwas einfach können.

Diese linksleiste rechts am Rand ist mir noch ein Dorn im Auge, es hat mich eine ganze weile gekostet bis ich das so plaziert hatte wie es jetzt ist. Allerdings ist der Aufbau wieder ein Div in dem ich die Boxen erstellen will,
wie erstelle ich die Boxen?(Linklesezeichen) wieder div?

Verwende die korrekte Semantik, das hilft dir, dich im eigenen Code zurecht zu finden und suchmaschinentechnisch ist es auch von Vorteil. Das heißt: Eine Navigation kommt nicht in ein <div>, sondern in ein <nav>. Praktisch dazu: Du hast ja effektiv eine Liste von Links, also kapsel sie in ein <ul><li>-Konstrukt.

Ich hatte da gedacht ich lassden den Hintergrund stehen und scrolle nur in einem Transparaten div den Text. Wie das allerdings aussieht kann ich mir nicht vorstellen, Ist das wirklich so schlimm? Auch im Punkt Java Script?

1.) Du würdest den Text relativ zum Gitter scrollen. Das sieht garantiert schon mal blöde aus
2.) Wenn du Scroll-Balken für ein <div> erstellst (overflow:scroll), dann kommen da IMMER die System-Scrollbalken. Hässliche, klobige graue Klötze. Du müsstest also zusätzlich noch etwas wie http://greengeckodesign.com/mooscroll/ verwenden.

Hierzu: Muss ich das PNG einfach erweitern, dass ich den Randabstand so bekomme oder kann ich das auch mit Koordinaten lösen?

Du kannst background-position relative Koordinaten mitgeben, möglich sind die Schlüsselworte (center, left, right, top, bottom), Prozentangaben (100% für X = right, 100% für Y = bottom) und Längenangaben in den verschiedenen Maßeinheiten (px, em,...).
Was nicht (direkt) geht ist eine Positionierung z.B. 5px vom rechten oder unteren Rand bei einem Objekt mit unklarer Breite/Höhe. Es gab dafür mal ein paar Kandidaten, aber von denen geht soweit ich weiß keiner durchgängig überall.

 

[nissl]

ein <nav>. Praktisch dazu: Du hast ja effektiv eine Liste von Links, also kapsel sie in ein <ul><li>-Konstrukt.

So habe ich das noch garnicht gesehen. Verhält sich das aber genau wie ein div? <nav> habe ich mal gesetzt und es scheint sich genauso an die designvorschrift aus dem CSS zu halten wie die <div>.
Wie findest dus?

BTW ich habe mir die 'transition' stylesheets mal angeschaut und an meinen Knopf angewendet. Später soll der Aktive Link so herausstehen.

Problem das ich garnicht verstehe: Wieso fährt der nicht nur Horizontal sondern auch Vertikal ein paar Pixel davon.

Spoiler

.home {
background-image: -webkit-gradient(
	linear,
	left top,
	left bottom,
	color-stop(0, rgb(169, 160, 230)),
	color-stop(0.5, rgb(38, 0, 230))
);
transform: rotate(90deg);
background-image: -o-linear-gradient(bottom, rgb(169, 160, 230) 0%, rgb(38, 0, 230) 50%);
background-image: -moz-linear-gradient(bottom, rgb(169, 160, 230) 0%, rgb(38, 0, 230) 50%);
background-image: -webkit-linear-gradient(bottom, rgb(169, 160, 230) 0%, rgb(38, 0, 230) 50%);
background-image: -ms-linear-gradient(bottom, rgb(169, 160, 230) 0%, rgb(38, 0, 230) 50%);
background-image: linear-gradient(to bottom, rgb(169, 160, 230) 0%, rgb(38, 0, 230) 50%);
height: 35px;
margin-left: -40px;
margin-top: 10px;
width: 120px;
border-top-right-radius: 10px; border-top-left-radius: 10px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}	

a:hover  ,.home:hover     {color: #668CFF; text-decoration: none; height: 50px;}

DEm Code nach sollte sich ja nur die Höhe (durch die Rotation quasi die länge) um 15 Pixel erhöhen, sonst nichts weiter, ich verstehe nicht wieso es sich offenbar auch vertikal auswirkt.

...Du müsstest also zusätzlich noch etwas wie http://greengeckodesign.com/mooscroll/ verwenden.

Das Wollte ich definitiv! Kann ich also mit dem Gedanken noch spielen besonders wenn ich die Gitter noch, ein wenig dezenter mit hellblau und noch mehr Transparenz mache?

Du kannst background-position relative Koordinaten mitgeben.

Spoiler

Den Füller bekomme ich nun nicht mehr zu sehen, so wie es ist sollte doch jetzt Links oben in der Ecke auf dem Holz liegen?

body   	{	margin:0px; padding:0px; background-color: #070707; 
		          background:  url(fueller.png) left top no-repeat, url(wood.jpg) center top repeat; 
		          line-height: normal; text-align:left; font-size: 16px; }

Edit: OK das body margin:0px; padding:0px; war wohl total störend und sinnlos

body   	{background-color: #070707; 
		background:  url(fueller.png) 40px 140px no-repeat,  
		url(clips.png) 800px 20px no-repeat, 
		url(wood.jpg) center top repeat ; 
		line-height: normal; text-align:left; font-size: 16px; }

SIeht soweit gut aus, habe aber immer noch das problem, dass sie nicht fixiert auf dem Holz liegen.
Geht das überhaupt?

 

[nissl]

So, weil ich aktuell nicht mehr weiterkomme aber noch weitere Hürden aufgebaut hab frage ich mal nach einem Rat, den ich schon in dem ersten Post hätte unterbringen sollen.

Ist es schlauer ein Design mit statischer breite zu bauen oder dynamisch? Dynamisch würde mir einige möglichkeiten zum gestalten nehmen, könnte aber sein, dass es besser rüberkommt bei den meisten surfern.
Ich selbst habe mein Browserfenster auf eine Breite von 1280pixeln zusammengeschoben, und das reicht mir auch.
Kann ich davon ausgehen das die meisten das auch so machen ?

Den inhalt zu zentieren würde aber sinn machen? Schade ist das dann für die verzierungen die ich drum herum haben wollte, aber kein beinbruch.

 

[Daaron]

Setze nie Breiten voraus. Ok, du kannst eine untere Grenze irgendwo bei ~300px ziehen (kompaktes Smartphone hochkant), aber alles andere sollte IMMER fließen.
Verhindere horizontale Scrollbalken, wo immer es geht. Oder kannst du mit deinem Maus-Rad horizontal scrollen?

 

[nissl]

Ne eben, dann werde ich auf diverse details verzichten und alles zentriert darstellen.

Das Problem mit den Ribbons habe ich auch gelöst, Da mir das nicht gelingt das gedrehte element mit der Grössenveränderung hinzubekommen, habe ich es einfach nicht gedreht -> siehe testrange.nissl24.de

Ähnlich wie den Füller wollte ich noch ein gimmik haben, das werde ich jetzt jedoch verwerfen müssen, wenn ich dynamisches Design haben will.
Es sollte ein kleiner haufen PostIts sein, den habe ich schon mit GIMP erstellt und als PNG vorliegen. Allerdings sollte auf dem Obersten eine Notiz geschrieben werden können. Kann ich mich da eines weiteren CSS tricks bedienen der mir den irgendwie clever anhand der Browserfenstergrösse anzeigt. Meine Idee ist, dass er links unten neben dem Block liegen soll, allerdings sollte er auf keinen Fall unter oder auf den Block rutschen. Aber ich will auch nicht, dass er den Browser zum horizontal scrollen bringt.
Alternativ habe ich mich auch schon damit abgefunden, dass er einfach teil der ersten seite wird und in meinem Contentbereich liegt.