Contao-Camp 2024
Ergebnis 1 bis 11 von 11

Thema: Grid und Design

  1. #1
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard Grid und Design

    Hi Leute,
    so langsam freunde ich mich mit dem grid an, und werde es wohl auch auf produtiven Seiten einsetzen.
    Was mir jetzt noch an Infos fehlt ist, in wie weit ich Änderungen der Breite (width) an den Elementen #header, #custom, #wrapper, #container, #footer,... vornehmen kann um meine Designideen zu verwirklichen, ohne die Funktionsweise des grids zu beinflussen. Wo greift das grid ein? Erst bei .inside ? Wie ich bei der Seite von Peter Müller gesehen habe ist es anscheinend mit Bordmitteln möglich den header und den footer über die gesamte zur Verfügung stehenden Breite gehen zu lassen.

    Hoffe ich habe mich einigermaßen verständlich ausgedrückt ;-)

    Grüße aus Ludwigsburg
    Jochen Kubik
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  2. #2
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard Full-Header-Layout mit Grid

    Auf pmueller.de ist das so realisiert:

    #wrapper auf width:auto (statt 960px), damit sich #header und #footer über die gesamte Breite ausdehnen.

    Auf großen Bildschirmen hat das Grid eine Breite von 960px:
    #header .inside, #navigation, #container, #footer .inside {
    min-width: 768px;
    max-width: 960px;
    margin: 0 auto;
    }

    Man könnte das auch einfach auf 960px festnageln. Das macht nicht so'n Unterschied.

    Wenn weniger als 979px zur Verfügung stehen, verkleinert sich das Grid automatisch auf 744px. Wenn du dir in Chrome die Contao Tools installierst und darin das "Grid-Overlay" einschaltest, ist das beim Ändern der Browserfenstergröße sehr schön zu sehen.

    Um die Gesamtbreite an das schmalere Grid anzupassen, werden die obigen Selektoren mit @media only screen and (max-width: 979px) and (min-width: 767px) auf eine Breite von genau 744px beschränkt.

    Anders ausgedrückt: Das Grid "greift nicht". Normalerweise beschränkt der Wrapper das. Wenn du das änderst, musst die Bedingungen selbst herstellen.

    Hilft das weiter?
    Geändert von pmmueller (07.02.2013 um 21:52 Uhr)

  3. #3
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Ja, klar, jetzt sehe ich langsam "Land" ;-)
    Einzig: Wie kommen die 744px zustande?

    Thanxalot!

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  4. #4
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard Full-Header-Layout mit Grid, Teil 2

    Zitat Zitat von kubjo Beitrag anzeigen
    Einzig: Wie kommen die 744px zustande?
    Die Definitionen für das Grid stehen in /assets/contao/css/responsive.css. Zum Lesen nimmst du die "uncompressed":

    @media (min-width:768px) and (max-width:979px) {
    /**
    * Reduce the overall width
    */
    #wrapper {
    width:744px;
    }

    Da du beim "Full Header"-Layout den Wrapper wie gesagt auf "auto"-Breite stellst, müssen die anderen Elemente diese Breite übernehmen, um dem pixelbasierten Grid eine Begrenzung zu bieten.
    Geändert von pmmueller (07.02.2013 um 21:53 Uhr)

  5. #5
    Alter Contao-Hase Avatar von kubjo
    Registriert seit
    11.01.2011.
    Ort
    Ludwigsburg
    Beiträge
    1.380

    Standard

    Jo, jetzt scheint erst mal alles klar zu sein, Danke!

    Grüße
    JK
    Wir sind alle Würmchen, nur glaube ich, daß ich ein Glühwürmchen bin.

  6. #6
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Servus Peter,

    darf ich hier noch mal nachhaken? Ich brauche aktuell auch ein Layout das über die gesamte Breite geht. Ich habe hierzu deinen Tipp verwendet und in meinem layout.css folgende Anweisung geschrieben.

    Code:
    #header .inside, #main .inside, #footer .inside, #pageimagebox .inside 
    {
    margin: 0 auto;    
    width: 960px;
    }
    Aber beim Skalieren sehe ich in Firebug die Größen vom responsive Grid überschrieben. Da bleibt es auf "auto". Sollte ich deine Anweisung dann auch in ein CSS mit Mediaquery schreiben? z.B.
    Code:
    @media (min-width: 979px)
    Ladereihenfolge der CSS Files
    • CSS-Reset
    • Formulare
    • Responsive Grid
    • Layout-Builder
    • layout (meine eigenen Layoutangaben)


    Wäre dankbar für einen Tipp

    Gruß
    Frank

  7. #7
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    Zitat Zitat von Kahmoon Beitrag anzeigen
    in meinem layout.css folgende Anweisung geschrieben.
    Code:
    #header .inside, #main .inside, #footer .inside, #pageimagebox .inside 
    {
    margin: 0 auto;    
    width: 960px;
    }
    Aber beim Skalieren sehe ich in Firebug die Größen vom responsive Grid überschrieben. Da bleibt es auf "auto".
    Das klingt soweit doch sinnvoll.
    Was genau überschreibt das responsive.css und wann genau?
    Was bleibt denn wann auf "auto"?
    Gibt's einen Link?

  8. #8
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Link wäre aktuell www.mediastuff.de

    Meine layout.css überschreibt die responsive.css. Egal welche Fenstergröße bleibt width beim wrapper auf "auto" und die 3 .inside bei 960.

    Ich hab auch gerade schon 3 Stylesheets, jeweils mit Mediaquery versehen aber das mag er auch ned. @media min-width: 979px (für alle ausreichend großen Displays) ignoriert er.

    Code:
    @media (min-width: 979px)
    alle .inside 960px
    
    @media (min-width: 768px) and (max-width 979)
    alle .inside 744px
    
    @media (max-width: 767px)
    alle .inside auto
    Gruß
    Geändert von Kahmoon (13.03.2013 um 10:42 Uhr)

  9. #9
    Buchautor 'Websites erstellen mit Contao' Avatar von pmmueller
    Registriert seit
    19.06.2009.
    Ort
    Groningen (NL)
    Beiträge
    1.523

    Standard

    @media @media (min-width:768px) and (max-width:979px)
    Das @media ist doppelt und so'n Media Query sollte schon irgendwo das Medium für den Query (= "Abfrage") enthalten, also z. B. das Wort "screen" ;-)

    Sowas in dieser Art sollte funktionieren:
    @media only screen and (min-width:768px) and (max-width:979px)

    Viel Spaß noch damit. Sieht doch gut aus, die Site.

  10. #10
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    5.273

    Standard

    Zitat Zitat von pmmueller Beitrag anzeigen
    Das @media ist doppelt und so'n Media Query sollte schon irgendwo das Medium für den Query (= "Abfrage") enthalten, also z. B. das Wort "screen" ;-)
    DOH!!! Sch... Copy Paste! Funzt!!!


    Zitat Zitat von pmmueller Beitrag anzeigen
    Viel Spaß noch damit. Sieht doch gut aus, die Site.
    Danke

    Gruß
    Geändert von Kahmoon (20.02.2013 um 17:06 Uhr)

  11. #11
    Contao-Nutzer
    Registriert seit
    16.01.2011.
    Beiträge
    170

    Standard

    --
    Geändert von mtbler999 (04.11.2018 um 00:19 Uhr)

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •