Kopfzeile in zwei Bereiche unterteilen

[Benny]

Hallo,
bin noch recht neu und unerfahren mit Contao. Möchte gerne die Kopfzeile meiner HP in zwei Bereiche unterteilen - habe gebastelt und bin froh, nichts kaputt gemacht zu haben.

Kann mir jemand auf die Sprünge helfen?

bb Benny

[Jenna]

Hallo Benny,

ich weiß jetzt ja nicht, was Du in der Kopfzeile haben möchtest, aber eine Möglichkeit wäre:

- Layout anlegen (Name z.B. geteilte Kopfzeile)

- im Layout 2 Kopfzeilen anlegen ( unten in der Pfeilliste)

- vorher 2 Module anlegen, z.B. Zufallsbild 1 + 2

- diese jetzt im Layout bei Kopfzeile 1 + 2 auswählen

- in Deiner CSS .header_left und .header_right anlegen und darüber positionieren mit

margin / padding usw.

- die beiden .header..... dann noch dem linken und rechten Modul zuordnen

[Anke]

Hallo Benny,

ich würde sagen, du erstellst am besten ein "Modul" vom Typ HTML und schreibst dort deinen HTML-Code für den Kopfbereich rein, in deinem Fall zwei DIVs für die beiden Bereiche, vielleicht umschlossen von einem Container-DIV, damit du die Kästen im Fall des Falles leichter ansteuern und formatieren kannst. Den DIV's gibt du am besten gleich Klassennamen.

Beispiel:
<div class="myheadercontainer">
<div class="kasten1">... Inhalt ...</div>
<div class="kasten2">... Inhelt ...</div>
</div>

Dann bindest du dein Modul in dein "Seitenlayout" ein, in der Kopfzeile.

Das Styling selbst nimmst du dann im Stylesheet vor.

Sieh dir mal die diversen Dokumentationen an (suchen oder über die contao.org-Seite), die sind enorm hilfreich, auch mit Beispielen. Ebenfalls sehr empfehlenswert sind die Contao-Bücher. Viel Spaß und gutes Einarbeiten,

Anke

[Benny]

Ha!

[QUOTE=Anke;95765]Hallo Benny,

Beispiel:
<div class="myheadercontainer">
<div class="kasten1">... Inhalt ...</div>
<div class="kasten2">... Inhelt ...</div>
</div>

Dann bindest du dein Modul in dein "Seitenlayout" ein, in der Kopfzeile.

Das Styling selbst nimmst du dann im Stylesheet vor.


Danke Anke und Jenna

habs hinbekommen, dauerte allerdings ein wenig... Bin noch völlig jungfräulich, was das Arbeiten und Umgehen mit html und css angeht. Das definieren von Klassen und IDs (drück ich mich da richtig aus?) ist recht komplex und ich glaube, selbst die afrikanische Klicksprache oder Mandarin ist leichter zu lernen ...

Zumindest machts mir Freude und, wenn man so schnelle, nette und konstruktive Hilfe im Forum bekommt, sehe ich nicht ganz so schwarz.

Liebe Grüße
Benny

[Andreas]

Hallo Benny,

arbeite auf jeden Fall mit Firebug o.ä. (falls es da überhaupt was Ähnliches gibt), dann ist das mit den IDs und Klassen bald ein Kinderspiel. IDs und Klassen sind sogenannte HTML-Attribute, sie werden in HTML-Elemente, z.B. DIVs, eingetragen. id="meineID" class="meineKlasse1 meineKlasse2". Benutze wenn es geht nur Klassen, da IDs auf einer Seite nur einmal erscheinen dürfen. Ein Element kann auch mehrere durch Leerstellen getrennte Klassen (nicht IDs) erhalten, siehe oben. Lies dich bei selfhtml.org ins Kapitel CSS ein. Damit du z.B. auch keine falsche Schreibweise benutzt.

Meistens (schätze mal zu 98%) brauchst du keine eigenen IDs od. Klassen zu definieren, da Contao schon jede Menge davon im Quelltext aufweist. Mit Firebug kannst du sie dir am einfachsten anzeigen lassen.

Ankes Lösung ist nicht so optimal, da dir damit viel von der Flexibilität Contaos verloren geht. Du kannst dann keine dynamischen Objekte mehr dort hinein laden, außer mit Inserttags. Modul-Typ HTML immer nur dann benutzen, wenn es wirklich nicht anders geht.

Die Lösung von Jenna ist da besser. Du brauchst ja nur zwei verschiedene Module im Seitenlayout in die Kopfzeile zu laden. Das macht man sowieso meistens. z.B. das Logo, den Titel, die Topnavigation und die Hauptnavigation. Das wäre dann z.B. schon 4-geteilt.

Möchtest du die Möglichkeit haben Artikel in zwei verschiedene Bereiche in der Kopfzeile zu laden, dann kannst du einen eigenen Layoutbereich anfertigen. Benutze dann die Kopfzeile als deinen 1. und den eigenen Layout-Bereich als 2. Bereich. Bei den Artikeln kannst du dann auswählen in welchem Bereich sie erscheinen sollen.

Aber immer im Auge behalten 'keep it simple'.

Gruß

[Jenna]

Hallo Benny,

ich stimme Dir zu, Anfangs hätte ich Mandarin auch für einfacher gehalten,

aber wenn es Dir Spaß macht, wirst Du keine Probleme mit Contao haben.

Generell lass Dich nicht verwirren:

Jedes Element (Bild, Text, Überschrift, Navigation, Newsboxen... usw.) besitzt eine Klasse, hat also einen eigenen Namen wie z.B. .image_container, darüber kannst Du das Aussehen und die Positionierung steuern.

Klasse fängt immer mit . an

ID immer mit #

Mit Firebug im Firefox findest Du die Klassen und kannst diese in der CSS ändern, probiere einfach aus, was passiert wenn Du Werte änderst, neue hinzufügst.

Die CSS aber vorher sichern..

hier einiges zum Einstieg:

http://www.contao-community.de/showthread.php?49-TYPOlight-CSS-Klassen-und-IDs&pp=40

http://www.css4you.de/

http://www.css-info.de/css-kurs/

[He........]

hier einiges zum Einstieg:

und hier noch ein Einstieg der Spaß macht, weil man direkt mitbauen kann.

[Andreas]

Klasse fängt immer mit . an

ID immer mit #

Kleine Korrektur. Weder der Klassenname noch die ID-Bezeichnung fängt mit Punkt oder Raute an, ist sogar verboten. Der Klassenselektor fängt mit einem Punkt an, gefolgt von dem Klassennamen. Der ID-Selektor fängt mit einer Raute an gefolgt von der ID-Bezeichnung.

class="klassenname"
Klassenselektor => .klassenname

id="idBezeichnung"
ID-Selektor => #idBezeichnung

Gruß

[Jenna]

ach herrje, ja danke schön, das hab ich etwas konfus beschrieben..

dabei sollte es nur einfacher werden

[Andreas]

Ja, ich weiß, hört sich ein wenig nach Kleinkrämerei an. Mir gelingt es auch nicht immer die korrekten Termini zu finden, bin aber bemüht . Im Endeffekt haben wir dann alle was davon. Hab schon erlebt, dass sich in sonem Forum auf einmal ganz schnell was Falsches einbürgert und das macht dann die Runde wie ein Lauffeuer.

Hier in dem Forum darf ich ja davon ausgehen, dass sich fast nur Webadmins aufhalten (ich schätze mal 90%). Wenn wir uns dann recht nahe an die ursprünglichen Begriffe vom w3c und vom Contao-Core (BE) halten, dürfte die Verständigung an vielen Stellen leichter von der Hand gehen.

Gerade diejenigen, welche hier viel Hilfe leisten, sollten auf jeden Fall bemüht sein. Der Webadmin-Anfänger holt sich ja auch Infos von anderen Seiten und ist bestimmt froh, wenn er die Begriffe dort wiederfindet .

Das war jetzt einfach nur mal so allgemein in die Runde gesprochen, nicht dass du dich da jetzt angegriffen fühlst. Ich weiß, ich bin oft ein Kleinkrämer, passt aber ganz gut zu meinem Job als Webadmin, da muss man sehr exakt arbeiten. Deswegen bin ich ja auch kein Ausdruckstänzer geworden

Gruß von Andreas

[Jenna]

@Andreas,

damit hast Du völlig Recht, ich finde das auch gar keine Kleinkrämerei, umso besser, wenn
nochmal nachkorrigiert wird, das hab ich mir jetzt auch exakt so abgeschrieben (extra per
Hand, damit sich das mal einprägt)

Hoffe, wir haben Benny jetzt nicht so verwirrt, das er doch mit der afrikanischen
Klicksprache startet anstatt mit Contao

[Anke]

Einen schönen Sonntagmorgen allerseits,

dann wollen wir ihm doch noch verraten, dass es so auf der Seite im HTML-Code steht

class="klassenname"

und so in der CSS-Datei:

.klassenname

LG,
Anke

[Benny]

Danke ...

... für die vielen Rückmeldungen. Ich habe das Problemchen ja nun gelöst und fand Ankes Idee am einfachsten umzusetzen. Ob sie (die Idee, nicht Anke) die Flexibilität einschränkt, werde ich dann ja noch sehen. Soweit muss ich aber erst mal kommen ...

Ich habe mir ein Template gekauft, um schneller voranzukommen - hier ist es nun schwer, bestehende "Verknüpfungen" zu erkennen. Habe ich euch richtig verstanden, dass ich für jedes Element eine eigene Klasse definieren und das Element dann verschieben kann?

Vielleicht kann mir noch jemand sagen, woran es liegt, dass Mails aus meinem Formular auf der HP nicht an mich weitergeschickt werden...

Danke im Vorraus und herzliche Grüße
Benny

[Andreas]

...hier ist es nun schwer, bestehende "Verknüpfungen" zu erkennen.

...Habe ich euch richtig verstanden, dass ich für jedes Element eine eigene Klasse definieren und das Element dann verschieben kann?

...Vielleicht kann mir noch jemand sagen, woran es liegt, dass Mails aus meinem Formular auf der HP nicht an mich weitergeschickt werden...

...Ich vermute du meinst damit die Zusammenhänge der Komponenten und so. Ja, das ist schwer wenn du als Anfänger direkt mit einem fertigen Template anfängst. Am besten ist es, wenn du mal eine Seite von Anfang an neu aufsetzt, siehe hier: http://de.contaowiki.org/Die_erste_Webseite

...Ja und nein. Contao liefert dir "nur" HTML-Quelltext. In dem Quelltext findest du bereits jede Menge Klassen. Mit CSS-Stylesheets formatierst du dein HTML (gestaltest das Aussehen, machst die Seite schön ). Du musst dir also HTML- und CSS-Kenntnisse aneignen. Ohne das kannst du auch mit Contao keine Website erstellen, bzw. nicht als Webadmin fungieren.

...Die Antwort hierzu findest du sicherlich hier im Forum.

Gruß

[Anke]

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