Grafik über mehrere Container

[Anton]

Morgen,

folgende Konstellation:

ein Header, ein Navigation die links floated und einen content der rechts floated. Momentan ist es so, das der Text im Header per Glider Levin (Image-Replacement) mit einer Grafik verdeckt wird.

Ich würde das jetzt gerne so verändern:

Im Header soll eine Lupe zu sehen sein. Deren Griff soll in den Content hineinragen.

Wie löse ich das denn am elegantesten?

[suit]

Wie löse ich das denn am elegantesten?

[ ] 2 hintergrundgrafiken
[ ] den inhalt unter das h1-element reinverschieben
[ ] das hintergrundbild in das gemeinsame elternelement

[Anton]

Wie löse ich das denn am elegantesten?

[ ] 2 hintergrundgrafiken
[ ] den inhalt unter das h1-element reinverschieben
[ ] das hintergrundbild in das gemeinsame elternelement

Kannst du das vielleicht ein bißchen detailierter erklären? Ich verstehe es noch nicht so ganz.

[suit]

[ ] 2 hintergrundgrafiken

zerschneide das hintergrundbild in 2 teile (lupe und griff)
lupe kommt in den header, griff in den inhalt

[ ] den inhalt unter das h1-element reinverschieben

negativer margin um den inhalt unter den header zu schieben

[ ] das hintergrundbild in das gemeinsame elternelement

das hintergrundbild ins body-element packen (oder was auch immer sonst herum ist

Kannst du das vielleicht ein bißchen detailierter erklären? Ich verstehe es noch nicht so ganz.

[Anton]

[ ] 2 hintergrundgrafiken
zerschneide das hintergrundbild in 2 teile (lupe und griff)
lupe kommt in den header, griff in den inhalt

[ ] den inhalt unter das h1-element reinverschieben
negativer margin um den inhalt unter den header zu schieben

[ ] das hintergrundbild in das gemeinsame elternelement
das hintergrundbild ins body-element packen (oder was auch immer sonst herum ist

Kannst du das vielleicht ein bißchen detailierter erklären? Ich verstehe es noch nicht so ganz.

Sorry, ich glaube ich bin etwas schwer von Begriff heute:

Zunächst mal habe ich einen mit Gimp gestalteten Banner. Dier Banner enthält auch die Lupe. Der Griff der Lupe ragt schräg nach unten aus dem Banner raus. Ich hab nun den Banner in zwei Teile zerschnitten. Zunächst den rechteckigen Banner als auch ein weitere recheckiges Element welches im rechten drittel nur den Griff der Lupe enthält.

Nun habe ich den Banner per Image-Replacement über den Header geschoben. Anschließend habe ich dem content als Hintergrundgrafik die Grafik mit dem Griff zugeordnet. So weit zu dem ersten Punkt den du angesprochen hast.

Damit wäre die Sache doch eigentich schon erledigt. Ichh weiß nicht was mir diese beiden Punkte dann noch nützen bzw. vielleicht versteh ich immernoch nicht genau was du damit meinst.

Warum muß ich den Inhalt unter das h1-Element schieben?

Warum muß ich das noch nicht zerschnittene Hintergrundbild nochmal zusätzlich ins body-element packen? Die zerschnittenen Teile sind doch schon im header bzw. im content.

[ ] den inhalt unter das h1-element reinverschieben
negativer margin um den inhalt unter den header zu schieben

[ ] das hintergrundbild in das gemeinsame elternelement
das hintergrundbild ins body-element packen (oder was auch immer sonst herum ist

[suit]

Warum muß ich den Inhalt unter das h1-Element schieben?

musst du nicht, das war eine option

Warum muß ich das noch nicht zerschnittene Hintergrundbild nochmal zusätzlich ins body-element packen?

war ebenfalls eine andere option

Die zerschnittenen Teile sind doch schon im header bzw. im content.

dann passts ja - das war wieder eine option

[Anton]

Warum muß ich den Inhalt unter das h1-Element schieben?
musst du nicht, das war eine option

Warum muß ich das noch nicht zerschnittene Hintergrundbild nochmal zusätzlich ins body-element packen?
war ebenfalls eine andere option

Die zerschnittenen Teile sind doch schon im header bzw. im content.
dann passts ja - das war wieder eine option

1.)
Wie bist du denn auf diese Optionen gekommen? Ich meine du must dir doch irgendwas debei gedacht haben?

2.)
In den body hätte ich nämlich auch keine weiteren background mehr einfügen können, da ich diesen background schon für "faux columns" verwende. Was ist eigentich wenn ich doch noch einen background in den Body hätte einfügen müssen? Dann wäre ich wohl um einen weiteren DIV-Container nicht herum gekommen oder?

3.)
Kannst du mir vielleicht noch kurz deine Meinung zu diesem Markup sagen? Es geht dabei um die ganze Seite die einen Schatten mit verlauf wirft (ich brauche also Grafiken wegen dem Verlauf). Hab das Markup dafür so gemacht:

  
<body>  
  <div id="shadowRight">  
  <div id="shadowBottom">  
  <div id="shadowCornerButtonlelft">  
  <div id="shadowWrapperContent">  
    <h1 id="header">  
      <span></span>  
    </h1>  
    <div id="content">  
    </div>  
    <ul id="navigation">  
      ...  
    </ul>  
    <address id="footer"></address>  
  
  </div></div></div></div>  
</body>  

Um die zusätzlichen DIV-Container komme ich wohl nicht herum oder?

[suit]

1.)
Wie bist du denn auf diese Optionen gekommen? Ich meine du must dir doch irgendwas debei gedacht haben?

ja, irgendwas triffts gut - erfahrung, kreativität, hausverstand - such dir was aus[1] :)

Dann wäre ich wohl um einen weiteren DIV-Container nicht herum gekommen oder?

wenn dir wirklich alle elemente (absätze, überschriften, usw) ausgehen, ja (obwohl es auch andere möglichkeiten gäbe, bei denen aber der ie nicht mitspielt)

Um die zusätzlichen DIV-Container komme ich wohl nicht herum oder?

für einen flexiblen schlagschatten (oder runde ecken, grafische rahmen ... kommst du um 4 zusätzliche elemente kaum herum - ich würd sie allerdings anders nennen - wenn shadow mal ein bunter rahmen wird, hast du ein namensproblem :)

[1] hilfe, schon wieder optionen!

[Anton]

Vielen Dank...

... solltest du mal irgendwann ein Buch schreiben sollen, dann sag mir bescheid. Ich werde es sofort kaufen.

PS: Lese grade in dem CSS Mastery das du mir empfohlen hast. Ein wirklich gutes Buch. Nicht so ein Müll wie YAML.

Ach... da fällt mir schonwieder eine Frage ein. Hatte das vor einiger Zeit schonmal gefragt. Da war ich allerdings noch nicht besoners fit im Bezug auf Webdesign. Deshalb jetzt nochmal die Frage:

Hab jetzt einen kleine Webseite basierend auf einem CSS-Layout erstellt, mit der ich eigentlich recht zufrieden bin. Ich würde nun gerne den nächsten Schritt machen und Leuten die keine Ahnung von html haben die Möglichkeit geben, selbst die Inhalte der Seite zu verändern. So wie ich das in Erinnerung habe setzte ich hier am besten ein CM-System eine oder? Kannst du mir vielleicht ein paar Tips geben damit ich möglichst schnell dazu in der Lage bin Seiten zu erstellen, deren Inhalt auch von Laien modifiziert werden kann?

[suit]

Ein wirklich gutes Buch. Nicht so ein Müll wie YAML.

naja, yaml ist ein imho überladenes framework, css mastery ist ein buch welches bestehnde grundlagen verfeinert und erklärt, wie mans selbst macht - das sind 2 völlig andere ansätze :)

Kannst du mir vielleicht ein paar Tips geben damit ich möglichst schnell dazu in der Lage bin Seiten zu erstellen, deren Inhalt auch von Laien modifiziert werden kann?

wie du schon sagst, ein cms - drupal, imperia, typo3, koobi, typolight - such dir was aus - von kostenlos bis extrem teuer bekommst du alles was du willst

[Anton]

Ich hab mich ganz am Anfang (vor drei Monaten) mal mit Joomla beschäftigt. Das will ich aber nichtmehr nutzen. Gefällt mir nicht.

Ich denke wohl ich werde Type3 nutzen. Was denkst du wie lange es an Einarbeitungszeit benötigt, bis man Typo3 so beherscht, dass man Laien ihre Inhalte selbst ändern lassen kann?

Welche Vorteile habe ich eigenltich noch wenn ich auf das CM-System umsteige? Ich meine mal abgesehen davon das es momentan noch nicht möglich ist das eine Laie inhalt auf meinen Webseiten verändern kann bin ich mit meiner Seite eigentlich recht zufrieden. Das einzige was mir momentan einfällt ist eine Menge Einarbeitungszeit. Sonst eigentlich nix.

Naja eine Sache gibt es da vielleicht doch noch. Ich würde gerne mal einen Webshop realisieren. Bietet Typo3 sowas an?

[suit]

Was denkst du wie lange es an Einarbeitungszeit benötigt, bis man Typo3 so beherscht, dass man Laien ihre Inhalte selbst ändern lassen kann?

in 1 bis 2 stunden kann man so ziemlich jedem erklären, wie er mit typo3 inhalte wartet

Welche Vorteile habe ich eigenltich noch wenn ich auf das CM-System umsteige?

du musst nichts selbst programmieren

Das einzige was mir momentan einfällt ist eine Menge Einarbeitungszeit.

im gegensatz zum programmieraufwand, den du hättest, wenn du es selbst machtest

Ich würde gerne mal einen Webshop realisieren. Bietet Typo3 sowas an?

typo3 hat 2 große shop-erweiterungen, diese sind beide imho aber nicht das gelbe vom ei, kommt auf die dimension des shops an

[Anton]

Welche Vorteile habe ich eigenltich noch wenn ich auf das CM-System umsteige?
du musst nichts selbst programmieren

Kurz und gut ich hätte mir die ganze Einarbeitung in CSS-Layouts HTML, PHP usw. sparen können, weil ich mir in Typo3 letztentlich doch wieder alles zusammenklicke?

[suit]

Kurz und gut ich hätte mir die ganze Einarbeitung in CSS-Layouts HTML, PHP usw. sparen können, weil ich mir in Typo3 letztentlich doch wieder alles zusammenklicke?

nein - du benötigst für ein ordentliches cms bzw framework auf jeden fall ein template (html und css sind da unumgänglich) zusammengeklickte oder fertige templates wie bei joomla oder wordpress gibts für typo3 soweit ich weiss nicht (mit ausnahme verschiedener dummys) aber die übliche praxis ist: selbst machen und dann typo3 dazu bringen, genau diesen code zu generieren

sich php zu sparen ist ansichssage - typo3 ist ein framework und bietet viele funktionien, die man häufig braucht, gleich direkt als bordmittel - alles weitere muss aber durch extensions erledigt werden, diese werden in php geschrieben - für vieles stellt typo3 schon entsprechende schnittstellen breit (zb für datenbanken), aber im grunde genommen muss man immer noch php programmieren

[Anton]

nein - du benötigst für ein ordentliches cms bzw framework auf jeden fall ein template (html und css sind da unumgänglich) ... selbst machen und dann typo3 dazu bringen, genau diesen code zu generieren

Das Template (mein CSS-Layout) habe ich ja bereits. Ich ging bisher davon aus, dass ich dieses Template einfach nur in Typo3 importieren muß. So wie ich dich jetzt allerdings verstanden habe muß ich Typo3 dazu bringen, das es das was ich erstellt habe automatisch generiert. Und diese Generierung erreiche ich indem ich Typo3 mit Hilfe dessen interer Scriptsprache beschreibe wie wie es das CSS-Layout und das entsprechende Markup generieren soll.

Ist das soweit richtig?

[suit]

nein - du benötigst für ein ordentliches cms bzw framework auf jeden fall ein template (html und css sind da unumgänglich) ... selbst machen und dann typo3 dazu bringen, genau diesen code zu generieren

Das Template (mein CSS-Layout) habe ich ja bereits. Ich ging bisher davon aus, dass ich dieses Template einfach nur in Typo3 importieren muß.

"importieren" geht auch, dafür gibts extensions wie den template autoparser - allerdings sind die imho müll

So wie ich dich jetzt allerdings verstanden habe muß ich Typo3 dazu bringen, das es das was ich erstellt habe automatisch generiert. Und diese Generierung erreiche ich indem ich Typo3 mit Hilfe dessen interer Scriptsprache beschreibe wie wie es das CSS-Layout und das entsprechende Markup generieren soll.

Ist das soweit richtig?

jein - es ist weit weniger kompliziert als du denkst

du musst ansich nur dein html-template mit markierungen versehen, die typo3 dann "anfassen" soll - so ähnliche wie includes

also etwa so

<div id="inhalt">  
<!-- ###INHALT### kommt hier -->  
  <p>foo</p>  
<!-- ###INHALT### endet hier -->  
</div>

mit dem richtigen typoscript am anderen ende sorgt das dafür, dass alles zwischen den beiden kommentaren weggeworfen und durch die inhalte aus der datebank ersetzt wird

weit weniger kompliziert als du denkst

[Anton]

Ok, dann ist mir das Grundprinzip soweit klar. Ich werde wohl noch diesen Monat etwas an meiner jetzigen Seite herumspielen und dann Anfang Februar mit Typo3 loslegen.

Meine erstes Primärziel:

mein CSS-Layout und das Markup so modifizieren, dass es in Typo3 verwendet werden kann. Anschließend nachdem Type3 dann das layout generiert hat herausfinden wie ich, basierend auf dem jetzt bestehenden Type3 Projekt ,dass anstellen kann, damit das editieren der Inhalte auch von Laien umgesetzt werden kann.

Kannst du mir ein gutes Tutorial bzw. ein gutes Buch empfehlen das mich möglichst schnell dazu bringt mein Primärziel zu erreichen. Es wäre sehr gut, wenn der ganze Kram in Deutsch gehalten wäre. Nichts gegen Englisch aber in Deutsch hab ich schon Probleme genug.

[suit]

mein CSS-Layout und das Markup so modifizieren, dass es in Typo3 verwendet werden kann.

das ist eine schleche idee - bringe eher typo3 dazu, den code zu produzieren, den du gerne hättest - das ist nicht weiter schwierig, der einzig generierte code wird vermutlich das menü und der inhalt sein - ein listenemnü zu generieren ist einfach und der inhalt besteht sowieso nur aus standardkram (absätze, überschriften, tabellen, listen ...)

Anschließend nachdem Type3 dann das layout generiert hat herausfinden wie ich, basierend auf dem jetzt bestehenden Type3 Projekt ,dass anstellen kann, damit das editieren der Inhalte auch von Laien umgesetzt werden kann.

das problem ist: wie erklärst du es dem kunden/laien :)

das rausfinden selbst sollte nicht das problem sein, ist eigentlich ziemlich simpel

Kannst du mir ein gutes Tutorial bzw. ein gutes Buch empfehlen das mich möglichst schnell dazu bringt mein Primärziel zu erreichen.

für dein primärziel: gibts bücher genug, die sinnlosen und schlechte code empfehlen und den von typo3 generierten standardmüll publizieren :)

zum anderen thema: da gibts afaik nix brauchbares, aber das ist mit hausverstand lösbar :)

Es wäre sehr gut, wenn der ganze Kram in Deutsch gehalten wäre.

typo3.org hat ein schnelleinstiegsanleitung

die bezieht sich allerdings auf eine dummy-seite dies nicht mehr gibt, aber es sollte halbwegs klar sein, was gemeint ist :D

[Anton]

Anschließend nachdem Typo3 dann das layout generiert hat herausfinden wie ich, basierend auf dem jetzt bestehenden Typo3 Projekt ,dass anstellen kann, damit das editieren der Inhalte auch von Laien umgesetzt werden kann.

das problem ist: wie erklärst du es dem kunden/laien :)

Du sagtest doch eben das sowas in 1 bis 2 Stunden einem Kunden erklärt ist. Demnach dürfte das doch eigentlich keine Probleme darstellen oder?

PS:
Wenn es nichts gutes gibt? Warum veröffentlichst du dann nix? Meines erachtens hast du das größte Wissen in diesem Zusammenhang von allen Leuten die ich kenne. Die Leute würden sich darum reißen zumal du ja auch ziemlich gut erklären kannst.

[suit]

Du sagtest doch eben das sowas in 1 bis 2 Stunden einem Kunden erklärt ist. Demnach dürfte das doch eigentlich keine Probleme darstellen oder?

einloggen, 3x klicken, tippen, 1x klicken = inhalt verändert

mit erklärung "wie mache ich eine überschrift", "wie mache ich eine tabelle" usw - ist das schnell gemacht

wer mit word umgehen kann, findet sich auch in dem in typo3 integrierten editor zurecht

Wenn es nichts gutes gibt? Warum veröffentlichst du dann nix?

bin grade dabei, in form eine webseite - allerdings zieht sich das mangels zeit enorm

Meines erachtens hast du das größte Wissen in diesem Zusammenhang von allen Leuten die ich kenne.

das halte ich für ein gerücht, es gibt nur einen reisigen haufen von leuten die genau garnix wissen, da sticht mal als durchschnittsmensch doch schon stark hervor - aber die diskussion "dumme masse" hatten wir vor kurzem schon ;)

Die Leute würden sich darum reißen zumal du ja auch ziemlich gut erklären kannst.

ich mache (kostenpflichtige) workshops, das muss reichen :) ein buch zu schreiben wurde mir in der tat auch schon nahegelegt, ich hab mich noch nicht daran versucht ;)

aber wie gesagt: die backend benutzung von typo3 kann man jedem menschen (sofern er bereits mal irgendwas mit einer textverarbeitungssoftware und einem browser zu tun hatte) recht schnell erklären - wenn die erfahrung mit einer textverarbeitungssoftware fehlt, dauerts ein bisschen länger, ist aber durchaus möglich

[Detlef G.]

Hallo suit

… kommst du um 4 zusätzliche elemente kaum herum

Es müssen nicht _immer_ vier _zusätzliche_ Elemente sein.

Auf Wiederlesen
Detlef