Anfänger - Layout Fragen

Druckbare Version

20.04.2013, 17:03
MarcoW

Anfänger - Layout Fragen

Hallo,

ich bin neu hier und habe mir fest vorgenommen, meine Homepage mit Contao zu erstellen. Ich habe mir Typo3, Contenido, Drupal und Contao angesehen und mich nun entschieden. Das hat aber jetzt nichts mit meinen Anfängerfragen zu tun. Ich möchte das System nun von Grund auf lernen, habe keine Eile und einige Ideen, aber vor dem Design wollte ich nun erst einmal ein paar Dinge durchtesten.

Meine Beispielseite findet Ihr unter:

Nun zu meinen Fragen:

Ich habe zum Testen ein Layout mit allen möglichen Bereichen erstellt (außer eigene), denen habe ich mal zum Test jeweils das Modul Navigation zugewiesen. Ich erwarte also, dass mir in jedem Bereich (#header, #left, #right ...) das selbe angezeigt wird. Ich habe mit CSS jetzt folgendes eingetragen um mal zu sehen ob das Grundgerüst soweit passt:

Wenn man sich das anschaut verhält sich der #header und #footer so wie ich es erwartet hatte, aber im Mittelteil ist das irgendwie verschoben. Aber warum? Ich komme leide rnicht drauf.
#main ist übrigens der graue Bereich, #right der hellblaue und #left der lila Bereich. Ist halt irgendwie alles verschoben ...

Dann habe ich die min-height von #main auf 500px gestellt um zu sehen wie sich die linke und rechte Spalte bezüglich der Hintergrundgrafik verhalten. Der Hintergrund der rechten Spalte nimmt die Höhe des Moduls an, ich möchte aber, dass wenn #main später mal viel Inhalt hat, die Spalten #left und #right auf die selbe Höhe gedehnt werden und somit der Hintergrund immer mitlaufen (hoffe das war verständlich?).

Kann mir da jemand sagen was ich falsch mache?

Würde mich über Unterstützung freuen, danke schon mal an alle die mir helfen können/wollen.

Gruß
Marco
20.04.2013, 17:30
MarcoW

Spalten nur wenn im Layout definiert

Hallo,

also das mit den Spalten kann ich beheben indem ich deren Breite im Layout direkt eingebe statt diese erst im CSS zu definieren, aber warum ist das so?

Gruß
Marco
20.04.2013, 18:04
MarcoW

Okay,

ich warte das nächste mal mit dem Beitrag, habe auch das mit den Spalten mit folgendem Code lösen klönnen:

<script>
// equal height colums
var h = document.getElementById('container').offsetHeight;
document.getElementById('left').style.height = h + 'px';
document.getElementById('main').style.height = h +'px';
document.getElementById('right').style.height = h + 'px';
</script>

Danke trotzdem!
20.04.2013, 21:14
Lego2013

Schau Dir mal das Buch von Peter Müller an: "Webseiten erstellen mit Contao 3". Wir sind auch erst vor kurzem von TYPO3 auf Contao umgestiegen und das Buch war der Bringer. Du entwickelst eine am Ende recht komplexe Beispielseite komplett. Das Durcharbeiten dauert nur 2 Tage und Du hast ein sehr gutes Verständnis für Contao.

Ich kann aus eigener Erfahrung nur sagen, dass es ein tolles System ist und mega einfach, wenn man es erst einmal verstanden hat. Wir haben jetzt schon 3 Projekte damit gemacht und alles hat super geklappt.

Viel Spass beim Lernen!
20.04.2013, 21:51
wulf

irgendwie vermisse ich den link zur beispielseite
20.04.2013, 23:14
MarcoW

Danke!

Zitat:

Zitat von Lego2013

Schau Dir mal das Buch von Peter Müller an: "Webseiten erstellen mit Contao 3". Wir sind auch erst vor kurzem von TYPO3 auf Contao umgestiegen und das Buch war der Bringer. Du entwickelst eine am Ende recht komplexe Beispielseite komplett. Das Durcharbeiten dauert nur 2 Tage und Du hast ein sehr gutes Verständnis für Contao.

Ich kann aus eigener Erfahrung nur sagen, dass es ein tolles System ist und mega einfach, wenn man es erst einmal verstanden hat. Wir haben jetzt schon 3 Projekte damit gemacht und alles hat super geklappt.

Viel Spass beim Lernen!

Vielen Dank für den Tip, werde ich mal nach sehen und mir ist jede Hilfe recht!

Danke
Marco
20.04.2013, 23:15
MarcoW

Mein Fragen konnte ich mir ja inzwischen selbst beantworten, vielen Dank an alle!
20.04.2013, 23:35
pmmueller
Zitat:

Zitat von wulf

irgendwie vermisse ich den link zur beispielseite

And here it is:
See you there ;)
21.04.2013, 12:49
QuietschieMacnroy

Zitat:

Zitat von Lego2013

Schau Dir mal das Buch von Peter Müller an: "Webseiten erstellen mit Contao 3". (...)

Da kann ich mich nur anschließen. Buch vorgestern erhalten und echt gut geschrieben; unterhaltsam und informativ. Somit DRINGENDE EMPFEHLUNG :-)

Jetzt fehlt mir nur noch die Präsentation in Form eines Videos. Das Vorwort von Leo hat mich neugierig auf Deinen Präsentationsstil gemacht, Peter. ;-)

Viele Grüße
Stephan
21.04.2013, 13:11
planepix

Hallo Stephan,

dann schau mal hier:
http://www.youtube.com/watch?feature...ShhLzrUU#t=97s
21.04.2013, 13:19
stefan-at-work

Zitat:

Zitat von QuietschieMacnroy

Jetzt fehlt mir nur noch die Präsentation in Form eines Videos. Das Vorwort von Leo hat mich neugierig auf Deinen Präsentationsstil gemacht, Peter. ;-)

Kannst Du auch live erleben auf der Contao-Konferenz
21.04.2013, 16:15
Lego2013

Es gibt übrigens noch ein Videotraining zu Contao 3 und das ist von Harry Boldt, erschienen bei Video2Brain: http://www.video2brain.com/de/contao.

Das ist auch super, wenn man mehr der audiovisuelle Typ ist. Ebenfalls sehr gut gemacht und mindestens eine tolle Ergänzung zu Peter's Buch.
21.04.2013, 16:25
planepix

Meines Wissens ist Harrya Video 2010 erschienen, also zu 2.9.
Über eine neuere, Contao3-relevante Version, ist auf den Websites nicht zu finden.

Auf jeden Fall eine sinnvolle Ergänzung zu allen "Guck- und Druckwerken" zu Contao.
21.04.2013, 16:45
pmmueller

Soweit ich gehört habe, soll da im Sommer ein neues VT von Harry folgen, aber bei Bedarf einfach bei Harry nachfragen.

Und am 5. und 6. Juni haben wir wieder Seminare zu "Contao - Ready for Mobile" und "Contao Responsive Grid" geplant. "Liver" geht's nicht ;)
21.04.2013, 17:01
Sabine_P

Anfänger

Ich würde es für den Anfang nicht zu kompliziert machen. Die Höhen der Container ergeben sich doch von selbst.
Für die Hintergrundbilder kannst du diesen Css-Contao-Editor nehmen. Für den Anfang ist der ganz praktisch.
Du kannst dir auch so ein kostenloses Theme installieren und dir dann angucken, wie das gemacht ist.
http://www.contao-theme.de/artikelli...os-themes.html
22.04.2013, 08:21
Harry

Es stimmt. Mein aktuelles Videotraining basiert nicht auf Version 3. Zum Grundverständnis für die Zusammenhänge in Contao ist es nach wie vor geeignet, denke ich. Die mit Contao 3 hinzugekommenen Features werden verständlicherweise nicht behandelt. Es wird daher Zeit für eine Update, das auch bereits in der Planung ist.

Gruß
Harry
26.04.2013, 23:09
QuietschieMacnroy

Zitat:

Zitat von stefan-at-work

Kannst Du auch live erleben auf der Contao-Konferenz

Wenn es nur so einfach wäre ;-)
Zeitliche Planung ist bei mir aktuell nicht wirklich gegeben (4 Wochen alter Sohn). :-)
27.04.2013, 09:32
MarcoW

Hallo,

wollte noch mal allen danken die sich an diesem Beitrag beteiligt haben. Das Buch von Herrn Müller steht mittlerweile auch schon in meinem Schrank, leider kam ich noch nicht dazu etwas zu lesen, aber das werde ich sicher! Ich hatte mich vor Jahren schon mal intensiv mit HTML und CSS auseinander gesetzt, dazwischen aber überhaupt nicht mehr. Da ich immer gerne mein eigenes Ding machen möchte, werde ich auch kein Theme installieren sondern will mein eigenes bauen, ich finde immer das man das Ganze dadurch besser verstehen lernt wenn man es von Grund auf macht. Das ich mich für das richtige CMS entschieden habe zeigt mir schon die Beteiligung an diesem Beitrag ... vielen Dank euch allen!

Vielleicht kann ich aber noch mal eine Frage stellen:

Schaut euch mal meinen Slider auf der Seite an: http://marcowirth.de/cms
Ich hätte gerne diese Kästchen oben nach rechts gerückt. Leider gelingt es mir nur vertikal zu verschieben (so wie auch die Pfeile links/rechts), horizontal wird irgendwie ignoriert. Woran kann das liegen bzw. wie bekomme ich diese nach rechts?

Danke und Gruß
Marco
27.04.2013, 10:58
stefan-at-work

Hi Marco,

wenn Du Dir das mal mit Firebug oder dem Webdeveloper-Tool anschaust, dann siehst Du das das DIV "cs-buttons-slider-1" folgender CSS-Klasse zugewiesen wurde

Code:

cs-buttons" -> style="left: 50%; margin-left: -27.5px; position: relative;

Hier die Angaben für left z.B. auf 90% setzen und dann sind die Buttons rechts.
27.04.2013, 11:30
kos

Zitat:

Zitat von stefan-at-work

Hier die Angaben für left z.B. auf 90% setzen und dann sind die Buttons rechts.

Die inline-Styles werden in der Datei coin-slider.js aufgrund der gemachten Angaben im BE generiert.
Aus Gründen der Update-Sicherheit würde ich hier folgende CSS-Anweisung nutzen:

Code:

.cs-buttons { left: 90% !important; }
27.04.2013, 12:45
MarcoW

Huhu,

also das mit dem Firebug ist eine riesen Hilfe, ich bin mir auch sicher damit dabei geschaut zu haben, darum habe ich die Kästchen auch von unten nach oben befördern können, das mit dem "left: 90%" hat nicht funktioniert. Habe es jetzt noch mal wie Stefan schrieb gemacht und es hat keine Auswirkung. Der Tipp von kos war aber richtig, wenn man !important dahinter hängt funktioniert es so wie ich mir das wünsche, danke.

Stellt sich mir die Frage was dieses !important denn aussagt? Kann mir das noch jemand sagen?

Danke euch!
27.04.2013, 13:26
kos

Zitat:

Zitat von MarcoW

Stellt sich mir die Frage was dieses !important denn aussagt?

Siehe hierzu z.B. de.selfhtml.org/css/formate/kaskade.htm oder auch
www.mediaevent.de/css/css-kaskade.html
27.04.2013, 14:57
MarcoW

Zitat:

Zitat von kos

Siehe hierzu z.B. de.selfhtml.org/css/formate/kaskade.htm oder auch
www.mediaevent.de/css/css-kaskade.html

Ach ja, SELFHTML ... da war doch mal was :-)

Danke!
27.04.2013, 22:22
pmmueller

Liste der Anhänge anzeigen (Anzahl: 1)

Zitat:

Zitat von MarcoW

Stellt sich mir die Frage was dieses !important denn aussagt? Kann mir das noch jemand sagen?

!important ist ein Teil der Kaskade (Cascading Style Sheets). Falls du das mit der Kaskade wirklich wissen willst, wird das in Little Boxes ausführlich erklärt:
http://little-boxes.de/lb1/11-kaskad...ndardwert.html

Falls der Browser mehrere Anweisungen zur Gestaltung findet, muss er entscheiden, welche davon gilt. Das macht er mit Hilfe der Kaskade. Der Zusatz !important ("1. Sortiere nach Wichtigkeit") sorgt dafür, dass die Anweisung vor der Spezifität der Selektoren und der Reihenfolge der Anweisungen dran kommen (siehe angehängte Übersichtsgrafik).
28.04.2013, 08:55
Harry

Als ich 14 war, also gerade damit befasst, meinen eigenen Stil zu finden, brachte mir meine Mutter eine Lederhose mit. Kein Scherz. "Die ziehst Du morgen zur Schule an!". Das war der Inline-Style. Allein Kraft ihres Amtes hatte meine Mutter 1000 Punkte auf Ihrem Argumentationskonto. Ein paar lächerliche Hinweise auf das Bundesland, auf andere Mitschüler, auf das jämmerliche Aussehen in diesem Outfit, hätten mir vielleicht 120 Punkte eingebracht. In CSS-Notation wären dies eine ID und zwei Klassen gewesen. An diese Erziehungsberechtigten-Inline-Vorgabe war kein Rankommen. Was tun? Ich stampfte mit dem Fuß auf und schrie: "Und ich werde diese Bux nicht anziehen!" Das war das !important. Glücklicherweise hat man bei der Festlegung der CSS-Spezifikationen daran gedacht, eine solche Möglichkeit des sich Wehrens vorzusehen.

Beides, der Inline-Style und das !important, sind erlaubte Methoden. Aber besser wäre es natürlich, liebe Entwickler, wenn man sich gar nicht erst so vehement wehren müsste.

Gruß
Harry