Ergebnis 1 bis 9 von 9

Weblayout mit grid

  1. #1 Zitieren
    Deus Avatar von Dukemon
    Registriert seit
    Jun 2010
    Ort
    Tevinter
    Beiträge
    14.860
    Ich versuche ein Weblayout mit dieser Tabellenmethode zu gestalten. Allerdings bin ich leider bereits auf ein Problem gestoßen, das ich nicht lösen kann.

    Zunächst hier ein Konzeptbild von meiner Vorstellung meines Layouts.

    [Bild: weblayout.jpg]

    Zur Zeit sieht es so aus.

    http://test.dukevision.de/

    Wie auf meinem Konzeptbild sollte der Textbereich sich dem Inhalt anpassen, während der dunkelblaue Bereich diese fest Form behalten soll. Ich kriege es aber nicht hin, dass sich die Zellen so verhalten.
    Dukemon ist offline

  2. #2 Zitieren
    Veteran Avatar von Tiranu
    Registriert seit
    Feb 2010
    Beiträge
    500
    Löst es dein Problem, die linke Spalte nicht über die komplette Höhe zu strecken, sondern oben auszurichten?

    HTML-Code:
    #links {
        align-self: start;
    }
    Tiranu ist offline

  3. #3 Zitieren
    Halbgott Avatar von Progrinator
    Registriert seit
    Apr 2018
    Ort
    München
    Beiträge
    9.174
    Ich würde mit mehreren div arbeiten und dann sollte es leicht möglich sein, dass es so aussieht, wie in deinen Konzept.
    Durch entsprechende werte ist dann das umschließende leicht größer sodass du deinen gewünschten gelben rand hast.
    Progrinator ist offline

  4. #4 Zitieren
    Deus Avatar von Dukemon
    Registriert seit
    Jun 2010
    Ort
    Tevinter
    Beiträge
    14.860
    Ich versuche immer noch mit grid und CSS ein Weblayout zu erstellen und obwohl ich Schritt für Schritt daran arbeite, verstehe ich nicht wieso die Seite sich nicht so verhält wie ich es will, dass sie das tut. Zumindest hatte ich kurz das Layout so, wie es haben wollte.

    1. Plötzlich zieht sich die Seite zu eine Größe, die es vorher nicht gab. Auf meinem Computer macht sie das auch nicht, Online aber schon. Seltsam: am Computer an dem ich die Seite erstelle habe ich in Chrom dieses Monster an Webseite, mit jedem neu laden der Seite wird sie größer und zieht sich über das gesamte Fenster. An meinem Laptop, auch Chrom, wird die Seite so angezeigt wie sie eigentlich fast sein sollte.



    Nachtrag, mit Strg F5, nach dem ungefähr 4 Versuch, wird auch Online am PC die Seite korrekt angezeigt. Zumindest streckt sich die Seite nicht mehr über das Fenster hinaus, zumindest bei mir.



    2. Die Zelle mit dem Banner ist eigentlich definiert in CSS. Weißer Hintergrund, zentriert, runde Ecken. An dem PC, wo ich die Webseite erstelle sehe ich davon aus nichts, was in der CSS steht. Am Laptop mit Chrom dagegen liegt das Bannerbild zumindest in einer Zelle mit weißem Hintergrund und runden Ecken. Nur zentriert wird es nicht und die Zelle an sich ist auch zu groß.

    3. Generell weigert sich die Seite sich mittig zu platzieren. magin und item haben bisher nicht funktioniert.

    4. Die Überschrift Navigation. Dieser Tag will sich und den Text auch nicht in der Mitte platzieren lassen. Das einzige Mittel, dass ich noch nicht versucht habe, die Schrift in die
    Code:
    <center></center>
    zu packen. Aber das mache selbst ich nicht mehr.



    hier mal der Link, wenn mir jemand vielleicht ein paar Tipps geben will: meine Tabellenwebseite
    Dukemon ist offline Geändert von Dukemon (29.01.2020 um 14:42 Uhr)

  5. #5 Zitieren
    Dragonslayer Avatar von Boromir
    Registriert seit
    Jan 2005
    Ort
    Kaaks
    Beiträge
    4.075
    Wie soll sich die Seite denn mit dem Inhalt verhalten? Soll der Content einfach nach unten hin rauslaufen können und der Rest bleibt so stehen?

    Ich persönlich habe noch nicht mit dem Grid gearbeitet, verwende selbst aber immer Flex-Box oder Schiebe mir das selbst zurecht.

    Um deinen Inhalt zu zentrieren, musst du folgende Anpassungen im .wrapper machen:


    Code:
    // Einmal grid-template-columns mit folgenden Properties ersetzen
    grid-template-columns: 20em 45em 2em;
    
    // Und das fügst du auch noch hinzu, um deinen Inhalt zu zentrieren.
    justify-content: center
    "Du bestimmst unser aller Schicksal, kleiner Mann."
    Boromir ist offline

  6. #6 Zitieren
    Deus Avatar von Dukemon
    Registriert seit
    Jun 2010
    Ort
    Tevinter
    Beiträge
    14.860
    Super, danke. Das hat funktioniert.
    Leider gilt diese Methode nicht für Texte in den Boxen.
    Dukemon ist offline

  7. #7 Zitieren
    Dragonslayer Avatar von Boromir
    Registriert seit
    Jan 2005
    Ort
    Kaaks
    Beiträge
    4.075
    Zitat Zitat von Dukemon Beitrag anzeigen
    Super, danke. Das hat funktioniert.
    Leider gilt diese Methode nicht für Texte in den Boxen.
    Wo genau möchtest du deinen Text denn zentriert haben?
    "Du bestimmst unser aller Schicksal, kleiner Mann."
    Boromir ist offline

  8. #8 Zitieren
    Deus Avatar von Dukemon
    Registriert seit
    Jun 2010
    Ort
    Tevinter
    Beiträge
    14.860
    Zitat Zitat von Boromir Beitrag anzeigen
    Wo genau möchtest du deinen Text denn zentriert haben?
    Aktuell wäre ich schon froh, wenn die eine obere Zeile in der weißen Box, also das "Navigation" sich mittig platzieren würde in der weißen DIV. Wie gesagt, die oben genannten Methoden haben bisher nicht funktioniert.
    Dukemon ist offline

  9. #9 Zitieren
    Dragonslayer Avatar von Boromir
    Registriert seit
    Jan 2005
    Ort
    Kaaks
    Beiträge
    4.075
    Zitat Zitat von Dukemon Beitrag anzeigen
    Aktuell wäre ich schon froh, wenn die eine obere Zeile in der weißen Box, also das "Navigation" sich mittig platzieren würde in der weißen DIV. Wie gesagt, die oben genannten Methoden haben bisher nicht funktioniert.
    Du kannst die Navigation einfach so aufbauen:

    Anstatt:

    Code:
    <div class="navigation">
        <navigation>Navigation</navigation>
    </div>
    Code:
    <nav class="navigation">
        <div>Navigation</div>
    </nav>
    
    // Und im CSS statt für das Element navigation einfach für die Klasse .navigation
    .navigation {
        font-family: Comic Sans MS;
        font-size: 2.5em;
        text-decoration: underline;
        text-align: center;
    }
    Gruß
    Alex
    "Du bestimmst unser aller Schicksal, kleiner Mann."
    Boromir ist offline

Berechtigungen

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