Beiträge von 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.

    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.

    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?

    Hallo Mr. Murphy,


    wenn man sich jedoch das Tutorial unter diesem Link ansieht: "https://www.on-design.de/tutor/html5_css3/css3/grid.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?

    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.

    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 ;););)

    @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.

    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.

    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.



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


    #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;

    }

    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.

    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:

    <div id="wrapper">

    <header role="banner">

    <div class="flex"><img src="../../bilder/logo_zander_animiert.gif" width="110" height="85" alt=""/><img src="../../bilder/animierter_zander_von_links_nach_rechts.gif" width="120" height="92" alt="Zander von links nach rechts"/><img src="../../banner-Dateien/image001.gif" alt="Logo Verein" width="414" height="48" /><img src="../../bilder/animierter_zander_von_rechts_nach_links.gif" width="120" height="92" alt=""/><img src="../../bilder/logo_zander_animiert.gif" width="110" height="85" alt=""/></div></header></div>


    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.

    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.)

    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.

    Hallo,


    wie muss ein Layout unter Verwendung des Grid Layout im CSS definiert werden, damit folgendes erreicht wird:


    Auf jeder Seite sollen sich links und rechts je eine Navigation befinden, sowie ein Header und ein Footer, der Mainbereich soll auf jeder Seite anderen Inhalt bekommen.


    Auf der Startseite sollen im Mainbereich ein horizontaler Bereich als Header und darunter zwei horizontale Bereiche als sections nebeneinander platziert werden, die jedoch auf den anderen Seiten natürlich nicht vorkommen.


    Für Hilfe bin ich natürlich sehr dankbar.


    LG aus Österreich.

    Hallo,


    ich habe mich jetzt doch mal mit der Flexbox beschäftigt, allerdings bei einer Bildergalerie. Das funktioniert auch ganz toll und ist doch nicht so komliziert wie ich dachte. Danke jedenfallls für die Anregung, ich werde das beim Formular auch mal versuchen.

    Hallo,


    vielen Dank. Jetzt passt es. Ich habe zwar nur 3 Bilder in einer Reihe und nicht 4, aber das sollte auch noch zu schaffen sein.


    Da muss ich bei der Größe der Bilder oder bei der Größe des umgebenden Containers etwas ändern, oder liege ich da falsch?


    Danke für die Hilfe.

    Guten Morgen, ich brauche Hilfe.


    Hier mal der Code:


    Was muss ich bei dem o.a. Code im CSS ändern, dass immer nur 4 Bilder in einer Zeile angezeigt werden und danach automatisch der Umbruch in eine neue Zeile erfolgt?


    Danke für Eure Hilfe.


    LG aus Österreich

    Dieter

    Hallo,


    dann verstehe ich nicht, warum in meinem CSS Buch von Peter Müller (Einstieg in CSS) in dem auch Html 5 und CSS 3 behandelt wird, definitiv erklärt wird, dass bei "Inline Block-Boxen" sämtliche Box-Modell Eigenschaften verwendet werden können. Außer die Collapsing margin Eigenschaften und Einschränkungen bei der Eigenschaft width, können height, padding und border genau wie bei Block-Boxen eingesetzt werden.


    Wieso also sollte mein Ansatz dann nicht funktionieren, bzw. funktioniert die Positionierung ja ohnehin bereits soweit? das einzige was noch stört, ist wie angeführt die Tatsache, dass das Textfeld am oberen Rand der umgebenden Box (dem boarder klebt und nicht in der Mitte der Box). Und dafür suche ich eine Lösung.



    Danke vorab.