Beiträge von Kickflip

  • CSS Grid - Images mit Text und Zoom bei hover

    Um nochmal alles aufzulisten:


    - Bild im Grid anzeigen lassen, im Modus cover meinetwegen, sodass stets die gesamte Zelle im CSS-Grid ausgefüllt ist

    - Text auf dem Bild anzeigen lassen

    - das gesamte Bild soll einen Link enthalten, sprich auf eine andere Seite führen

    - wenn man über das Bild hovert, dann soll sich das Bild größer skalieren, irgendwelche Bilder angewendet werden, aber es soll niemals die vorgegeben CSS-Gridgrenzen überschreiten


    Bekomme das echt nicht hin.

  • CSS Grid - Images mit Text und Zoom bei hover

    Um es auf deinen Code abzustimmen wäre das Grid-Layout wie folgt:


    Code
    #grid-container {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(21, 4vw);
    grid-gap: 0px;   
}


    Aber die exakten Anzahlen an rows und columns ist ja wumpe. Wenn ich sage, dass das Bild wie in diesem Fall von


    Code
    #grid-item-team {
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 11;
            grid-row-end: 19;
        }


    laufen soll, dann soll es auch nur dadrin angezeigt werden :)

  • CSS Grid - Images mit Text und Zoom bei hover

    Danke für deine Bemühung, aber das funktioniert immer noch nicht. Also es ändert sich gar nichts zum code davor. Die Funktionen stimmen alle, aber der Text wird oberhalb des Bildes angezeigt und Das Bild hält sich nicht an die row und column Vorgabe für das Grid.

  • CSS Grid - Images mit Text und Zoom bei hover

    Hi,


    ich komme einfach nicht auf einen grünen Zweig.


    Was ich möchte:

    In einem CSS-Grid mehrere Bilder anordnen und wenn man mit dem Zeiger rüberfährt, soll das Bild so einen Zoom-Effekt zeigen. Dabei soll es aber stets nicht über die Maße des vorgegeben Grids hinausragen, was momentan bei mir der fall ist. Das Bild wird vergrößert, aber man sieht, wie es aus dem für ihn vorgesehenen Bereich herausspringt und der overflow: hidden nicht funktioniert.

    Außerdem soll vor dem Bild ein Text angezeigt werden und wenn ich auf das Bild klicke, soll eine andere Seite geöffnet werden.


    HTML:

    Code
    <div id="dasTeam"> Fertige Projekte</div>
<img id="dasTeamBild" src="images/team.jpg" alt="alternativer_text">



    CSS:




    Ist alles ein bisschen hardcode, weil ich noch ausprobiere. Weiß jemand, warum das nicht läuft? :)


    Gruß

  • Seitenstrukturierung von Unterseiten in HTML

    Hi,


    ich habe bereits gelernt, dass man eine .css und eine .js Datei hat, wo alles drin ist.


    Jetzt frage ich mich aber, wie das bei den .html ist.


    Man hat ja eine index.html , die quasi die Hauptseite (bsp example.com) präsentiert. Jetzt hat man aber zum Beispiel ein Impressum, also example.com/impressum


    Frage:

    Muss ich jetzt für jede neue Seite eine neue .html erzeugen? Also es funktioniert ja so, aber gibt es da nicht eine clevere Lösung?

    header und footer sollen aber auf der Impressumsseite genauso angezeigt werden wie auf der example.comSeite


    andere Frage:

    Gibt es eine Möglichkeit in HTML eine Funktion zu erzeugen, die anhand von Inputparametern sich anders verhält? Input wäre z.b. sowas wie Schriftgröße oder Name eines Links etc.?


    Gruß

  • Problem mit responsive NavBar

    Hi,


    wenn ich mit @media unter 768px fahre, dann verschwindet meine NavBar und sie kann per Burger-Toole von der Seite reingeholt werden.


    Mein Problem ist, dass man sieht, wenn ich von 769px -> 768px gehe, wie die NavBar verschwindet. Das möchte ich nicht, ich möchte einfach, dass das umspringt und wenn ich auf den Burger klicke die Bar langsam ins Bild transformiert.



    Habe einfach in CSS:


    transform: translateX(100%);

    transition: transform 0.2s ease-in;



    .nav-active{

    transform: translateX(0%);

    }



    und in JS


    const nav = document.querySelector('.NAVLINKS');


    burger.addEventListener('click',()=>{

    //toggle nav

    nav.classList.toggle('nav-active');

    }

  • Top-Navigationsleiste passt sich beim kleiner ziehen nicht an

    das


    Code
    @keyframes navLinkFade{
        from{
            opacity: 0;
            transform: translateX(50px);
        }
        to{
            opacity: 1;
            transform: translateX(0px);
        }
    }


    macht Probleme, wenn ich das auskommentiere funktioniert es



    Javascript rufe ich in der HTML auf mit


    Code
    <script src="TopNavBar.js"> </script>


    sieht wie folgt aus:


  • Top-Navigationsleiste passt sich beim kleiner ziehen nicht an

    Hi,


    das ist die html zu der nav:


  • Top-Navigationsleiste passt sich beim kleiner ziehen nicht an

    Hi,


    ich habe folgendes Problem:


    Ich würde gerne eine Navigationsbar einpflegen, die sich je nach Größe des Fensters anders verhält. Etwas besonderes für die kleinste Größe bis 768px, was für das Smartphone zutrifft, danach dann etwas mit 959px, weil sich sonst die einzelnen Punkte oben in der Leiste überschneiden und danach dann etwas für eine Desktopansicht.


    Das Problem ist, das die Navigationsleiste das ganze so semi macht. Also wenn ich mein Fenster klein habe (bsp. 750px), und in diesem Zustand die Seite neu lade dann zeigt sie den Smartphonemodus an. Alles super. Wenn ich es dann größer ziehe, dann geht sie auch schön ab 769px in den Mittelmodus und ab 960px in den Desktopmodus. Aber da bleibt das Ganze nun. Wenn ich jetzt das Fenster wieder kleiner ziehe, dann springt sie nicht wieder zurück in die anderen Modi. Wenn ich aber die Seite dann kleingezogen habe, und neu lade, dann zeigt sie wieder den Smartphonemodus an. Warum ist das so? Was mache ich falsch? Benutze Safari.