HTML/CSS Frage zu meinem Blog-Design

  • Mit Grids kenne ich mich nicht all zu gut aus, aber das sollte funktionieren, denn es ist ein Grid Design.

    und außerdem wie man die Navigationspunkte im Header am besten realisieren kann, da die ja ein bisschen dezentralisiert sind

    Du kannst dazu Flexboxen verwenden. Das Logo bekommt die eine bestimmte ID, sowie das Menü und auch die Shortcut Icons. Dadurch kannst Du alle einzeln ansprechen und dementsprechend platzieren.

  • ich persönlich würde es mit Flexbox machen.

    Aber was Flexbox kann ,kann Grid ja erst recht wie ich weiß.

    Deine Navigationspunkte sind das Bilder oder werden die mit Css erzeugt ?

    Jenach dem kannst du die dann ja mit margin,position oder auch line-height aus der Reihe absetzen.

    Wie weit man das alles bei Grid umsetzen kann weiß ich nicht genau ,aber sollte wahrscheinlich auch machbar sein

  • Soo hab jetzt bisschen was gebastelt und hab aber das Problem, dass ich nicht so Recht weiß wie ich den Footer untem am Viewport kleben kann.. Außerdem habe ich versucht mit einer Font-Art die Social Media Icons anzeigt oben in der rechten Ecke mit einer flex-UL hinzuklatschen (Also nebeneinander angeordnet) Hat aber leider nicht so ganz geklappt, die Flexbox mit den Elementen wurde nicht angezeigt:



    HTML:


    <!doctype html>



    <html>

    <head>

    <title>Big Nerd Bear - Tech, Gaming and Nice T-Shirts</title>

    <meta charset="utf-8">

    <link rel="stylesheet" href="bignerdbearstil.css">

    </head>


    <body>


    <div class="wrapper">



    <header class="topheader">


    <ul>

    <li class="first"><a href="#">GAMING</a></li>

    <li class="second"><a href="#">TECH</a></li>

    <li class="third"><a href="#">TSHIRT'S</a></li>

    <li class="fourth"><a href="#">CONTACT</a></li>

    </ul>


    </header>



    <header class="subheader">


    <h1> GAMING </h1>


    </header>



    <main>


    <div>





    </div>







    </main>







    </div>



    <footer>





    </footer>


    </body>




    </html>


    ------------------------------------------------------------------------------------------------------------------------------------------------


    CSS:



    body{


    margin:0;

    padding: 0;

    background-color: #294567;

    }


    .wrapper {


    display: grid;

    grid-template-rows: 150px 70px 700px 200px;

    }


    .topheader {


    background-color: #305179;

    background-image: url(GFX/Bignerdbear/BigNerdBear+sub.png);

    background-size: 200px;

    background-repeat: no-repeat;

    background-position: 60px;



    }


    header ul {



    list-style: none;

    display: flex;

    justify-content: space-around;

    align-items: center;

    margin-top: 60px;

    font-family: 'Impact';

    font-size: 1.7rem;

    width: 40%;

    margin-left: 400px;




    }


    header ul li{


    background-color: white;

    margin: 0;

    }


    main {


    display: grid;

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

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

    height: 100vh;

    grid-gap: 40px;

    margin: 20px;

    min-height: 100%;



    }


    footer {


    background-color: #182a3f;

    }


    .subheader{


    background-color: white;;

    }


    .second {


    margin-bottom: 20px;



    }


    .third {


    margin-top: 10px;

    }


    .fourth {


    margin-bottom: 25px;

    }


    .subheader h1 {


    text-align: center;

    font-family: 'Impact';

    }


    header ul li a{


    text-decoration: none;

    color: black;

    }



    main div {


    background-color: white;

    grid-row: 1/7


    }



    footer{



    height: 120px;

    background-color: #132030;

    }

  • Die Menüpunkte mit

    Code
    .menu-item.top {
      transform: translateY(-0.3em);
    }
    
    .menu-item.bottom {
      transform: translateY(0.3em);
    }

    zu verschieben finde ich auch nee gute idee. Wahrscheinlich sogar besser als mit margin

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!