✔ Ne Idee, ein Konzept und die Realisierung (Wenn IE an seine Grenzen stößt)

[nichtsooft]

Hi Leute!
Nachdem die "Creative Lounge" sehr gut zu meinem Slogan "Creativity enforcement" passt, möchte auch ich mal nen kleinen Denkanstoß, bzw. ein Thema zur Diskussion bringen...

Wir haben hier den Header einer Website an der ich zur Zeit arbeite. Derzeit ist der "Menübalken" fix, bestehend aus mehreren Grafiken" in den Seitenkopf eingebunden.
In weiterer Folge soll jedoch folgendes passieren:
Die Menüpunkte sollen vom User (=Seitenbesitzer) frei ausgewählt werden können, wodurch sich natürlich die Breite des gesammten Balkens verändert.

So weit so gut; Um endlich auf den Punkt zu kommen...

Verändert sich die Breite des Balkens, verändert sich automatisch auch die Position des linken Balkenendes (=Rundung). D.h. ich müsste die Rundung, weil sie ja über einer anderen Grafik liegt mit Transparenz versehen. Um das optisch sauber hinzubekommen entscheide ich mich nicht für GIF sondern für PNG, weil dieses Format ja bekanntlich auch Halbtransparenz unterstützt.
Das klappt auch wunderbar so lange ich diese Site nicht mit IE anzeige. Dann ist die Transparenz nämlich grau.
Ich will das auch nicht weiter breittreten, weil das ja eine bekannte Problematik ist, für die man von TanteGoogle genügend Lösungsmöglichkeiten findet.

Meine Frage an euch ist folgende:

Was kann ich mir für das Ende des Menübalkens einfallen lassen, damit ich ein halbwegs ansehenliches Design zustande bekomme? Und was fällt euch dazu ein?

Lg. aus Wien;

Berny

 

[thecamillo]

1. Sofern in PS gearbeitet wurde pastet man das komplette Design nicht in ImageReady sondern nur einzelne Teile des Ganzen.

2. Wenn man an eine Umsetzung sich ran macht, macht man als erstes einen Ausdruck des Designs und dann den Rechner aus!

Als zweites nimmt man sein ausgedrucktes Design und macht sich Gedanken über den Aufbau der Seite.

3. Ist ja klar wenn man her geht und setzt das Teil auf 100% dass sich dann Irgendwas verschiebt.

4. Transparenz ist immer eine Schlechte Entscheidung! Gerade wegen solchen Dingen!

Mein Tip:

Verschachtelte Tabelle! Sprich die Header Navigation ist eine Tabelle die in der Headertabelle liegt mit einen Align auf right. Den Background eben als Background reinpasten und fertig!

mfg MasterOfDisaster

thecamillo

 

[nichtsooft]

@camillo:

Erstmal; Hi!

Alsoooo; dass man eine große Grafik in diesem Falle den Header zerlegt; ist mir schon klar! Das man das ganze dann per Table in ein HTML-Dokument packt weiss ich auch.

Das problem liegt ja hier nicht an der Umsetzung der Designidee generell, sondern rein nur am Detail "Rundung und Transparenz"!

Hier einfch mal ein screenshot des PSDs mit Hilfslinien, damit du siehst, dass ich nicht die ganze Grafik posten würde. (Nebenbei: Die volle Grafik ist 800px breit wird für's Web dann auf 760 beschnitten, darum auch die eine zusätzliche Hilfslinie links.

 

[thecamillo]

Achsooooo,

jetzt raff ich was du meinst! Wenn Du auf der Staße weiterfährst baust Du sicherlich nur Unfälle, also weg mit der Idee von wegen transparentes Gif! Würde die Buttons als soche herausgenerieren und einen Teil des Headers sagen wir mal die gesamte Höhe mal 1 Pixel ausschneiden und diesen dann 100% setzen - Fazit sieht anders aus!

Mein Vorschlag wäre um das mit der Seitenanpassung in den Griff zu bekommen. mach einen Flash Header!

cu camillo

 

[nichtsooft]

Sorry, dass ich dich enttäuschen muss, aber du hast es noch nicht gerafft! *gg*

Ich will eben keine transparenten GIFs verwenden und die Buttons sind einzelne ausgeschnittene Grafiken (sieheHilfsliien oben);

Lg. Berny

 

[Mamphil]

Hallo!

Ist es vielleicht möglich, mit Hilfe von PHP aus den Einzelteilen (mit transparenten PNGs) ein "undurchsichtiges" JPG zu erstellen, welches dem in deinem ersten Beitrag ähnelt?

Mamphil

 

[nichtsooft]

Gute Idee!

Scheitert aber leider daran, dass die Bilder (Vorder+Hintergrund bzw. Hintergund+Button) verschiedene Größen aufweisen und sich GD quer legt! =(

Im Endeffekt stellt sich die Frage, was könnte ich statt der Rundung für ein Ende an diese Button-Leiste setzen, ohne ein designmäßiges Disaster anzurichen!?

Lg.

Berny

 

[Mamphil]

Scheitert aber leider daran, dass die Bilder (Vorder+Hintergrund bzw. Hintergund+Button) verschiedene Größen aufweisen und sich GD quer legt! =(

Das kann ich nicht nachvollziehen, die Problemlösung gehört hier aber auch nicht hin...

Wie werden denn die Beschriftungen der einzelnen Elemente erstellt, wenn sie vom Benutzer selbst vergeben werden können?

Mamphil

 

[nichtsooft]

also mal ganz auf simpel....

An hand der Breite von 760 wird berechnet wieviele Textzeichen bei einer gewissen Textgröße pro Menüpunkt eingegeben werden dürfen.

Bsp; Arial12b = 8Menüpkte zu je 8 Zeichen

Diese 8 Menüpunkte werden in ner DB gespeichert (warum das!? Unwichtig!) und später von PHP ausgelesen. So werden dann die Inhalte des Balkens generiert.
Aber was hat das mit dem Thema zu tun!?

 

[Duddle]

Hmmm, ich werfe einfach mal einen Spontaneinfall rein, der aber gegen Browserkompatibilität und generelle Grundlagen des Webdesigns verstösst und wahrscheinlich eh nicht machbar ist:

Vielleicht ein Flashmenü machen?

Da hättest du zumindest das Problem mit Gif und Png nit…

--

Eine wirklich fesche Alternative zum abgerundeten Ende fällt mir gerade nicht ein, vielleicht ziehst du im Endeffekt den Balken doch bis ganz nach links und schließt dort mit dem Rand ab? Oder irgendein Element, was zum Inhalt der Seite passt UND quadratisch ist?

Keine Ahnung

Aber unbedingt dann mal die Lösung präsentieren ;-]

Duddle