Liebe Leute,
gemäß der Anleitung der w3schools habe ich das Responsive Topnav with Dropdown nachgebaut.
forum-hilfe.de/attachment/4689/ forum-hilfe.de/attachment/4690/
Nun scheitere ich daran, links vor dem ersten Menüpunkt (Home) ein Logo (ein svg oder jpg) so zu platzieren, dass es
1. die Navigationsleiste nach oben und unten überlappt und
2. die anderen Menüpunkte nach rechts bzw. in der Hamburger-Variante nach unten verschiebt.
Gruuuß
Heiner
Kannst du uns mal den Link geben ? Wollte jetzt nicht ewig suchen.
EDIT: sorry habe den Link übersehen.
Was meinst du den mit überlappt ? So das das Bild grösser als die Leiste ist ,oder wie meinst du das ?
Ja, genau, das Bild soll höher sein als die Leiste, d.h es soll nach oben und unten über sie hinausragen.
Wie soll das den aussehen wenn es zum Hamburger Menü wird?
http://sebastian1012.bplaced.net/homepagebasti1…/navigation.php
Ich weiß zwar auch nicht ,aber zufrieden stellen tut mich das heute auch nicht. Irgendwie habe ich was vergessen.
In der Vollansicht ist das haargenau das, was ich wollte ! Danke!
In der Hamburger-Ansicht wäre es schöner, wenn Homer über das Menü bzw. das Menü unter Homer springen würde, alles linksbündig.
Soweit ich sehe, hast Du
1. das Bild mittels des nav-tags in den html-Code eingefügt und
2. diese CSS-Formatierungen hinzugefügt:
body{
display:flex;
flex-direction:column;
}
nav{
display:flex;
height:100px;
width:100%;
}
nav > img{
height:calc(100% - 16px);
width:150px;
border-radius:30%;
border:8px solid #333;
background-color: #333;
}
nav > img:hover{
border:8px solid #555;
background-color: #555;
cursor:pointer;
}
nav > .topnav{
width:100%;
height:48px;
margin:auto 0;
}
Zudem hast Du in folgendem Absatz die Höhe von 400 px hinzugefügt:
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
height:400px;
}
Stimmt das?
Ok ich versuche das nochmal zu ändern. Die Css wird sich dann nochmal ändern,bevor ich dir die ganzen änderungen sagen. Abersoweit hast du schon recht. Es gibt bestimmt auch noch viele andere möglichkeiten da ein Bild reinzumachen. Da dein Bid aber größer ist als die Navigation ,ist das doch etwas komplizierter weil sachen wie overflow und co andere auswirkungen haben .
Naja meine erklärungen sind wieder Müll. Ich mache mal einfach wie ich denke und wenn das ergebniss schon mal stimmt kann wer anders ja auch nochmal kucken ob es nee einfachere Methode gibt.
Ich melde mich nachher nochmal wenn ich fertig bin.
Für mich ist es jedenfalls zu kompliziert - das seh ich spätestens jetzt ein. Klasse, dass Du mir hilfst!
Kuck mal jetzt ob das Ergebniss stimmt ?
http://sebastian1012.bplaced.net/homepagebasti1…/navigation.php
Soll das Bild auch Linksbündig sein dann lösch hier den margin:0 auto; raus
Klasse!
Es funktioniert exakt wie gewünscht. Morgen schau ich mir Deine Arbeit genau an und setze es um. Vielen Dank! Du hast mir sehr geholfen.
Gruuuß
Heiner
