Menüleiste im Header

Menüleiste im Header | PSD-Tutorials.de

Erstellt von mrssaxobeat_, 29.09.2021.

  1. mrssaxobeat_

    mrssaxobeat_ Noch nicht viel geschrieben

    Dabei seit:
    29.09.2021
    Beiträge:
    7
    Menüleiste im Header
    Hallo,
    nach etlichem hin und her probieren komm ich nicht drauf....
    Ich hab im DW ein neues Dokument mit header und footer erstellt.

    Und ich hätt im header gern links ein Logo und rechts eine Menüleiste.
    Wie bekomm ich die Menüleiste (hätte eine Spry Menu bar) IN den header??

    [​IMG]

    Danke schon mal vorab :)

    LG
     
    Zuletzt bearbeitet: 29.09.2021
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. mrssaxobeat_

    mrssaxobeat_ Noch nicht viel geschrieben

    Dabei seit:
    29.09.2021
    Beiträge:
    7
    Menüleiste im Header
    [​IMG]
     
    #2      
  4. owieortho

    owieortho Aktives Mitglied

    Dabei seit:
    25.06.2010
    Beiträge:
    776
    Geschlecht:
    männlich
    Ort:
    9.8241,51.3515
    Software:
    PS CS5, Scriptly, Notepad++
    Kameratyp:
    Caputio Ex und Bin
    Menüleiste im Header
    Jetzt noch ein bischen Quelltext Deiner Versuche, dann hätte man was, womit gegebenenfalls geholfen werden könnte.

    O.
     
    #3      
  5. mrssaxobeat_

    mrssaxobeat_ Noch nicht viel geschrieben

    Dabei seit:
    29.09.2021
    Beiträge:
    7
    Menüleiste im Header
    ich schaff es zwar die Menu bar IN den header zu bekommen, aber nicht, dass sie am rechten und unteren Rand abschließt und das Logo am linken Rand abschließend bleibt. - das verschiebt sich dann auch. :neutral:


    <body>

    <div class="container">


    <div class="header">
    <div align="right">
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Menü1</a> </li>
    <li><a href="#">Menü2</a></li>
    <li><a href="#">Menü3</a> </li>
    <li><a href="#">Menü4</a></li>
    </ul>
    <a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a></div>
     
    #4      
  6. draupnir

    draupnir J. Kriebeler Teammitglied Kreativ-Flatrate-User

    Dabei seit:
    08.11.2008
    Beiträge:
    1.031
    Geschlecht:
    männlich
    Ort:
    Kelkheim (Taunus)
    Software:
    Adobe Illustrator, Photoshop; CINEMA 4D R13; Corel Painter; macOS 10 und 11, Windows 10 und 11
    Kameratyp:
    Sony Alpha 7R
    Menüleiste im Header
    dazu braucht es auch etwas CSS(-Zauber) :) HTML alleine reicht nicht.
     
    #5      
  7. mrssaxobeat_

    mrssaxobeat_ Noch nicht viel geschrieben

    Dabei seit:
    29.09.2021
    Beiträge:
    7
    Menüleiste im Header
    das heißt jetzt für mich? wie bekomm ich das hin? :)
     
    #6      
  8. draupnir

    draupnir J. Kriebeler Teammitglied Kreativ-Flatrate-User

    Dabei seit:
    08.11.2008
    Beiträge:
    1.031
    Geschlecht:
    männlich
    Ort:
    Kelkheim (Taunus)
    Software:
    Adobe Illustrator, Photoshop; CINEMA 4D R13; Corel Painter; macOS 10 und 11, Windows 10 und 11
    Kameratyp:
    Sony Alpha 7R
    Menüleiste im Header
    HTML fehlerfreier:

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Menü im Web</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <div class="container">
    <div class="header">
    <div class="logo"> <!-- neu -->
    <a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="20%" height="90" id="Insert_logo" style="background-color: #8090AB; display:block;" /></a>
    </div> <!-- neu -->
    <div class="menu"> <!-- geändert -->
    <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="#">Menü1</a> </li>
    <li><a href="#">Menü2</a></li>
    <li><a href="#">Menü3</a> </li>
    <li><a href="#">Menü4</a></li>
    </ul>
    </div> <!-- neu -->
    </div> <!-- ergänzt -->
    </div> <!-- ergänzt -->
    </body>
    </html>​

    CSS als externe Datei, die oben geladen wird:

    /* CSS */
    .container {width: 100%;}
    .header {width: 100%;}
    .menu {float: right; width:40%; background-color: yellow;}
    .logo {float: left; width:40%; background-color: yellow;}​

    Viel Erfolg
    – j.
     
    #7      
  9. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.298
    Geschlecht:
    männlich
    Ort:
    Ö
    Menüleiste im Header
    Floats werden hier gar nicht gebraucht, das kann mit Flexbox gut umgesetzt werden. Oder meinetwegen auch mit grid, aber nicht mit floats.
     
    #8      
  10. draupnir

    draupnir J. Kriebeler Teammitglied Kreativ-Flatrate-User

    Dabei seit:
    08.11.2008
    Beiträge:
    1.031
    Geschlecht:
    männlich
    Ort:
    Kelkheim (Taunus)
    Software:
    Adobe Illustrator, Photoshop; CINEMA 4D R13; Corel Painter; macOS 10 und 11, Windows 10 und 11
    Kameratyp:
    Sony Alpha 7R
    Menüleiste im Header
    Stimmt, CSS bietet viele Möglichkeiten das Problem zu lösen. Float ist die Lösung, die auch in sehr alten Browsern funktioniert. Wir wissen ja nicht, wie kompatibel die Lösung sein soll, gell?
     
    #9      
  11. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.298
    Geschlecht:
    männlich
    Ort:
    Ö
    Menüleiste im Header
    Flexbox wird auch von "sehr alten" browsern verstanden, sogar von solchen, die schon deprecated sind. Aber ja, wenn IE 6,7,8 9 oder ähnlich unterstützt werden sollen, dann ist float die Lösung. Browser die heute verwendet werden können alle Flexbox (und auch grid)
    IE ist der einzige der grid nicht wirklich beherrscht, deshalb mein Zusatz mit "eventuell Grid".
    Einerseits weil Flexbox besser für eindimensionale Anordnung geeignet ist. Andererseits weil Grid im IE nicht super funktioniert.

    Also ja, Flexbox is the way to go wenn es um ältere Browser geht, da hast du Recht!
     
    #10      
  12. mrssaxobeat_

    mrssaxobeat_ Noch nicht viel geschrieben

    Dabei seit:
    29.09.2021
    Beiträge:
    7
    Menüleiste im Header
    vielen lieben Dank für die Tipps und Tricks :)
    So grob hab ich das jetzt mal hinbekommen, aber nicht so ganz wie ich will....

    wie schaff ich es, dass die "Zeile" - rot markiert weg ist? also sprich, das Menü quasi IM Logo-Bild rechts ist.
    und Rechts eben so, dass es am Rand abschließt und nicht wenn man den Browser zoomt, das Menü "raushüpft" oder sich "einzieht" :-D

    nav ul {
    padding-left: 50%;
    display: flex;
    }

    nav li {
    list-style-type:none;
    margin-right: 1px;
    }

    nav li a:link {
    text-decoration: none;
    font-weight: normal;
    display: block;
    background: #FC9810;
    width: 6em;
    padding: 0.2em;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    color: #FFF;
    font-size: 18px;

    }

    <div class="container">
    <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="100%" height="114" id="Insert_logo" style="background-color: #8090AB; display:block;" />
    </a>
    <nav>
    <ul>
    <li><a href="index.html">Fotografie</a></li>
    <li><a href="ort.html">Portfolio</a></li>
    <li><a href="dies.html">über mich</a></li>
    <li><a href="das.html">Kontakt</a></li>
    </ul>
    </nav>
    <a href="#"> </a><!-- end .header --></div>

    [​IMG]
    [​IMG]
     
    Zuletzt bearbeitet: 09.11.2021
    #11      
  13. owieortho

    owieortho Aktives Mitglied

    Dabei seit:
    25.06.2010
    Beiträge:
    776
    Geschlecht:
    männlich
    Ort:
    9.8241,51.3515
    Software:
    PS CS5, Scriptly, Notepad++
    Kameratyp:
    Caputio Ex und Bin
    Menüleiste im Header
    Und was ist der aktuelle Quelltext (HTML und CSS)? Anhand der Bildchen kann doch bloß Wahrsagerei betrieben werden.

    O.
     
    #12      
    mrssaxobeat_ gefällt das.
  14. mrssaxobeat_

    mrssaxobeat_ Noch nicht viel geschrieben

    Dabei seit:
    29.09.2021
    Beiträge:
    7
    Menüleiste im Header
    nav ul {
    padding-left: 50%;
    display: flex;
    }

    nav li {
    list-style-type:none;
    margin-right: 1px;
    }

    nav li a:link {
    text-decoration: none;
    font-weight: normal;
    display: block;
    background: #FC9810;
    width: 6em;
    padding: 0.2em;
    font-family: Verdana, Geneva, sans-serif;
    font-style: normal;
    color: #FFF;
    font-size: 18px;

    }

    <div class="container">
    <div class="header"><a href="#"><img src="" alt="Insert Logo Here" name="Insert_logo" width="100%" height="114" id="Insert_logo" style="background-color: #8090AB; display:block;" />
    </a>
    <nav>
    <ul>
    <li><a href="index.html">Fotografie</a></li>
    <li><a href="ort.html">Portfolio</a></li>
    <li><a href="dies.html">über mich</a></li>
    <li><a href="das.html">Kontakt</a></li>
    </ul>
    </nav>
    <a href="#"> </a><!-- end .header --></div>
     
    #13      
  15. mrssaxobeat_

    mrssaxobeat_ Noch nicht viel geschrieben

    Dabei seit:
    29.09.2021
    Beiträge:
    7
    Menüleiste im Header
    konnte leider beide Probleme noch nicht lösen :confused:
     
    #14      
  16. draupnir

    draupnir J. Kriebeler Teammitglied Kreativ-Flatrate-User

    Dabei seit:
    08.11.2008
    Beiträge:
    1.031
    Geschlecht:
    männlich
    Ort:
    Kelkheim (Taunus)
    Software:
    Adobe Illustrator, Photoshop; CINEMA 4D R13; Corel Painter; macOS 10 und 11, Windows 10 und 11
    Kameratyp:
    Sony Alpha 7R
    Menüleiste im Header
    Das kann ich verstehen, denn Dein ist unvollständig/fehlerhaft:
    Du hast ein schliessendes </div> zu wenig.
    Im CSS könntest Du es mit "float: left" und "float: right" probieren, statt dem neuen Befehl "display".
    – j.
     
    #15      
Seobility SEO Tool
x
×
×