Beiträge von Spider67

Spider67

Danke ich habe es jetzt mit diesem CSS realisiert:

Code

div .mail:first-child {
    text-decoration: underline;
    background: #000066;
}

Das funktioniert auch toll.

Spider67

Hallo,

vielen Dank das funktioniert (ist ja auch nur eine Spielerei).

Eine Frage noch dazu. Nachfolgend findest Du mein HTML. Wie kann ich im nav Container jetzt die a Elemente selektieren, ohne dass das letzte a Element (a href: mailto:) auch selektiert wird. Dort möchte ich den .hover Effekt nicht haben. Ich habe es im CSS mit nav li a versucht, aber das funktioniert nicht.

Danke für die Hilfe.

Code

<nav role="navigation" class="pagenav">
        <img src="../../bilder/logo_zander_animiert.gif" alt="schwimmender Zander"/>
        <br>
        <br>
        <ul>
            <li class="button"><a href="../../hauptseite.htm">Startseite</a></li>
            <li class="button"><a href="der_verein.htm">Der Verein</a></li>
            <li class="button"><a href="bestimmungen neu.html">Bestimmungen</a></li>
            <li class="button"><a href="Anmeldeformular.html">Anmeldeforumlar</a></li>
            <li class="button"><a href="Liste-Mitglieder.htm">Liste Mitglieder</a></li> 
            <li class="button"><a href="veranstaltungen.htm">Veranstaltungen</a></li>
            <li class="button"><a href="bildergalerie.htm">Bilder</a></li>
            <li class="button"><a href="Fun_und_Unterhaltung.htm">Fun/Unterhaltung</a></li>
            <li class="button"><a href="Archiv.htm">Archiv</a></li>
            <li class="button"><a href="links.htm">Links</a></li>
            <li class="button"><a href="termine.htm">Gästebuch</a></li>
            <li class="button"><a href="../../html/Link_in_Arbeit.html">Chat</a></li>
            <li class="button"><a href="forum.htm">Forum</a></li>
            <li class="button"><a href="Vorstand/Vorstandsbereich_neu.html">Vorstand</a></li>
        </ul>
        <div class="mail"><a href="mailto:"><img border="0" src="../Bilder/Email_78_9kb.gif"></a></div>
    </nav>

Alles anzeigen

Spider67

Hallo,

ich habe ein Listelement mit beiliegendem Hintergrundbild ausgezeichnet .

Das Listelement enthält einen Hyperlink (zB. "Startseite"), wobei der Text kürzer ist als das Hintergrundbild.

Ich kann also weder das Hintergrundbild zum eigentlichen Link machen noch mit den Pseudoklassen arbeiten, da diese nur den Linktext ansprechen.

Wenn ich den Link um das ganze "li-element" lege, kann ich keinen Text angeben, das das Bild dann im Vordergrund ist.

Wie schaffe ich es, dass beim Anklicken des Linktextes trotzdem das Hintergrundbild verändert wird? DAs sollte mit JS funktionieren, ich blick aber nicht durch.

Ich hoffe mein Wunsch ist halbwegs verständlich erklärt, und danke für Eure Hilfe.

Grüße aus Österreich.

Spider67

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.

Spider67

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.

Spider67

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.

Spider67

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.

Spider67

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.

Spider67

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

Spider67

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?

Spider67

Hallo Mr. Murphy,

wenn man sich jedoch das Tutorial unter diesem Link ansieht: "https://www.on-design.de/tutor/html5_cs…d.html#implicit"

gibt es unter dem Punkt "Definieren der Tracks/Spanning" ein Bespiel mit 3 Containern wo zwischen dem Container a und dem Container C eine Spalte von 20px ausgewiesen wird. Diese Spalte findet sich im Container B, der sich von Zeile 1 bis Zeile 3 erstreckt, nicht. Das wäre genau das Layout, das ich gemeint habe. Wie ist das zu bewerkstelligen, dass anscheinend diese Spalte im Container B nicht auftaucht?

Spider67

Schon ist eine Frage aufgetaucht: mit der Eigenschaft: grid-row-gap kann ich ja Abstände zwischen den Zeilen erzeugen. Besteht irgendeine Möglichkeit, diese Abstände auf einige Bereiche einzuschränken, sodass die Abstände zwischen den Bereichen nicht überall vorhanden sind? Anders gefragt, kann man es definieren, das z.B. zwischen 2 vertikalen Bereichen in Spalte 1 kein Abstand vorhanden ist in Spalte 2, 3 und 4 schon und in Spalte 5 nicht? Also wie ist es möglich, vertikale Elemente in einzelnen Spalten mit Abständen und in anderen Spalten ohne Abstände anzuzeigen? Ist dies mit den Eigenschaften: align-items oder align self möglich, oder geht das gar nicht?

Danke für die Hilfe.

Spider67

Ok, danke vorerst für Deine Hilfe ich werde weiter an der Gestaltung der Startseite arbeiten. Vielleicht habe ich ja noch die eine oder andere Frage dazu.

Es wird sicher ein Projekt über mehrere Monate, da ich vorhabe nach und nach die komplette Website auf modernes Design umzustellen (derzeit ist noch alles über Tabellen und Frames dargestellt. Da ich das aber als Autodidakt und nebenberuflich als Hobby betreibe, wird es halt entsprechend dauern. Interessant ist es jedenfalls

Spider67

@Mr. Murphy.

Danke für Deine Mühe und Hilfe. Verstehe ich das richtig, dass Dein Coede mein Positionierungsproblem im Header löst, ich aber rotzdem den Rest der Seite mit dem Grid Layout weiter aufbauen bzw. den bereits erstellen Teil auch so lassen kann?

Danke vorab.

Spider67

Nochmal zur Erklärung: Mein Wunsch ist, dass sich im Kopfbereich zentriert in der Mitte das Logo flankiert von den beiden schwimmenden Zandern befindet.

Links und rechts am Rand des Kopfbereiches sollen die blinkenden Zander erscheinen. Ich schaffe es jedoch nur, alles gemeinsam zentriert anzuzeigen. Sonst rutscht immer das zentrierte Bild nach unten aus dem Kopfbereich heraus.

Es ist für mich auch kein Problem, wenn alles zentriert dargestellt wird, ich möchte nur den Grund verstehen, warum die andere Lösung nicht klappt.

Spider67

Hallo,

ich habe jetzt mal die ganzen "height" und "width" entfernt und einen Versuch mit zwei weiteren divs mit Display : flewx gestartet. Der blinkende Zander wird zwar links am Rand dargestellt, jedoch wird das zentrierte Logo und das zweite div aus dem Header nach unten hinausbefördert.

Nur wenn ich die beiden Zander links und rechts außen innerhalb des zentrierten divs eintrage, passt alles. Hier nochmals das html und das geänderte CSS sowie die Bilder als Dateianhang.

Danke für die mögliche Hilfe.

HTML

<div id="wrapper">
<header role="banner"><div class="zanderlinks"> <img src="../../bilder/logo_zander_animiert.gif" alt="blinkender Zander"/></div>
<div class="flex"><img src="../../bilder/animierter_zander_von_links_nach_rechts.gif" alt="Zander von links nach rechts"/><img src="../../banner-Dateien/image001.gif" alt="Logo Verein" /><img src="../../bilder/animierter_zander_von_rechts_nach_links.gif" alt="Zander von rechts nach links"/><div class="zanderrechts"> <img src="../../bilder/logo_zander_animiert.gif" alt="blinkender Zander"/></div></div></Header>

CSS

#wrapper {
display: grid;
grid-template-rows: 100px 1fr 100px;
grid-template-columns: 250px 1fr 250px;
height: 100vh;
}

header {
background: #000066;
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}

.flex {
display: flex;
justify-content: center;
align-items: center;
}

.zanderlinks {
display: flex;
justify-content: flex-start;
align-items: center;
}

.zanderrechts {
display: flex;
justify-content: flex-end;
align-items: center;
}

Alles anzeigen

Spider67

Danke für die ganzen Erklärungen, die mir als Laie und Autodidakt überhaupt nicht weiterhelfen. Keine einzige der angeführten Aussagen oder Behauptungen löst mein Problem, dass die beiden Bilder (Zander links und rechts außen) nicht zentriert sein sollen, sondern rechts und links am Rand des Headers positioniert sein sollen.

Nachfolgend noch ein paar Anmerkungen zu Deiner "Hilfe": Das div Element ist nicht überflüssig, da es dafür verantwortlich ist, alle imgs zu zentrieren (was ja auch bestens funktioniert). Weiters sind überhaupt keine Hintergrundbilder vorhanden. Zusammenfassend bleibt mir dann leider nur zu sagen, dass auch Dein Kommentar zwar nicht veraltet aber leider total sinnfrei ist. Aber trotzdem danke dafür, schade, dass Du meine Frage nicht beantwortet hast, obwohl Du ganz schön viel geschrieben hast.

LG aus Österreich.

Spider67

Hallo, hier habe ich noch ein Positionierungsproblem:

Nachfolgend das CSS:

#wrapper {

display: grid;

grid-template-rows: 100px 1fr 100px;

grid-template-columns: 250px 1fr 250px;

height: 100vh;

}

header {

background: #000066;

grid-column-start: 1;

grid-column-end: 4;

grid-row-start: 1;

grid-row-end: 2;

}

.flex {

display: flex;

justify-content: center;

align-items: center;

}

Und hier das html:

Wie muss ich jetzt das CSS ändern, damit die beiden "Bilder/logo_zander_animiert.gif" links und rechts am Rand stehen und nicht auch zentriert werden, wie das Logo und die beiden Zander, die sich hin und her bewegen?

Danke für Eure Hilfe.

Spider67

Weil Flexbox doch eher für zweidimensionale Layouts gedacht ist, und die Möglichkeiten bezüglich der Positionierung doch eingeschränkt sind (Elemente erstrecken sich zB über mehrere Spalten oder Zeilen; Spalten oder Zeilen bleiben frei etc.)

Spider67

Guten Morgen,

derzeit wird das mit Frames realisiert, da die Seite schon lange besteht. Ich möchte das jedoch nach und nach modernisieren, wobei ich die Seite nur nebenbei als Autodidakt betreue. Ich denke aber, dass Grid bzw. Flexbox die modernen Varianten zur Gestaltung des Layouts sind.

Mit Flexbox habe ich auch schon Seiten gestaltet, das funktioniert auch super, mit Grid habe ich noch keinerlei Erfahrung, weiß jedoch ungefähr über den Aufbau Bescheid.

Beiträge von Spider67

Hintergrundbild verändern

Hintergrundbild verändern

Hintergrundbild verändern

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid

Layout mit Grid