nav unter header

easiy_

Hallo liebe Community
Ich habe versuche momentan mit html und css anzufangen und für einen kleinen Verein von mir eine Website zu bauen.
Nun habe ich damit angefangen nachdem ich mir das ein oder andere Tutorial durchgelsen oder angesehen habe diese zu basteln
nun habe ich allerdings das problem das sich meine nav unter dem header befindet
Ich Verlinke hier auch mal ein paar bilder
Ich hoffe ihr könnt mir hierbei helfen danke ich vorraus

Arne Drews

Setz bitte den relevanten Code hier in Code-Tags ein, anstatt mit Bildern, danke

easiy_

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
      <title>Paintball e.V Falkenau</title>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>   

        <section>
            <div class="content"></div>
            <div class="ImageBox"></div> 
        </section>

            <div class="logo">
                LOGO
            </div>

            <nav class="navbar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Was ist Paintball</a></li>
                    <li><a href="#">Unser Team</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </nav>

    </body>
</html>

Alles anzeigen

Code

body {
    margin: 0;
    padding: 0;
    background: #262626;
}






section {
    position: fixed;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 160px;
    width: 100%;
    background: #151515;
    box-shadow: 0 25px 30px rgba(0,0,0,.5);
    display: flex;
}


.content {
    width: calc(50% - 50px);
    height: 100%;
    background: #8A0829;
    box-sizing: border-box;
}


.ImageBox {
    width: calc(50% + 50px);
    height: 100%;
    background: #151515;
    box-sizing: border-box;
    border-left: 100px solid #8A0829;
    border-bottom: 160px solid transparent;
}

Alles anzeigen

Arne Drews

<div> ist ein Block-Element, nachfolgende Elemente werden i.d.R. immer darunter platziert.
Was genau willst Du stattdessen erreichen?

easiy_

naja im pirnizp soll die <div class="logo"></div> und die nav mit der ul und denn li über dem header stehen sprich über dem ImageBox Container

Sailor

Warum schreibst du dann den Code für die Navigation nicht einfach dahin, wo er hin soll?
Der Browser arbeitet den Code sequentiell ab und stellt die Elemente in der Reihenfolge dar, wie sie im Code stehen - es sei denn, du legst im CSS was anders fest.

easiy_

wenn ich die nav mit der ul und denn li über die div container content und ImageBox setzte passiert sowas

schreib mir aber besten mal denn code wie du das meinst

Sailor

So ganz erschließt sich die Idee, die hinter deinem Layout steckt, mir nicht :).
Du hast 'position: fixed;' für deine <section> und schiebst sie dann mit 'left: 50%;' und 'transform: translate(-50%,-50%);' hin und her?? Lass doch den Browser sein Ding machen und verzichte auf diese 'Zwangsmaßnahmen', die dich ja anscheinend auch jetzt an anderer Stelle mehr behindern als nutzen.
Teste das, was ich empfohlen habe... Logo und NAV im Code über die <section>

HTML

<div class="logo">
            LOGO
       </div>
       <nav class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Was ist Paintball</a></li>
                <li><a href="#">Unser Team</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>

        <section>
            <div class="content"></div>
            <div class="ImageBox"></div>
        </section>

Alles anzeigen

und notiere für <section> folgendes im CSS

HTML

section {
    height: 160px;
    width: 100%;
    background: #151515;
    box-shadow: 0 25px 30px rgba(0,0,0,.5);
    display: flex;
}

Und von da aus kannst du dann an deinem Design weiter feilen.

easiy_

Hab das jetzt mal so gemacht wie du es machen würdest dabei kommt das raus:
http://prntscr.com/lncw76

Hier mal noch vielleicht zum besseren verständniss wie es mal aussehen soll
http://prntscr.com/lncv69

Sailor

Da bist du mit deinem Layout auf dem falschen weg - wenn du die Navigation in einem anderen div haben willst - zB die Navigation im Container 'ImageBox', dann solltest du den Code dafür auch in den Container hineinschreiben.

HTML

<section>


       <div class="content">


          <div class="logo">
            LOGO
          </div>


       </div>


       <div class="ImageBox">


           <nav class="navbar">
              <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Was ist Paintball</a></li>
                  <li><a href="#">Unser Team</a></li>
                  <li><a href="#">Kontakt</a></li>
              </ul>
          </nav>


       </div>


   </section>

Alles anzeigen

Dazu dann noch etwas CSS um die Elemente so zu formatieren, dass es deinen Wünschen entspricht... zB

HTML

.navbar ul {
   list-style: none;
}
.navbar li {
    display: inline-block;
}

Den Rest solltest du dann wohl selber hinbekommen.

Tags

Benutzer online in diesem Thema