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?

Ok. Danke. Zu welchen Problemen kann das bei reponsivem Layout führen?

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.

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:

<div class="navi2"><a href="der_weg_zu_uns.htm"><img src="../../bilder/strassenkarte2-k.jpg" alt="Strassenkarte"></a>
        <br>Der Weg zu uns</div>

<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:

img {
   min-width: 1px;
   display: block;
   max-width: 100%;
   border: 0px;
}

.mail {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navi2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

div.navi2 img {
    min-width: 1px;
    display: block;
    max-width: 100%;
    border: 0px;
    color: white;
}

nav a {
   display: block;
   width: auto;
   height: auto;
   background-image: url('flurl_button-1.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   color: #fff;
   text-align: center;
   line-height: 22px;
}

a:visited {
    text-decoration: underline;
    color: black;
}

a:hover {
   background-image: url("../../bilder/flurl_button-2.jpg");
   color: white;
   width: 100%;
   height: auto;
   }

.rechts a:hover {
   background-image: url("../../bilder/flurl_button-2.jpg");
   color: white;
   width: 95%;
   height: auto;
}

.navi2 a:hover {
   background: #000066; 
}

a:focus {
    text-decoration: underline;
    background-image: url("../../bilder/flurl_button-2.jpg");
    color: white;
    width: 100%;
    height: auto;
}

.rechts a:focus {
   text-decoration: underline;
   background-image: url("../../bilder/flurl_button-2.jpg");
   color: white;
   width: 95%;
   height: auto;
}

.navi2 a:focus {
   background: #000066; 
}

a:active {
    text-decoration: underline;
}

.mail a {
    text-decoration: underline;
    background: #000066;
}

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.

Sorry, damit sollte es klappen: http://fischereivereinkleinmeiseldorf.at/html/Anwendung…tseite_neu.html

Danke vorab.