[WIP] Meine Portfolio Seite

Quabbe · 05.09.2010

Hallo,

ich würde hier gerne mal Code und Design meiner Seite bewerten lassen. Es handelt sich um ein Portfolio zum Thema Fantasy Kartografie.

Die Seite ist noch inhaltsleer und einige Dinge funktionieren noch nicht so, wie sie funktionieren sollen. Irgendwie scheint sich die Lightbox nicht mit mootools vereinen zu lassen (kann mir jemand sagen, wieso?).

Fantasy Cartography

Ich würde mich jedenfalls über Verbesserungsvorschläge und Kritik freuen!

Grüße,
Quabbe

oxygen · 05.09.2010

AW: [WIP] Meine Portfolio Seite

na endlich mal wieder jemand der sich von diesen bekloppten immer gleich aussehenden "cmslayouts" wegbewegt

mir gefällts - richtig gut !!!
selbst gezeichnet ??
wie lange haste gesessen??

was ich aber überlege - fantasy - hatte ich ne andere farbliche erwartung - aber es liegt eventuell daran - dass ich nichts mit fantasy am hut habe

code hab ich mir noch nicht angesehen ... später ...

fantaflascher · 05.09.2010

AW: [WIP] Meine Portfolio Seite

Wow sieht klasse aus muss ich neidlos zugeben. Gute Arbeit

K3nt · 05.09.2010

AW: [WIP] Meine Portfolio Seite

Wunderbar, echt ne super idee!!!! Wenn ich auf einen der Auswahlpunkte klicke, bleiben immer blaue gepunktete linien stehen, sprich bei css auf dem "a:active oder a:focus"

cebito · 05.09.2010

AW: [WIP] Meine Portfolio Seite

Sehr schön, gefällt, aber hier musst du nachbessern:

Code:

<h3>Worldmaps</h3>
<a href="http://www.psd-tutorials.de/modules/Forum/images/bigmap1.jpg" rel="lightbox[worldmaps]" [B][COLOR=Red]id="map1"[/COLOR][/B]></a>
<a href="http://www.psd-tutorials.de/modules/Forum/images/bigmap1.jpg" rel="lightbox[worldmaps]" [B][COLOR=Red]id="map2"[/COLOR][/B]></a>
<a href="http://www.psd-tutorials.de/modules/Forum/images/bigmap1.jpg" rel="lightbox[worldmaps]" [B][COLOR=Red]id="map3"[/COLOR][/B]></a>
<h3>Regional maps</h3>
<a href="http://www.psd-tutorials.de/modules/Forum/images/bigmap1.jpg" rel="lightbox[regional maps]" [B][COLOR=Red]id="map1"[/COLOR][/B]></a>
<a href="http://www.psd-tutorials.de/modules/Forum/images/bigmap1.jpg" rel="lightbox[regional maps]" [B][COLOR=Red]id="map2"[/COLOR][/B]></a>
<a href="http://www.psd-tutorials.de/modules/Forum/images/bigmap1.jpg" rel="lightbox[regional maps]" [B][COLOR=Red]id="map3"[/COLOR][/B]></a>

Du hast die ID's doppelt vergeben...

Edith: ach ja, und sorge dafür, das die Kartenvorschau in der Mitte auch ohne JS scrollt

Quabbe · 05.09.2010

AW: [WIP] Meine Portfolio Seite

@ oxygen

Ich bin auch kein Fan von Standardlayouts. Wenn es gefällt, umso besser.

Ja, der Hintergrund ist selbstgezeichnet. Wäre ja doof, wenn ich bei meinem Hobby meine Karten nicht selber zeichnen würde.

Ich hatte die Idee für dieses Portfolio gestern abend, als ich mich für ein anderes Projekt mit mootools beschäftigt habe. Den ersten Strich habe ich also vor etwas mehr als 24 Stunden gemacht.

@ fantaflascher

Das freut mich, danke!

@ K3nt

:focus habe ich noch gar nicht definiert, muss ich noch nachholen. Hmm, blaue Punkte? Habe bisher nur mit Chrome geschaut. Ich glaube, diese Linien tauchen nur mit dem Firefox auf. Kann mich erinnern, dass es eine Möglichkeit gab, diese zu verbergen (was aber für Tab-Benutzer unschön ist). Muss ich gleich mal selber schauen, ob es stark auffällt. Danke.

@ cebito

Ja, das sind momentan noch Platzhalter. Ich krieg diese blöde Lightbox nicht zum Laufen. Wenn ich die Scrollfunktion ausschalte, funktioniert die Lightbox. Umgekehrt dasselbe. Aber beides zusammen führt zu einem Totalausfall.

cebito · 05.09.2010

AW: [WIP] Meine Portfolio Seite

Das liegt mit Sicherheit an den verschiedenen Frameworks, du solltest (wenn möglich) bei einem bleiben.

K3nt · 05.09.2010

AW: [WIP] Meine Portfolio Seite

Ich hoffe das geht Ok, ich habe dir mal einen Screenschot gemacht, mit den blauen Punkten

. Die sind also dann da, wenn ich z.B. auf About Me usw.. klicke.

Uploaded with

Wenn das keine gute Idee war, einfach sagen ich lösche es sofort

Edit: Paint hat die Qualität des Bildes extrem verringert

Quabbe · 05.09.2010

AW: [WIP] Meine Portfolio Seite

@ cebito

ohne JS scrollen geht glaube ich nur mit overflow:auto, was zu einem sehr hässlichen Scrollbalken führt. Oder gibt es noch eine elegantere Methode?

Generell habe ich von js eigentlich keine Ahnung. Ich habe nur die Demo von mootools demos - Fx.Scroll ein bisschen angepasst. Zu welchem Framework gehört Lightbox denn? Gibt es auch für mootools eine Lightbox?

@ K3nt

danke, ich habe mir das Problem grade selbst angeschaut. Hast recht, sieht nicht schön aus. Das kommt wohl von text-indent:-9999px. Ich dachte, das liesse sich mit overflow:hidden oder visibility:hidden verbergen. Fehlanzeige. Kennt jemand einen anderen Weg?

edit: ich habe den Header jetzt etwas vergrößert, ein "Logo" kreiert und das Favicon eingefügt. Einige Fragen haben sich auch noch ergeben, vielleicht ist jemand so nett und kann mir diese beantworten.

1) Wie bekomme ich es hin, dass der Inhalt im #content mit den News beginnt (2. Spalte) statt mit dem Portfolio (1. Spalte)? Wenn ich den Fixpunkt mit left:-320px ins Negative setze, zeigt er diesen gar nicht an. Und er beginnt eben immer mit der ersten Spalte.

Die News einfach in die erste Spalte schreiben will ich nicht. Ich möchte schon, dass alles einer gewissen Logik folgt. Links der Link Portfolio, also soll links auch der Inhalt Portfolio sein. Starten soll die Seite aber eben mit der zweiten Spalte.

2) Wenn ich das Browserfenster verkleinere (unter 960px), verschiebt sich der Text im #content. Dabei habe ich dem #content position:absolute zugewiesen und dem #container position:relative. Eigentlich sollte sich der #content doch am #container orientieren? Habe ich da etwas übersehen?

Grüße,
Quabbe

pluspiano · 06.09.2010

AW: [WIP] Meine Portfolio Seite

Sehr schön, sieht wie eine Piratenschatzkarte aus. Zu dem Problem kleiner 960px und dem verschobenen Layer fand ich folgendes sehr kluges Tutorial:

A List Apart: Articles: Responsive Web Design

Anschauen lohnt. Vor allem für Deine Site.

Quabbe · 06.09.2010

AW: [WIP] Meine Portfolio Seite

@ pluspiano

Schatzkarte? Arr... das bringt mich auf eine verwegene Idee.

Danke für den tollen Link. Bin noch nicht ganz durch, sieht bis jetzt aber äußerst vielversprechend aus! Da lässt sich sicher einiges von abschauen.

CarmenSporidis · 06.09.2010

AW: [WIP] Meine Portfolio Seite

wow, muss ich auch neidlos anerkennen Carmen

MyFloh · 06.09.2010

AW: [WIP] Meine Portfolio Seite

Schöne Site, gefällt mir gut! Die Technik bekommst Du sicher auch noch in den Griff.
Ich konnte leider aus zeitlichen Gründen den Code nicht genauer ansehen. Ich mach es aber bei Gelegenheit!

LG MyFloh

pixel1966 · 06.09.2010

AW: [WIP] Meine Portfolio Seite

das verstehe ich als webdesign, klasse grafik und eine gute idee

K_Back · 06.09.2010

AW: [WIP] Meine Portfolio Seite

sieht sehr schön aus, und wegen den Rahmen schau dir das mal an. vllt hilft es dir ja.

HTML: Image-Map - HTMLWorld
Grad der erste Code bereich. Mache es über circle (Kreis) und dann da die Coords, dann sollte eig nur noch um den Kreis das sein, und den Rahmen solltest du auch komplett ausblenden können.

Hanno_Hauser · 06.09.2010

AW: [WIP] Meine Portfolio Seite

Hi,
hast da eine tolle Seite gezaubert. Gefällt mir gut. Ist mal eine andere Art der Seitengestaltung.
LG

Hightower1001 · 06.09.2010

AW: [WIP] Meine Portfolio Seite

Ich finde die Portfolio auch richtig gut. Und die Partfolio sind auch richtig gut in kommen.

Katrin81 · 06.09.2010

AW: [WIP] Meine Portfolio Seite

eine sehr schöne Idee.... Lg

Manuel270383 · 06.09.2010

AW: [WIP] Meine Portfolio Seite

Ja ich kann nur zustimmen nicht immer das selber!
Klasse Arbeit und Valide ist auch alles was will man mehr;-)

Quabbe · 06.09.2010

AW: [WIP] Meine Portfolio Seite

@ all

Wow, vielen Dank euch allen. Mit so viel Lob habe ich nicht gerechnet.

@ K_Back

Danke, habe mir Deine Links grade angeschaut. Wusste gar nicht, dass man auch runde Links erstellen kann. Das wäre natürlich die perfekte Lösung.

Hat eigentlich schon jemand den Schatz gefunden?

edit: Problem 1 (Layout verrutscht bei kleinerem Browserfenster) und Problem 2 (gepunktete Rahmen um die Links) sind jetzt behoben. Letzteres ging ganz einfach mittels:

Code:

 a:focus, a:active { outline:none; }