16-Spalten-Grid - Layout "spinnt" auf einigen Seiten, Contao 3.1.0

[Berliner]

Guten Abend liebe Foren-Gemeinde,

meinen Wunsch, ein responsives Design mit einem Grid-System zu lösen, habe ich erst mal abgeschrieben, als ich hier verschiedene Beiträge las, dass ein Grid-System nicht gleichzusetzen ist mit einem responsiven System.

Mein eigentliches Problem besteht allerdings derzeit darin, dass auf einigen! Seiten das Layout nicht stimmt; d.h., dass entweder Headerbild, Text und Navigation nach links, bzw. rechts springen. Aber wie schon erwähnt, nur auf einigen Seiten...

Ich hänge derzeit daran, dass ich einfach die Ursache hierfür nicht finde.

Kurze Eckdaten zur Webseite:
1. 16-Spalten-Grid (1140er Prozent Grid - ohne Holy Grail, 2 Spalten) in Verbindung mit dem Layout-Bilder,
2. es ist nur die basic.css und die mobile.css geladen / angehakt (wobei ich derzeit die mobile.css noch vernachlässigt habe).

Deaktiviere ich den Layoutbilder, wird die Navigation nach unten geschoben und alles ist linksbündig.

Die entsprechende Webseite ist hier zu sehen.

Hier die komplette basic.css; diese wird lt. FF (Firebug) und Chrome (implementiertes Tool) abgearbeitet.

Name: 	basic
Änderungsdatum: 	2013-09-07 17:37
Medientypen: 	all

    Style sheet basic
    body {
        margin:0;
        padding:0;
        background:#dff0f2 url("/files/Heilsteine+Reiki/Hintergrund_blau.gif") center top repeat-y;
        font-family:Ubuntu,sans-serif,arial;
    }

    #wrapper {
        width:1140px;
        min-width:100%;
        position:relative;
        margin-top:0;
        margin-right:auto;
        margin-left:auto;
        height: auto !important;
    }

    Aussehen und Position des Header
    #header {
        position:relative;
        margin-right:auto;
        margin-left:auto;
        padding-top:5px;
        padding-bottom:5px;
        font-family:Ubuntu,sans-serif,arial;
    }

    #container {
        padding-bottom:50px;
    }

    #container,
    .inside {
        position:relative;
    }

    linke Spalte (Navigation)
    #left {
        position:relative;
        float:left;
        margin-top:52px;
    }

    #main {
        width:100%;
        position:relative;
        float:left;
    }

    Hauptspalte
    #main .inside {
        min-height:1px;
        position:relative;
        margin-bottom:20px;
    }

    a,
    body,
    div,
    em,
    input,
    label,
    legend,
    li,
    ol,
    p,
    select,
    span,
    strong,
    td,
    th,
    textarea,
    u,
    ul {
        font:14px/1.5em Ubuntu,sans-serif,arial;
    }

    a,
    body,
    div,
    input,
    label,
    li,
    legend,
    ol,
    p,
    select,
    td,
    th,
    textarea,
    u,
    ul {
        font:14px Ubuntu,sans-serif,arial;
    }

    h1 {
        margin:10px 0 12px;
        padding:0;
        font-size:16px;
        font-weight:bold;
    }

    h2 {
        margin:0 0 6px;
        padding:0;
        font-size:14px;
        font-weight:bold;
    }

    a {
        font-size:16px;
        font-weight:bold;
        text-decoration:none;
        color:#4556a1;
    }

    .mod_navigation {
        width:200px;
        z-index:999;
    }

    Aussehen der Navigation im Level 1
    .mod_navigation a,
    .mod_navigation li,
    .mod_navigation span {
        font:14px/1.5em Ubuntu,sans-serif,arial;
        font-weight:bold;
        color:#055b80;
        text-transform:capitalize;
        text-indent:5px;
    }

    Aussehen der Navigation im Level 2
    .mod_navigation .level_2 a,
    .mod_navigation .level_2 li,
    .mod_navigation .level_2 span {
        font:12px Ubuntu,sans-serif,arial;
        font-weight:normal;
        color:#000;
        text-transform:none;
        text-indent:10px;
    }

    Farbe des aktuellen Menüpunktes
    .mod_navigation span.active {
        font:14px Ubuntu,sans-serif,arial;
        font-weight:bold;
        text-decoration:underline;
        color:#147e87;
    }

    Hover-Effekt im Menü - Farbänderung
    .mod_navigation a:hover {
        font:14px Ubuntu,sans-serif,arial;
        font-weight:bold;
        color:#0e689c;
    }

    Artikel-Darstellung
    .mod_article {
        width:645px;
        position:relative;
        margin:0 0 25px;
        padding-right:0;
        padding-left:0;
    }

    img {
        vertical-align:middle;
        border:0px;
    }

    p,
    pre,
    form,
    figure {
    }

    table {
        border-spacing:0;
    }

    :focus {
        outline:0;
    }

Vielleicht hat jemand von euch schon Erfahrungen mit dem 16-Spalten-Grid und eine Idee dazu?

Des Weiteren habe ich folgende Grundsatzfragen, zu denen mich Eure Meinung und Erfahrung interessieren würde:
1. Ich habe gelesen, dass man ein Raster über die Seite legen kann - Gibt es hierfür schon einen Thread, in der das beschrieben ist?
2. Was ist davon zu halten, Trennungen verschiedener Seiten-Einstellungen via basic.css, layout.css, usw. beizubehalten, bzw. aufzubauen? Ist dieses nur eine Sache der Übersicht?

Und ja... ich weiss, dass es vermessen ist, als Anfänger sich an so was ranzutrauen!

Vielen Dank schon im Voraus für eure Hilfe,

Beste Grüße, Berliner

[ciaobello]

1. Ich glaube Du suchst das hier: https://contao.org/de/news/contao-to...er-chrome.html gibt es auch für den Firefox und Safari.

[Berliner]

1. Ich glaube Du suchst das hier: https://contao.org/de/news/contao-to...er-chrome.html gibt es auch für den Firefox und Safari.

wow... genau das, was ich suchte... Besten Dank dir !!!!

[Berliner]

..nach erfolgreicher Antwort zu dem "Raster" nun natürlich - wie auch anders zu erwarten - meine Frage, ob es hilfreiche Links zum Gestalten eines Grid-Systems, ganz wichtig in deutsch, gibt?

Habe schon diverse Webseiten bei mir abgespeichert, die grundsätzliche Fragen zum Grid-System beantworten. z.B. hier und hier ...
Wie viele Webseiten beschreiben, ist das Grid-System ja prädestiniert dafür, auch nachträglich "Form" in die Webseite zu bringen - und genau dieses Problem habe ich ja, das ich auch mit Firebug etc nicht rausfinde, warum mein Layout so spinnt.

Ich weiß, dass es, gerade in der Website-Entwicklung, fast unmöglich ist, sich deutschsprachige Tuturials oder Anleitungen zu beschaffen, bzw. ohne rudimentäre Englisch-Kenntnisse voran zu kommen. Aber ich gehe davon aus, dass jeder hier sich lieber deutschsprachiges "antut", als englisch-sprachige Seiten erst im kopf zu übersetzen (auch wenn es für einige von uns hier schon unterbewusst geschieht).

Ich bin also dankbar für jeden Tip, der in deutsch erklärt, wie so ein Grid-System aufgebaut wird. (ich möchte keine fertigen CSS oder ähnliches - eher Anleitungen - Wie sonst soll ich dabei lernen )

Besten Dank für eure Tips,

Der Berliner

[Berliner]

..ich hab schon eine recht gute Seite ausgemacht, in der das von mir gewollt verwendete 16-Spalten Grid beschrieben wird (zumindest die Aufteilung). Meine vorhergehende Frage läuft darauf hinaus, wie ich den Head-Bereich der Seite mit den Grid-Angaben und natürlich die CSS gestalte. Damit wäre auch der Kreis geschlossen, in wie fern eine Aufteilung der einzelnen CSS-Dateien in verschiedene "Rubriken", wie Layout, Basic etc., sinvoll ist, geschlossen.

Beste Grüße aus Berlin

[ciaobello]

..nach erfolgreicher Antwort zu dem "Raster" nun natürlich - wie auch anders zu erwarten - meine Frage, ob es hilfreiche Links zum Gestalten eines Grid-Systems, ganz wichtig in deutsch, gibt?

Hast Du mit display:non Dein Contao Goggle-Suche link ausgeblendet


Hier mal ein Vorschläg ausserhalb der Contao Google-Suche:
http://contaogrid.glen-langer.de/

[Berliner]

Hast Du mit display:non Dein Contao Goggle-Suche link ausgeblendet ]

*lach* ja habe ich, weil alle von mir interessanten aufgerufenen, weiterführenden Links eben "englisch-sprachig" waren

Hier mal ein Vorschläg ausserhalb der Contao Google-Suche:
http://contaogrid.glen-langer.de/

..und danke für den "Tritt".. ich glaube, dein Vorschlag bringt mich ein ganz großes Stück weiter
hier habe ich auch diese Sache mit dem 16er-Grid usw. her - zwar abgespeichert, aber leider finde ich noch keine Hinweise darauf, wie die CSS bzw. erstmal der Html-Code im Header gestaltet wird. Das ich die Grids erst mal definieren muss, ist mir klar - allerdings die "Verfahrensweise" noch nicht.

Beste Grüße aus Berlin

Korrektur: ich meinte natürlich HEAD und nicht Header

[Berliner]

..um das mal genauer zu definieren:

Beispielsweise habe ich eine 12er Grid:

Was definiere ich im Head (als HTML),bzw. was in der CSS, wenn mein Header-Bild die volle Breite, also 12 Spalten+Leer-Räume, einnehmen soll?
..Oder, meine linksseitige Navigation soll (entsprechend des derzeitigen Seitenaufbau`s) 220px = 5 Spalten?) einnehmen?

Diese Grundlagen fehlen mir

Beste Grüße

[BugBuster]

Wenn dein Bild die volle Breite hat, dann brauchste keine grid Angabe, du hast ja schon die volle Breite.
Es sei denn es ist ein Hintergrundbild.
Wenn du dir die Grid Definitionen mal direkt ansiehst, dann findest du dort folgendes:

/**
 * For 100% wide, without margin, not within an article
 * e.g. for HTML Modules in header 
 */
.grid16_0 {
    margin: 0 !important;
    width: 100%;
}

Den Rest kannste Dir von den Demo Seiten von mir abschauen. Die sind ja mit dem Grid gemacht. (Untermenüpunkte von "1120er Pixel Grid" bzw. "1140er Prozent Grid")
Wichtig ist, das Du das Contao Grid Prinzip verstanden hast, ach das ist dort beschrieben.

[Berliner]

Wenn dein Bild die volle Breite hat, dann brauchste keine grid Angabe, du hast ja schon die volle Breite.
Es sei denn es ist ein Hintergrundbild.
Wenn du dir die Grid Definitionen mal direkt ansiehst, dann findest du dort folgendes:

/**
 * For 100% wide, without margin, not within an article
 * e.g. for HTML Modules in header 
 */
.grid16_0 {
    margin: 0 !important;
    width: 100%;
}

Den Rest kannste Dir von den Demo Seiten von mir abschauen. Die sind ja mit dem Grid gemacht. (Untermenüpunkte von "1120er Pixel Grid" bzw. "1140er Prozent Grid")
Wichtig ist, das Du das Contao Grid Prinzip verstanden hast, ach das ist dort beschrieben.

Guten Abend Bugbuster,

vielen Dank für deine Ausführungen.
Ich denke, das ich das Prinzip und die Funktionalität der Grid-Systeme verstanden haben (Vorteile und Nachteile).
Was für mich eher problematisch ist, wäre die Umsetzung , damit meine ich die nachträgliche Umsetzung, eines (responsiven) Gridsystems.
Hier geht es mir nicht um "Todoo", sondern eher um die Zusammenhänge innerhalb der Grid-Systeme.
Hierbei ist es wohl egal, ob es sich be dem angewendeten Grid-System um ein 12er, 16er, etc handelt. Einige Threads hier beschäftigen sich immer wieder mit Layout-Problemen - und natürlich um eine Anwendung dieser Layouts in Bezug auf responsives Verhalten.

Als "Privat-Anwender", ist natürlich mit dem fehlenden Grundwissen (welches Web-Designer o.ä. haben) immer wieder schwierig, gerade beim Umstieg von "statischen" Webseiten, in denen bestenfalls eine DB wegen "Shop-Angeboten" läuft, auf ein CMS umzusteigen. (Jedem der meisten dieser Nutzer ist der Vorteil eines CMS bekannt). Typo ist zu riesig, Yoomla zu umfangreich - somit fällt, zumindest für mich selber, die Auswahl auf Contao.
(und ich bin mit Contao mehr als zufrieden - ich hab mir ja im Vorlauf auch mehr als nur Contao "angetan" )
Aber der Umstieg von einer "statischen" Seite, egal ob html, oder php - die bisher über bsps. Dreamweaver gelöst wurde, fällt eben schwer. Hier ist einfach mehr nötig, als was mit <p oder so zu lösen... *lach* Und gerade in den letzten tagen ist mir mit den "gewachsenen" Problemen die Entscheidung näher gebracht worden, mich für ein frei definierbares (responsives) Grid-System zu entscheiden, weil dieses "Rastersystem" eine einzigartige Möglichkeit bietet, relativ frei über die Gestaltung des Layouts zu entscheiden - Templates kopieren kann jeder - oder? *zwinker*

Was ich damit meine, ist, ob es weiterführende Info`s gibt, die die "Arbeitsweise" der Grid-Systeme beschreibt (für mich möglichst deutschsprachig). Also Hintergründe (Begründungen bspw), was in den Head gehört, oder was zb. diesbezüglich in die Bbasic- oder default-css gehört ..

In Bezug auf das o.g. Zitat erschliesst sich trotzem die Frage, wie ich die einzelnen Grids in einer CSS definiere, vor allem in welcher. Nutze ich die von Contao mitgelieferte basic.css , oder lieber default.css oder lege ich, wie auf einigen Seiten beschrieben, eine eigene Css an?

*oje* so viele Worte... hoffe, du hast trotz des Wort-Wirr-Warrs verstanden, was ich meine

Besten Dank und beste Grüße aus Berlin

[BugBuster]

Äh du definierst keine eigenen grid Klassen in einer CSS, wozu gibt es die fertigen? Ein 12er Pixel Grid bringt Contao mit, von mir kommt als Erweiterung eine 16er Pixel und Prozent Variante.

Nun musst du entscheiden, ob du die komplette Seite per Grid machen willst, also Kopf, Main (+left,+right), Footer, oder nur einen Teil davon.
Ich persönlich definiere über den Layout Builder die Bereiche Header, Main, Footer und benutze in Main das Grid um darin die Spalten zu bilden die ich brauche.
Hier in der Weise, dass ich je Spalte einen Artikel anlege. Die Artikel bekommen dann die Grid Klassen, z.B. grid3 und grid13 = 16 in Summe, passt.

Wo die meisten Probleme bekommen, um sich die Arbeit auf jeder Seite nun mehrere Artikel anlegen zu müssen zu sparen, wenn man im Layout Builder auch "left" bzw. "right" definiert. Dort muss man ja eine Breite in Pixel angeben, diese ist dann aber fest und kann mit Core mitteln nicht per Grid Klasse definiert werden. Das braucht man aber um responsive zu sein.

Alles andere ist alles von deiner Konzeption abzuleiten, ob reset.css (die nehme ich immer bei Grid) oder default oder basic oder....
Völlig deine Sache, teile es Logisch auf damit du später es wiederfindest.
Die Reihenfolge sollte auch klar sein, erst eine Form von Reset CSS, dann Grid, dann default Dinge und am Ende die Design CSS, grob gesagt.

[Berliner]

Äh du definierst keine eigenen grid Klassen in einer CSS, wozu gibt es die fertigen? Ein 12er Pixel Grid bringt Contao mit, von mir kommt als Erweiterung eine 16er Pixel und Prozent Variante.

Nun musst du entscheiden, ob du die komplette Seite per Grid machen willst, also Kopf, Main (+left,+right), Footer, oder nur einen Teil davon.
Ich persönlich definiere über den Layout Builder die Bereiche Header, Main, Footer und benutze in Main das Grid um darin die Spalten zu bilden die ich brauche.
Hier in der Weise, dass ich je Spalte einen Artikel anlege. Die Artikel bekommen dann die Grid Klassen, z.B. grid3 und grid13 = 16 in Summe, passt.

Wo die meisten Probleme bekommen, um sich die Arbeit auf jeder Seite nun mehrere Artikel anlegen zu müssen zu sparen, wenn man im Layout Builder auch "left" bzw. "right" definiert. Dort muss man ja eine Breite in Pixel angeben, diese ist dann aber fest und kann mit Core mitteln nicht per Grid Klasse definiert werden. Das braucht man aber um responsive zu sein.

Alles andere ist alles von deiner Konzeption abzuleiten, ob reset.css (die nehme ich immer bei Grid) oder default oder basic oder....
Völlig deine Sache, teile es Logisch auf damit du später es wiederfindest.
Die Reihenfolge sollte auch klar sein, erst eine Form von Reset CSS, dann Grid, dann default Dinge und am Ende die Design CSS, grob gesagt.

Hallo,

vielen Dank für deine Ausführungen.
Den ersten Fehler habe ich gefunden, nachdem ich heute früh noch mal in Ruhe drüber gelesen habe - Manchmal soll es ja helfen, die schon fertige CSS zu importieren

Besten Dank erst einmal,

Berliner

[Berliner]

Leider gibt's ein weiteres Problem, welches wohl allerdings eher in einen "Grundlagen-Thread" gehört. Leider habe ich zu meinem Problem nicht viel gefunden, ausser das hier.

Für mich steht ebenfalls die Frage, wie ich das Grid-System nun nachträglich anwende. Informationen / Grundlagen über ein 12Spalten-Grid lassen sich ja normalerweise ohne Probleme auf ein 16Spalten-Grid übertragen, oder?

Für die Artikel ist mir das soweit klar - denke ich... Siehe Screenshot.
Aber was ist mit der Navigation?

Muss ich ggf. das komplette Seitenlayout überarbeiten, bzw. ein neues erstellen?

Vielleicht hat jemand von euch einen "Grundlagen-Workshop" im Web gesehen, den ich durchrackern kann? Google wirft leider nicht viel aus, ausser ggf. kostenpflichtige Tutorials..

Danke im Voraus an euch für eventuelle Tips.

Beste Grüße

[wulf]

hier mal lesestoff: http://www.elmastudio.de/webdesign/t...d-generatoren/

[Merlin]

Leider gibt's ein weiteres Problem, welches wohl allerdings eher in einen "Grundlagen-Thread" gehört. Leider habe ich zu meinem Problem nicht viel gefunden, ausser das hier.

Für mich steht ebenfalls die Frage, wie ich das Grid-System nun nachträglich anwende. Informationen / Grundlagen über ein 12Spalten-Grid lassen sich ja normalerweise ohne Probleme auf ein 16Spalten-Grid übertragen, oder?

Für die Artikel ist mir das soweit klar - denke ich... Siehe Screenshot.
Aber was ist mit der Navigation?

Muss ich ggf. das komplette Seitenlayout überarbeiten, bzw. ein neues erstellen?

Vielleicht hat jemand von euch einen "Grundlagen-Workshop" im Web gesehen, den ich durchrackern kann? Google wirft leider nicht viel aus, ausser ggf. kostenpflichtige Tutorials..

Danke im Voraus an euch für eventuelle Tips.

Beste Grüße

Hallooo,

was mir gleich mal aufgefallen ist in deinem Bildchen ist das du bei der klasse ".grid13" einen "." davor hast ... der kommt da aber nicht rein ....

[BugBuster]

Nochmal der Unterschied zw. Contao Grids und externe, siehe hier, da habe ich das schon mal erwähnt.
https://community.contao.org/de/show...l=1#post234071

[Berliner]

Hallooo,

was mir gleich mal aufgefallen ist in deinem Bildchen ist das du bei der klasse ".grid13" einen "." davor hast ... der kommt da aber nicht rein ....

Hallo,

vielen Dank für den Hinweis... für mich war ja der Ansatz, dass ein "." eine Klasse beschreibt Aber da es ja im BE 2 Felder sind, gehe ich nach deinen Ausführungen davon aus, dass der Punkt durch Contao gesetzt wird?.

Beste Grüße,

[Berliner]

Nochmal der Unterschied zw. Contao Grids und externe, siehe hier, da habe ich das schon mal erwähnt.
https://community.contao.org/de/show...l=1#post234071

Vielen Dank,

werde mir das in Ruhe durchlesen.

Beste Grüße erst einmal

[Berliner]

Hallo an alle,

habe mir die vorgeschlagenen Sachen einmal zu Gemüte geführt und bin folgendermaßen verfahren:

Im Seitenlayout (bearbeiten) wurde die Seiten-Navigation (Breite der linken Spalte) auf 220px eingestellt.
Die seitliche Navigation (Frontend-Module bearbeiten) stelle ich in der Klasse auf grid3 ein. (allerdings wird diese Angabe nicht übernommen - vielleicht, weil ich die CSS-ID nicht angebe?)

Die Artikelnavigation bekommt von mir grid5. (ich gehe hier davon aus, dass es sich um das "zurück" (back) und "weiterlesen" (more) handelt.

Jeder Artikel bekommt grid13.

In Summe würde ich also auf grid16 kommen (Haupt-Navi=grid3 + Artikel=grid13 --> grid16)

Ich bin nun über die Angabe grid16_0 gestolpert... (auch beim Durcharbeiten meiner DVD "responsives Webdesign"). Dieses "_0" bezieht sich doch auf 16von16 grids, also 100%.
Mein Rückschluss hieraus ist fraglich - aber könnte das nicht bedeuten, ich müsste in den Einstellungen beispielsweise grid16_3 für die Seiten-Navigation(Hauptnavi) angeben usw.?

Vielleicht sehe ich ja wirklich grad die "Bäume vor lauter Wald" nicht mehr?

Beste Grüße

Nachtrag: Gibt's hier keinen Thread für Grid-Anfänger? Ggf. wäre ein verschieben einiger Beiträge in einen neu erstellen "Grid-Anfänger-Thread" sinnvoll?

[BugBuster]

Die grid16_0 ist eine Special von mir, wozu haben ich in Beitrag #9 geschrieben.
Die normalen Grid Klassen heißen grid1 bis grid16.

Tipp, man kann sich die CSS auch mal anschauen, dann versteht man das Grid Konzept von Contao vielleicht besser, CSS Kenntnisse vorausgesetzt.

[Berliner]

Die grid16_0 ist eine Special von mir, wozu haben ich in Beitrag #9 geschrieben.
Die normalen Grid Klassen heißen grid1 bis grid16.

Tipp, man kann sich die CSS auch mal anschauen, dann versteht man das Grid Konzept von Contao vielleicht besser, CSS Kenntnisse vorausgesetzt.

Hallo,

vielen Dank für deine Antwort.
Das Problem, was wir hier wohl diskutieren liegt wohl eher darin, dass ein Grid-System, egal, ob 12er oder 8er oder 16er, in ein "laufendes" System zu integrieren, bzw. online-gestellte Seiten, die mit Contao-boardeigenen Mitteln erstellt wurden, nachträglich anzupassen.
Für jemanden, der tagtäglich mit contao, html, css usw. (um das mal herunterzubrechen) arbeitet, ist dieses sicherlich kein Problem.
Für Contao-Anfänger wohl um so mehr - gerade weil man beim Anwenden und Arbeiten mit Contao (oder jeden anderem CMS-System) dann vom 100stel ins 1000stel kommt. Sicherlich erscheinen auch gerade dann deshalb die "kleinen" Probleme als schier unlösbar. Man hat da einen Wrapper, einen Container, ein left, right, Main -Welche der schon bearbeiteten CSS blende ich aus, welche bearbeite ich noch - also wo anfangen ist hier die Devise für einen Umsteiger.
In jedem Tutorial, egal, ob nun die von mir derzeit durchgeackerte DVD, oder online verfügbar, wird davon ausgegangen, dass schon vom Template an, also von Pieke auf, alles selbst produziert wird. Und genau da ist der Haken - Viele Nutzer und "Hobby-Webdesigner" möchten Ihre vorhandenen Webseiten dem technischen Stand und Anforderungen anpassen.

Tut mir leid, dass ich mir gerade DEIN Grid vorgeknöpft habe *grins* - Aber vom Grundsatz her kommt genau daher meine Nachfrage nach einem "Anfänger-Thread" zum Grid zustande.

Die wenigsten hier im Forum wollen vorgefertigte Antworten und Ergebnisse - viele haben bisher CSS via Dreamweaver etc. gelöst, mit einer lokalen oder live-PhP-Datei, in der sie auch sehen konnten, was da passiert. Mit einem CMS - gerade in Live-Umgebung (Contao in Verbindung mit dem Layout-Builder, der schon auf Grund der systemerzeugten Css-Dateien genug "Verwirrung stiftet" - ist das ja nicht möglich. (und ehrlich - ob nun Firebug oder Devtools - die Umstellung ist mehr als schwer )...

Aber du kommst ja aus Berlin - vielleicht sollte ich mal Privatstunden bei dir nehmen - mit 1/2 Bier oder ner Karaffe Wein als Entlohnung? Mal im Ernst, das nächste Contao-Stammtisch-Treffen hier wird für mich Verpflichtung sein

Beste Grüße

[Berliner]

Guten Abend an alle,

derzeit habe ich nun im Nachgang des bisher Geschriebenen ein neues Layout erstellt, dass ausschliesslich aus Header, Main und Footer besteht.

Folgende Probleme habe ich allerdings, mit denen ich mich derzeit beschäftige:

1. die "Breakpoints" stellen mich nicht zufrieden, hier sollte ich feinabstimmen - Aber wo?
2. Der "Container"-Hintergrund ist zentriert (Grafik), wogegen der Rest, wie Headerbild und der Main-Inhalt (Navigation und Artikelinhalte) sind m.E.n. linksbündig.
3. ..was mich derzeit noch nicht so stört ist, dass bei den Unterseiten ein gelb-brauner Strich zwischen den Menü-Punkten in der Navigation eingeblendet wird - er stört mich nicht, hätte ihn eher gern auch auf der Startseite - Oder eben komplett weg.. Das muss was mit dem "Übergeordneten Seiten-Variablen" zu tun haben, jedoch finde ich den Punkt nicht wirklich, wo dieses definiert wird. Einfach die Variable abschalten erscheint mir doch etwas sehr "hart" !?

Durch die zusammengewürfelten CSS-Dateien fehlt mir einfach der Ansatzpunkt - dass man diese "systemseitige Zusammenfassung" der einzelnen Css-Dateien, welches ja dem Traffic-Volumen entgegenwirken soll, abschalten kann, ist ja anscheinend ein bekanntes Problem, welches wohl noch nicht gelöst wurde.

Ich werde einfach derzeit aus Firebug und Co nicht schlau... *grummel*

Beste Grüße

[Spooky]

Durch die zusammengewürfelten CSS-Dateien fehlt mir einfach der Ansatzpunkt - dass man diese "systemseitige Zusammenfassung" der einzelnen Css-Dateien, welches ja dem Traffic-Volumen entgegenwirken soll, abschalten kann, ist ja anscheinend ein bekanntes Problem, welches wohl noch nicht gelöst wurde.

Ich werde einfach derzeit aus Firebug und Co nicht schlau... *grummel*

Schmeiß Firebug weg, der ist unnötig . Nimm einfach die Developer Tools, die schon im FireFox integriert sind. Unter Contao 3 sind im minified CSS file Kommentare enthalten, die dir sagen, in welchem internen Stylesheet die folgenden CSS Anweisungen definiert sind.

Das kannst du dann einfach mit den FireFox Developer Tools herausfinden. Bspw. machst du einfach einen Rechtsklick auf ein Element dass du inspizieren willst und selektierst "Inspect Element (Q)" (oder wie auch immer das in der deutschen Version heißt). Rechts siehst du dann unter "Rules" die CSS Definitionen für dieses Element und neben den jeweiligen Selektoren existiert ein Link auf die CSS Datei, zB "1bc3cafdjalkd.css:4". Wenn du da draufklickst siehst du die entsprechende Zeile in der CSS Datei und gleich darüber bspw. den Kommentar /* Style sheet Basic */. Damit weißt du dann, wo du in den internen Stylesheets suchen musst.

[Berliner]

Schmeiß Firebug weg, der ist unnötig . Nimm einfach die Developer Tools, die schon im FireFox integriert sind. Unter Contao 3 sind im minified CSS file Kommentare enthalten, die dir sagen, in welchem internen Stylesheet die folgenden CSS Anweisungen definiert sind.

Das kannst du dann einfach mit den FireFox Developer Tools herausfinden. Bspw. machst du einfach einen Rechtsklick auf ein Element dass du inspizieren willst und selektierst "Inspect Element (Q)" (oder wie auch immer das in der deutschen Version heißt). Rechts siehst du dann unter "Rules" die CSS Definitionen für dieses Element und neben den jeweiligen Selektoren existiert ein Link auf die CSS Datei, zB "1bc3cafdjalkd.css:4". Wenn du da draufklickst siehst du die entsprechende Zeile in der CSS Datei und gleich darüber bspw. den Kommentar /* Style sheet Basic */. Damit weißt du dann, wo du in den internen Stylesheets suchen musst.

Das ist doch mal eine Aussage, die sogar ich verstehe *lach* Also vielen Dank