Layout mit Grid

  • Ok, ich denke, dann habe ich meinen Denkfehler gefunden: Wenn der Container über mehrere Zeilen oder Spalten reicht, dann verschwinden die Abstände innerhalb des Containers. Ich kann jedoch nicht die Abstände links und rechts oder ober- und unterhalb des Containers an manchen Stellen verschwinden lassen und an anderen nicht.


    Liege ich da richtig?

  • Zitat

    Wenn der Container über mehrere Zeilen oder Spalten reicht, dann verschwinden die Abstände innerhalb des Containers.

    Richtig.


    Zitat

    Ich kann jedoch nicht die Abstände links und rechts oder ober- und unterhalb des Containers an manchen Stellen verschwinden lassen und an anderen nicht.

    Nicht mit CSS-Grid Angaben. Ob sowas mit margin, padding oder border geht musst du halt ausprobieren. Da an so einer Darstellung kein Bedarf besteht und bei responsiven Layout sogar zu Problemen führen wird habe ich mich damit nicht weiter beschäftigt.

  • Das lässt sich ohne Beispiel schlecht beschreiben.


    Zum responsive Layout gehört in der Regel, dass sich Container bei unterschiedlichen Bildschirmgrößen verschieben. Zunächst werden zum Beispiel vier nebeneinander angezeigt, bei schmaleren Fenstern / Bildschirmen nur noch drei, dann zwei auf auf Smartphones stehen alle Container meist untereinander. Die nicht mehr passenden müssen dann woanders plaziert werden.


    Unterschiedlich große Abstände zwischen den Containern passen dann größenteils nicht mehr und müssen immer wieder angepasst werden.


    Ich kann nur wiederholen: Ohne konkreten Inhalt ist das grade für Anfänger nur schwer nachvollziehbar.

  • Ok, danke, ich weiß, was Du meinst. Ich werde versuchen, jetzt mal das altmodische Design (Tabellen und Frames) Großteils wegzubringen, und in einem zweiten Schritt dass Ganze auch noch nach und nach responsive machen. Alles auf einmal wird mir wahrscheinlich zu steil ;);).


    Ich werde mich jedenfalls noch öfter hier melden, und bin schon jetzt für jede Hilfe dankbar.

  • Grundlage für ein problemloses CSS ist ein korrekter HTML-Quelltext im body-Element.


    Mit HTML5, also dem aktuellen HTML, wurden die Regeln eindeutiger und direkter gefasst. Grade weil sich viele Webseitenersteller das Leben selbst durch falsche Anwendung von HTML-Elementen das Leben schwermachten.


    Ohne Kenntnis der richtigen Anwendung von HTML-Elementen kann deshalb keine aktuelle Webseite erstellt werden. Dadurch gilt aber auch umgekehrt: Wenn bestehende Webseiten auf den aktuellen Stand gebracht werden sollen ist das mit Kenntnis der HTML-Regeln durch die eindeutige Zuordnung viel einfacher geworden.


    Wäre ja blöd wenn du viel Zeit investieren würdest und bei Nachfragen immer wieder erfährst: Erst mal den Quelltext abreißen und neu machen.

  • Also ist meine Herangehensweise grundsätzlich richtig, oder?


    Eine Frage noch zu Deinem Code Beispiel, das wie zu erwarten (;)) super funktioniert: Wie muss ich das CSS und das HTML anpassen, damit das Bild links außen <img src="2019_11_16_spider67_layout_mit_grid_01.gif" alt="Text"/>) zur Gänze verschwindet und die übrigen 4 Bilder trotzdem ihre Position behalten?


    Danke für die Hilfe.

  • Oder was auch eine Möglichkeit wäre: Ich entferne beide blinkenden Zander links und rechts außen und belasse nur die beiden schwimmenden Zander in der Mitte (Bild 2 und Bild 4). Aber auch wenn ich beide Außenbilder entferne und das CSS entsprechend ändere habe ich dann die beiden schwimmenden Zander links und recht am Bildrand. Wie bekomme ich diese beiden auch in die Mitte, sodass Logo und die beiden schwimmenden Zander zentriert sind, oder zumindest auch der rechte äußere Zander zentriert und der links am Rand komplett verschwunden ist.


    Danke für Eure Hilfe.

  • Hallo,


    mittlerweile habe ich alles hinbekommen. Das einzige, was noch nicht passt ist, dass die li Elemente im umgebenden Nav Container zentriert werden sollen.


    Wie schaffe ich das im CSS? Danke für die Hilfe.

  • Problem gelöst, Li Elemente sind zentriert, anscheinend muss bei flex-direction: column align-items auf stretch gesetzt werden, damit eine vertikale Zentrierung erfolgt. Das war mir nicht klar.:/:/

  • Hallo,


    in der beiliegenden Datei seht Ihr das fertige aussehen meiner Startseite, nachdem ich sie komplett neu gestaltet habe (ohne Tabellen und Frames).


    Entwurf Seite.pdf


    Zwei Bilder machen mir aber noch Schwierigkeiten: Das Bild rechts oben (über dem Text der Weg zu uns) und das Email Symbol links unter der Navigation. Dort ist ein jeweils ein Hyperlink hinterlegt. Wenn ich nun die Bilder mit der Maus überfahre (: hover) springen Sie an den linken Rand des umgebenden Containers, obwohl die Hyperlinks funktionieren.


    Woran liegt das?


    Hier das HTML mit dem die Bilder eingebunden sind:


    Code
    1. <div class="navi2"><a href="der_weg_zu_uns.htm"><img src="../../bilder/strassenkarte2-k.jpg" alt="Strassenkarte"></a>
    2. <br>Der Weg zu uns</div>
    Code
    1. <div class="mail"><a href="mailto:spider67@aon.at"><img src="../Bilder/Email_78_9kb.gif" class="mail" border="0"></a></div>

    Hier noch das CSS dazu:



    Ich wäre für Tipps, wie ich das beheben kann sehr dankbar. Liegt es an der Ausrichtung der Elemente im umgebenden Container, oder an den Eigenschaften für :hover, die ich definiert habe?


    Danke für Eure Hilfe.

  • Die Seite ist noch nicht online, darum dachte ich ich, anhand des Codes wäre der Fehler auch zu ermitteln.


    Die .pdf Datei liegt bei, damit man sich den Aufbau der Seite vorstellen kann. Außerdem denke ich, dass ich eine klare Frage gestellt habe:


    Warum wird das Bild bei :hover an den linken Rand des umgebenden Containers verschoben. Keine Ahnung, was daran so schwer zu verstehen ist?????


    Vielleicht hat ja doch jemand eine Idee.


    Danke vorab.

  • Unter diesem Link findet man die Seite: http://127.0.0.1:50085/preview/app/index.html


    Das Problem mit dem Bild rechts oben habe ich gelöst (ich habe einfach für diesen Hyperlink kein :hover definiert)


    Links beim E-Mail Bild tritt der Fehler noch auf (hier brauche ich jedoch den :hover Effekt für die Navigation.


    Wie kann ich also verhindern, dass das Email img beim hovern nach links springt?


    Danke für die Hilfe.