Weg von Tabelle. Hin zum Grid

Emess · 11. Juli 2023

Nach diesem Thread

Will ich mich nun soweit es geht von Tabellen distanzieren.

Ich habe hier 2 Modale eins mit Öffnungszeiten ein anderes mit Speisekarte Welches ich auf den grid umstellen will-

Unter Alkoholfreie Getränke habe ich schon mal, meinen bescheidenden Kenntnissen entsprechend den Osaft gegridet.

Doch wenn ich das Fester zusammenschiebe sieht das nicht so toll aus. Weil in der Desktopansicht die 1. col links ausgerichtet ist.

Achja. Wie kann ich mein Modal "Öffnungszeiten" anders ansprechen um so in css Änderungen vornehmen die nur auf besagtes Modal Wirkung hat.

hier der Link

my.emess62.de

Bitte habt etwas Nachsicht mit einem noch azubi.

nextuser · 11. Juli 2023

Zitat von Emess

Doch wenn ich das Fester zusammenschiebe sieht das nicht so toll aus. Weil in der Desktopansicht die 1. col links ausgerichtet ist.

Wie genau soll es denn aussehen? Bei mir ist die 1.col durch "flex-wrap: wrap" links, die 2 mittig und die 3 rechts.

Zitat von Emess

Achja. Wie kann ich mein Modal "Öffnungszeiten" anders ansprechen um so in css Änderungen vornehmen die nur auf besagtes Modal Wirkung hat.

Dieses Modal hat bei dir ja die Id "openModal" (das andere "myModal"). Damit kannst du es ja weiter ansprechen...

Emess · 12. Juli 2023

Zitat von nextuser

Wie genau soll es denn aussehen? Bei mir ist die 1.col durch "flex-wrap: wrap" links, die 2 mittig und die 3 rechts.

Dieses Modal hat bei dir ja die Id "openModal" (das andere "myModal"). Damit kannst du es ja weiter ansprechen...

So soll es auch im Desktopmode aussehen. Im Mobilmode könnte es mittig oder eben so sein dass es gut aussieht.

wäre es also besser wenn ich die klassen im CSS nach myModal umbenenne und das openModal als solches anspreche

Sempervivum · 12. Juli 2023

Hm, wenn ich mir das unter deinem Link ansehe, sehe ich beim O-Saft nichts von einem Grid, nur dass Du das Ganze mit Bootstrap gemacht hast. Davon rate ich ebenfalls ab, siehe hier:

Should I learn Bootstrap?

Bist Du da inzwischen umgeschwenkt?

Ohne diesen ganzen Overhead und ohne überflüssige Container wird es ganz simpel und sieht gut aus:

grid-o-saft.png

Auch die Überschrift lässt sich problemlos ohne div-Container und hr gestalten:

grid-o-saft-2.png

Emess · 12. Juli 2023

Zitat von Sempervivum

Hm, wenn ich mir das unter deinem Link ansehe, sehe ich beim O-Saft nichts von einem Grid, nur dass Du das Ganze mit Bootstrap gemacht hast. Davon rate ich ebenfalls ab, siehe hier:
https://webentwicklung.ulrichb…ld-i-learn-bootstrap.html
Bist Du da inzwischen umgeschwenkt?

Noch nicht hab aber den link im Auge und sehe mir das an. Aber die Seite stellt sich für mich als eine Beschreibung eines Systems

Ich ätte da gerne veranschaulichungen bzw gebraüchlich Beispiele um mich mit dem Code vertraut zu machen

Ich fummel hauptsächlich aber nur an fertigen Snippets herum. Ich passe als Beispiele meinen Bedürfnissen an.

Deshalb bin ich an Bootstrap hängen geblieben weil das Netz voller Beispiele ist. Und wie Ihr ja seht brauche ich sobald es etwas knifflig wird auch hier Hilfe.

Aber es macht mir Spaß und ich freue mich über jeden Erfolg. Ist doch besser als den ganzen Tag Sudokus zu lösen.

Den folgenden Code ist doch ein Grid. Oder?

Code

.col-first p{
    font-weight: bold;
    text-align: left;
}

.col-third p{
    font-weight: bold;
    text-align: end;
}


 <h2>Alkohofreie Getränke</h2></div>
   <hr>
   <div class="row">
    <div class="col-md-4 col-first">
        <p>
            Orangensaft
        </p>
    </div>
    <div class="col-md-4">
        <p>
            0,2l / 0,4L
        </p>
    </div>
    <div class="col-md-4 col-third">
        <p>
            3,50€ / 5,00€
        </p>
    </div>

Alles anzeigen

Und jetzt zu meinem Problem.

Im Desktopmode soll der 1. col-md4 links und der 3. col-md4 rechts ausgerichtet sein.

Im Smartphonemodus zb. alles mittig.

m.scatello · 12. Juli 2023

Zitat von Emess

Deshalb bin ich an Bootstrap hängen geblieben weil das Netz voller Beispiele ist.

Findet man auch zu Flex und Grid

nextuser · 12. Juli 2023

Zitat von Emess

Und jetzt zu meinem Problem.
Im Desktopmode soll der 1. col-md4 links und der 3. col-md4 rechts ausgerichtet sein.
Im Smartphonemodus zb. alles mittig.

Jo, dann mach das doch.

Ich würde die ganzen div's rausschmeißen, die lediglich ein p-Tag enthalten und nur die p-Tags verwenden.

Nutze dann einfach "flex-direction, align-items, text-align, ect..."

Sempervivum · 12. Juli 2023

Zitat

Ich ätte da gerne veranschaulichungen bzw gebraüchlich Beispiele um mich mit dem Code vertraut zu machen

Genau das findest Du in meinem ersten Screenshot, musst nur hin gucken und wirst sehen, dass es unschlagbar einfach ist.

Zitat

Und wie Ihr ja seht brauche ich sobald es etwas knifflig wird auch hier Hilfe.

Genau das ist das Problem bei vorgefertigten Dingen wie Bootstrap, CMS etc.: Du bekommst eine 08/15-Lösung. Willst Du etwas umsetzen, was ein wenig vom Standard abweicht, gehen die Probleme los.

Zitat

Im Desktopmode soll der 1. col-md4 links und der 3. col-md4 rechts ausgerichtet sein.

Auch hier eine Demo mit dem Seiteninspektor, ich habe die ersten drei Zeilen auf grid umgestellt:

grid-o-saft-4.png

D. h. dem Container eine geeignete Klasse geben ("name", "size", "price") und dann kannst Du mit "text-align" problemlos die Ausrichtung fest legen.

Weg von Tabelle. Hin zum Grid

Jetzt mitmachen!

Teilen

Tags