Ergebnis 1 bis 10 von 10

Thema: nav unter header

  1. #1
    HTML Newbie
    Registriert seit
    26.11.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard nav unter header

    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
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.638
    Danke
    24
    Bekam 138 mal "Danke" in 137 Postings

    Standard AW: nav unter header

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

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    26.11.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: nav unter header

    Code:
    <!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>
    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;
    }

  4. #4
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.638
    Danke
    24
    Bekam 138 mal "Danke" in 137 Postings

    Standard AW: nav unter header

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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    26.11.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: nav unter header

    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

  6. #6
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    336
    Danke
    0
    Bekam 75 mal "Danke" in 75 Postings

    Standard AW: nav unter header

    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.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    26.11.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: nav unter header

    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 Screenshot_5.jpg

  8. #8
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    336
    Danke
    0
    Bekam 75 mal "Danke" in 75 Postings

    Standard AW: nav unter header

    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-Code:
           <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>
    und notiere für <section> folgendes im CSS
    HTML-Code:
    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.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    26.11.2018
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: nav unter header

    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

  10. #10
    Meister(in)
    Registriert seit
    27.07.2015
    Ort
    Nordseeküste
    Beiträge
    336
    Danke
    0
    Bekam 75 mal "Danke" in 75 Postings

    Standard AW: nav unter header

    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-Code:
       <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>
    Dazu dann noch etwas CSS um die Elemente so zu formatieren, dass es deinen Wünschen entspricht... zB
    HTML-Code:
    .navbar ul {
       list-style: none;
    }
    .navbar li {
        display: inline-block;
    }
    Den Rest solltest du dann wohl selber hinbekommen.
    PHP-Code:
    if(!sleep)
      {
    $sheep++;}
    else
      {
    $status="zzzz";} 

Ähnliche Themen

  1. Antworten: 11
    Letzter Beitrag: 26.09.2018, 10:56
  2. Antworten: 3
    Letzter Beitrag: 06.11.2010, 18:07
  3. $header als variable für header.html
    Von im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 15.10.2006, 14:24
  4. Wie krig ich die rechte Abgrenzung unter meinen header ?
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 12
    Letzter Beitrag: 15.07.2006, 15:42
  5. Homepage unter Firefox OK unter IExplorer tut nichts
    Von Highlander im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 20.09.2005, 09:31

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •