Layouterstellungsfrage anhand einer Vorlage

**m-werk** · 23.11.2010, 11:01

Hallo Leute, ich steh irgendwie nun auf der Leitung.

Folgendes: Ich soll für einen Kunden eine HP bauen, und der Grafiker hat mir einen Vorschlag unterbreitet, wie diese aussehen soll.
Da mir dieser Vorschlag sehr gut gefällt, würde ich diesen gerne nachbauen.

Nun meine Frage. Es geht um den Inhalt.
Wie kann ich es anstellen, so dass sich das seitliche Wort (ist Menüabhängig) sich immer mitändert. Auch die Grafik ändert sich bei jedem Menü mit. Das ist kein Problem. Mir geht es nur um das schräge Wort "Training".

Wie soll ich da vorgehen? Anbei mal der Grafische auszug:

**teo** · 23.11.2010, 11:31

Ich gehe mal davon aus, dass die vertikale Grafik kein transparentes, das Hauptbild überlagernde PNG werden soll.

Ein richtig positioniertes Backgroundimage beispielsweise. Das könnte man ohne Erweiterung mit einer CSS Klasse oder ID pro Artikel machen, wenn die Artikelstruktur einfach gehalten ist.

Soll es redakteurstauglich sein, müsste man mit Erweiterungen arbeiten.

**m-werk** · 23.11.2010, 11:59

Eigentlich sollte das Wort "Training" schon mit einem leicht transparenten hintergrund sein.

Nehmen wir mal an, dass der Hintergrund vom "Training" weis ist, wie könnte ich es anstellen?

Es ist kein Kompliziertes Menü. Es gibt nur ein Hauptmenü und keine Versteckten Untermenüs. Weiters ist es ziemlich fix das ganze, es wird sich selten was ändern.

**teo** · 23.11.2010, 12:08

Die Frage war eigentlich ehr so gemeint, ob Seitenbild und vertikaler Menüeintragsname immer das selbe sind. Wenn ja, kann die Transparenz ja per Grafikprogramm gemacht und als JPG gespeichert werden. Wenn die vertikale Grafik aber unabhängig vom Seitenbild sein soll, müsste es ja eine 24-Bit PNG Grafik werden, um da einen ordentlichen Transparenzeffekt zum Seitenbild entstehen zu lassen.

Für soetwas könnte man dann mit 'position' und 'z-index' im CSS arbeiten.

**m-werk** · 23.11.2010, 12:13

Wie kann ich das verstehen?

Soll ich eine Grafik machen, inkl. seitlichem Schriftzug über die gesamte höhe und in die Grafik kommt dann der Artikeltext hinein?

**m-werk** · 23.11.2010, 13:24

Ich werde glaube ich den schrägen Text extra als grafik einbauen, oder?

**Andreas** · 23.11.2010, 14:28

Wenn es nicht so viele Menüpunkte sind und sich die Menütexte auch nicht mehr ändern werden, würde ich auch für den schrägen Text die einzelnen Bilder als PNG24 Grafik anfertigen. Getrennt von den Bildern, somit bist du etwas flexibler, sollten die Bilder einmal ausgetauscht werden.

Grüße

**m-werk** · 23.11.2010, 15:01

Ja, das hab ich auch gemeint. Das wollte ich ja auch.

Ne Frage zu PNG24: Soll ich den Hintergrund zu 50% transparent machen, so dass ich den über das Kopfbild legen kann so dass dieser Hintergrund eben zu 50% durchscheint?

Wenn ja, wie soll ich das CSS denn dann aufbauen, so dass ich im Main 3 Bereiche drinnen hab?

**Andreas** · 23.11.2010, 15:12

Die Transparenzstufe musst du selber entscheiden, so wie's eben für dich gut aussieht.

Für diesen gedrehten Text würde sich eine absolute Positionierung anbieten. Wenn das Textbild in #main .inside drin ist, musst du nur darauf achten, dass das Elternelement von dem absolut positionierten Element position:relative; hat. Der Bildcontainer also position:absolute; left:0; top:0; und das Elternelement position:relative;.

**Andreas** · 23.11.2010, 15:26

Sorry, nochmal.

Ich würde in dem Artikel ein Element vom Typ Text für das Textbild erstellen. Dort dann den Text reinschreiben, als HTML-Element h2, oder was da grad semantisch richtig ist - "Training". Und eine Klasse vergeben - menuPic.

Dann ein Element vom Typ Bild für das obere Bild.

Dann ein Element vom Typ Text für den Fließtext.

Mit CSS kannst du jetzt das Element .menuPic so formatieren, dass der Text nicht sichtbar ist text-indent:-999em;. Dann die Größe so einstellen wie deine Textbilder haben. Hintergrundbild vergeben. Anschließend die Positionierung so wie oben beschrieben. Dann hast du's auch schön ohne CSS, für Screenreader oder wenn du später mal ne Version für ein anderes Ausgabemedium machen möchtest, z.B. iPod.

Brauchst also keine extra Bereiche, ist alles ganz simpel.

Ja, das Textbild solle eine Tranzparenz haben, so dass es so aussieht wie in deiner Vorlage.

ps Schönes Add-on um CSS mit einem Klick auszuschalten Read Easily.

**m-werk** · 24.11.2010, 08:50

Zitat von Andreas

Sorry, nochmal.

Ich würde in dem Artikel ein Element vom Typ Text für das Textbild erstellen. Dort dann den Text reinschreiben, als HTML-Element h2, oder was da grad semantisch richtig ist - "Training". Und eine Klasse vergeben - menuPic.

Ganz komm ich damit nicht klar.

Folgendes versteh ich: Ich erstelle im Artikel für die große Grafik ein Graifik-Element. Für den Text darunter ein Textelement.

Dies hab ich auch schon gemacht.

Ich versteht nur nicht ganz, wie ich das mit der Schrift machen soll!
Ich hab diese Schrift schon hochgeladen (PNG24) mit einem transparenten hintergrund.

So, dies müsste ich jetzt nur noch einbauen.

**m-werk** · 24.11.2010, 09:40

So, hab es geschaft.

Jetzt ist es nur so, dass ich bei jedem Menüpunkt im Artikel ein anderes senkrechtes Wort habe.

Hab es so gemacht:
Im Artikel an 1. Position ein Textelement erstellt und dieser die CSS-Klasse menuPic vergeben.
Nun hab ich im CSS im .menuPic als Hintergrundgrafik diese eine eingebaut, Breite und Höhe wie eben das Pic hat eingestellt und bei der Positionsart "absolute" vergeben. Weiters hab ich bei der Position bei Left noch 20 px eingestellt.

So, jetzt muss ich aber bei jedem Artikel eine andere CSS-Klasse hineinschreiben, da ich ja immer eine andere Hintergrundgrafik habe.

Oder hab ich da was falsch verstanden, und es geht anders auch?

**Andreas** · 24.11.2010, 19:10

Nein, das ist schon richtig so. Der ganze Artikel hat aber schon die ID "das-training" also kannst du den Container so ansprechen:
#das-training .menuPic {}
Bei den anderen Seiten entsprechend.

Du kannst ruhig noch top:0; vergeben, ist vielleicht sicherer. Und padding:0; da du jetzt ja für alle .ce_text padding-left:90px; gesetzt hast.

Wenn du jetzt noch das Wort als h1 (Überschrift 1) auszeichnest, hast du es genauso wie ich meinte. Es ist ja die erste Überschrift auf der Seite, also Rangordnung 1. Wenn man dann das CSS ausschaltet sieht es gut aus. Auch für Screenreader.

**m-werk** · 25.11.2010, 09:22

Hallo,

so, ich hoffe es passt so. Eine generelle Frage: Ich hab ja für diese schräge Schrift ein Text-Element herangezogen.

Wäre es vielleicht nicht besser, als Element "Überschrift" zu wählen? Oder hast du es eh so gemeint?

**Andreas** · 25.11.2010, 13:16

Ja klar, das kannst du auch machen, bietet sich an. Aber wieso H6? Müsste doch H1 sein und wenn die seite noch ne übergeordnete Überschrift bekommt H2.

**m-werk** · 25.11.2010, 13:43

Es wird keine Übergeordnete Überschrift kommen. Und wenn ja, dann mach ich ein neue Überschriften-Element.

Es kann sein, dass beim Text eine Überschrift zusätzlich kommt, was aber auch noch nicht feststeht.

Bei mir werden immer H1, H2 usw., der reiche nach im css-eingestellt. H6 wird nirgenst beöntigt, somit habe ich hier H6 vergeben.

**Andreas** · 25.11.2010, 13:53

Das ist auf jeden Fall der falsche Ansatz. Überschriften sollten immer nach ihrer sematischen Bedeutung im Inhalt ausgewählt werden, wie auch alle anderen HTML-Elemente.

**m-werk** · 25.11.2010, 14:38

Ok, dann werde ich es mal so umbauen.

Ich mach einfach aus diesem Textelement ein Überschriftenelement, schreib als Überschrift eben "Training" hinein und stelle es auf H1.

Somit hab ich das css mit H6 auch gelöscht.

Nun hab ich es umgestellt, und es schaut auch gleich aus. Jetzt müsste es aber passen.

Wenn ich dann alle Bilder habe, muss ich halt jedesmal das gleiche CSS heranziehen und eben nur #seiten_id .menuPic schreiben. Dies wären in diesem Fall 7 gleiche CSS nur eben mit jeder #seiten_id......