Kopfzeile in zwei Bereiche unterteilen

[Benny]

...

...Du musst dir also HTML- und CSS-Kenntnisse aneignen. Ohne das kannst du auch mit Contao keine Website erstellen...

...Sehr empfehlenswert weil leicht verständlich, anschaulich und mit Praxistipps: "Jetzt lerne ich CSS", erschienen bei Markt + Technik...

--> 1 Artikel wird versandt von Amazon EU S.a.r.L.

(mehr muss ich dazu wohl nicht mehr sagen)

(wobei, guckt mal unter herrpape.de ... ganz so schlecht ists bisher nicht )

[Anke]

Sieht schon ganz gut aus - und Pauker lernen ja strukturiert ;-)))

[Andreas]

Und schon ist's passiert, weil du den HTML-Code selbst gezimmert hast. Die IMGs sind nicht richtig geschlossen und es fehlt jeweils ein ALT-Attribut.

Für diese Lösung brauchst du nur einen Artikel mit zwei Inhalts-Elementen vom Typ Bild zu erstellen. Dann ein Modul vom Typ HTML mit dem Inserttag zu dem Artikel. Dieses Modul dann im Seitenlayout in der Kopfzeile einbinden. Vorteil: Du kannst Änderungen leichter durchführen und der HTML-Code wäre fehlerfrei.

Such dir mal die Seite mit den Insert-Tags auf contao.org und schau dir an, was es so alles gibt.

Hier findest du eine genaue Beschreibung, wie man sowas macht http://www.contao.org/blog-leser/ite...-pflegbar.html Unten drunter ein Kommentar von mir, wie ich es persönlich am liebsten umsetze.

Im Prinzip hätte deine Frage schon anders lauten müssen, nämlich 'wie bekomme ich 2 Bilder in die Kopfzeile'.

Aber trotzdem viel Spaß weiterhin mit Contao

[Benny]

Moin Andreas,
habe deinen Weg befolgt und ein das entsprechende Modul angelegt. Vorteil ist zu erkennen... Nun versteh ich auch, was "Flexibel" in diesem Zusammenhang heißt.

Allerdings schaffe ich es nun nicht, das Männchen in dieselbe Zeile wie das Text-Bild zu bringen. Ausserdem ist der Hintergrund der beiden Bilder weiss, obwohl es eigentlich transparent in der gif-Datei sein sollte. Denke, dass sollte aber zu ändern sein. Der Datensatz lautet ID 261 bzw. 262. Um diesen über Css ansprechen zu können
müsste doch id="261" richtig sein, oder (vielleicht warte ich lieber noch aufs Buch)

vg
benny

[Andreas]

Hol dir erst mal Firefox und dann Firebug.

Mit Firebug siehst du links den HTML-Code mit den Klassen und IDs in den HTML-Elementen. Wenn du ein Element markierts, siehst du rechts die CSS-Formatierungen dazu aus deinen vom Template erzeugten CSS Dateien. Du kannst die Selektoren, Eigenschaften und Werte direkt dort bearbeiten und siehst sofort das Ergebnis. Ist aber nur temporär. Wenn du die Seite neu lädst, sind deine Veränderungen Vergangenheit. Probier auch mal die Pfeiltasten zum Verändern der Werte, das macht Spaß. Die IDs im BE (Backend) haben nichts damit zu tun.

Der Rest ist ein wenig CSS. Die Hintergrundfarbe ist bestimmt einem Element vergeben, in welchem das Bild drin sitzt. Positionieren tust du auch mit CSS. Genaue Infos dazu holst du dir bei de.selfhtml.org im Kapitel Stylesheets, oder bei css4you.de. Ich bevorzuge selfhtml, ist aber Geschmackssache.

Tip: Im Header kannst du ruhig schon mal mit position:absolute; positionieren, der ist ja meist recht statisch. Im Allgemeinen wird das aber weniger benutzt, da es auch viele Risiken mit sich bringt.

Gruß

[Benny]

Mit Firebug siehst du links den HTML-Code mit den Klassen und IDs in den HTML-Elementen. Wenn du ein Element markierts, siehst du rechts die CSS-Formatierungen dazu aus deinen vom Template erzeugten CSS Dateien.

Danke dir und, ... ok, ... soweit erledigt und mit gearbeitet. Dennoch hat es mir nicht dabei geholfen, herauszufinden, was denn nun der passende Selektor ist. So z.B., wenn ich ein Bild auf meiner Seite mittels css-Formatierung positionieren möchte? Irgendwie finde ich nicht die passende Schreibweise ... (und das Buch kommt erst morgen)

[Andreas]

Ach, dann hast du ja noch die ganze Nacht um dich hier einzulesen: http://de.selfhtml.org/css/formate/zentrale.htm

[Benny]

Ich hoffe nur, dass ihr alle auch mal so angefangen habt, wie ich

Melde mich morgen wieder

[Andreas]

Damals gab es so feine Sachen wie heute noch nicht. Ich hatte ein sehr einfaches Buch über HTML (mit vielen Fehlern) dort stand drin, wie man Notepad von Windows öffnet und eine Datei mit der Endung .htm abspeichern sollte, was TAGs sind HTML, HEAD, BODY, P und A (DIV und SPAN gab es noch nicht). Dann sollte man diese Datei mit dem Internetexplorer 3 öffnen. Und es war wie Magie, obwohl man in die Datei so viel reingeschrieben hatte stand da im Browser trotzdem nur 'Hello world!'.

Das Buch hatte ich in der Badewanne gelesen. Danach habe ich mir nen Wolf gesucht und mit Selfhtml und dem HTML-Editor Phase5 von Uli Meybohm (lohnt sich heute nicht mehr, da er kein UTF-8 unterstützt) kam ich der Sache dann so langsam auf die Schliche. Und was hab ich mir einen Wolf formatiert mit den abstrusesten Tabellenverschachtelungen um bestimmte Probleme zu lösen.

Sind jetzt 14 Jahre her. Und es gibt immer noch so viel zu entdecken, umzusetzen und zu lernen.