Results 1 to 9 of 9

Weblayout mit grid

  1. #1 Reply With Quote
    Deus Dukemon's Avatar
    Join Date
    Jun 2010
    Location
    Tevinter
    Posts
    14,168
    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 is offline

  2. #2 Reply With Quote
    Krieger Tiranu's Avatar
    Join Date
    Feb 2010
    Posts
    492
    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 is offline

  3. #3 Reply With Quote
    Ehrengarde Progrinator's Avatar
    Join Date
    Apr 2018
    Posts
    2,274
    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.
    PC: Ryzen 7 3700x | 32GB RAM | GeForce 960 4GB | 1TB+240GB SATA SSD | 2TB HDD | 1TB M2 |
    Laptop: i5 7300HQ | 8GB RAM | GeForce 1050 4GB | 120GB SSD | 1TB HDD |
    Konsolen: PS4 | PS2 | GameCube | Gameboy SP | Nitendo Switch|
    [Bild: sdasdasdasd.jpg]
    Progrinator is offline

  4. #4 Reply With Quote
    Deus Dukemon's Avatar
    Join Date
    Jun 2010
    Location
    Tevinter
    Posts
    14,168
    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 is offline Last edited by Dukemon; 29.01.2020 at 14:42.

  5. #5 Reply With Quote
    Drachentöter Boromir's Avatar
    Join Date
    Jan 2005
    Location
    Kaaks
    Posts
    4,077
    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 is offline

  6. #6 Reply With Quote
    Deus Dukemon's Avatar
    Join Date
    Jun 2010
    Location
    Tevinter
    Posts
    14,168
    Super, danke. Das hat funktioniert.
    Leider gilt diese Methode nicht für Texte in den Boxen.
    Dukemon is offline

  7. #7 Reply With Quote
    Drachentöter Boromir's Avatar
    Join Date
    Jan 2005
    Location
    Kaaks
    Posts
    4,077
    Quote Originally Posted by Dukemon View Post
    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 is offline

  8. #8 Reply With Quote
    Deus Dukemon's Avatar
    Join Date
    Jun 2010
    Location
    Tevinter
    Posts
    14,168
    Quote Originally Posted by Boromir View Post
    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 is offline

  9. #9 Reply With Quote
    Drachentöter Boromir's Avatar
    Join Date
    Jan 2005
    Location
    Kaaks
    Posts
    4,077
    Quote Originally Posted by Dukemon View Post
    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 is offline

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •