# Bilder in Banner alignen



## Kirby.exe (12. Feb 2020)

Wie kann ich den Namen links und die Logos von Instagram und YouTube rechts alignen (alle auf eine Zeile)?

So sieht es im Moment aus xD:


Hier ist der Code:



Spoiler: HTML-Code





```
<div class="head-banner">
    <div id="ownerName">My Name</div>
    <a href="#"><img class="instagram" src="../../img/logos/social_media_logos/instgram.png"></a>
    <a href="#"><img class ="youtube" src="../../img/logos/social_media_logos/youtube.png"></a>
</div>
```






Spoiler: CSS-Code





```
.head-banner{
    overflow: hidden;
    margin: 10px;
    padding: 0;
    background-color: white;
}
.head-banner ownerName {
    font-size: 30px;
    color: black;
    text-align: center;
    text-decoration: none;
    position: left;
}

.head-banner a img.instagram{
    width: 26px;
    height: 26px;
    display: block;
}

.head-banner a img.youtube{
    margin-left: 1370px;
    width: 43px;
    height: 38px;
    display: block;
}
```


----------



## Robat (12. Feb 2020)

Mach das Margin `margin-left: 1370px;` weg. solche Angaben sind meist keine gute Idee.
Gib deinem `.head-banner` ein `display: flex;` und gib dem ersten a in der div ein `margin-left: auto`

```
.head-banner a:first-of-type {
  margin-left: auto;
}
```

BTW:  `.head-banner ownerName` hier fehlt bei owerName der Punkt davor


----------



## Kirby.exe (12. Feb 2020)

Robat hat gesagt.:


> Mach das Margin `margin-left: 1370px;` weg. solche Angaben sind meist keine gute Idee.
> Gib deinem `.head-banner` ein `display: flex;` und gib dem ersten a in der div ein `margin-left: auto`
> 
> ```
> ...


Uups Danke


----------



## Kirby.exe (12. Feb 2020)

Könntest du mir erklären wie genau Bilder in CSS verschoben oder angeordnet werden? Ich habe das ehrlich gesagt nicht wirklich verstanden


----------



## Robat (12. Feb 2020)

Das hat nichts mit Bildern zu tun. Es geht eher darum, wie ein Container (hier deine div.head-banner) seine Kindelemente anordnen soll. Hierzu gibt es `display: flex` was dafür sorgt, dass die Kindelemente in der selben Reihe (`flex-direction: row;` .. default-verhalten) oder in der selben Spalte untereinander (geht mit `flex-direction: column`) angeordnet werden sollen. 
Wenn du jetzt noch möchtest, dass n Elemente zB nach rechts gepusht werden, machst du dir einfach den Documentflow zu nutze. Der Documentflow sorgt hier in erster Linie dafür, dass die Elemente brav hintereiander angeordnet werden. Schiebst du das n-te Elemente nach rechts, schieben sich auch alle Elemente nach dem n-te Element nach rechts.
Durch `margin-left: auto` sagst du also deinem ersten Anchor, dass sich der Abstand nach links automatisch berechnen soll (so viel Abstand wie geht). Dabei wird auch der Anchor nach dem ersten Anchor mit geschoben


----------



## Kirby.exe (12. Feb 2020)

Welcher währe denn, in meinem Fall, das Kindelement welches ich verschiebe ? Ist es das Element, welches Näher zur Schrift("My Name") ist?


----------



## Robat (12. Feb 2020)

```
<!-- 
    head-banner hat display: flex. Damit sind alle Kindelemente in einer Reihe 
    Die Elemente werden von links nach rechts angeordnet.
-->
<div class="head-banner">   

    <!-- DAS HIER SIND DIE KINDELEMENTE -->
    <div id="ownerName">My Name</div>
    <!-- 
        bei diesem a wird das margin-left auf auto gesetzt. damit entsteht zwischen
        der div mit der id "ownerName" und dem anchor mit der class "instagram" eine Lücke,
        welche alle folgenden Elemente nach rechts schiebt (bis kein Platz mehr ist)
    -->
    <a href="#"><img class="instagram" src="../../img/logos/social_media_logos/instgram.png"></a>               
    <a href="#"><img class ="youtube" src="../../img/logos/social_media_logos/youtube.png"></a>  
    <!-- ENDE KINDELEMENTE -->               
</div>
```


----------



## Kirby.exe (13. Feb 2020)

Robat hat gesagt.:


> ```
> <!--
> head-banner hat display: flex. Damit sind alle Kindelemente in einer Reihe
> Die Elemente werden von links nach rechts angeordnet.
> ...


Ich bin irgendwie immernoch verwirrt und mache es scheinbar falsch 

Hier ist nochmal der geupdatete Source Code:



Spoiler: CSS





```
.head-banner{
    display: flex;
    overflow: hidden;
    margin-left: 10px;
    margin-bottom: 7px;
    margin-top: 7px;
    margin-right: 10px;
    padding: 0;
    background-color: white;
}
.head-banner div {
    font-family: "Brush Script MT", cursive;
    font-size: 30px;
    color: black;
    text-align: center;
    text-decoration: none;
    position: left;
}

.head-banner a img.facebook{
    margin-left: auto;
    width: 26px;
    height: 26px;
}

.head-banner a img{
    width: 26px;
    height: 26px;
}
```






Spoiler: HTML





```
<div class="head-banner">
            <div id="ownerName">My Name</div>
            <a href="#"><img class="facebook" src="../../img/logos/social_media_logos/facebook.png"></a>
            <a href="#"><img src="../../img/logos/social_media_logos/twitter.png"></a>
            <a href="#"><img src="../../img/logos/social_media_logos/discord.png"></a>
            <a href="#"><img class="instagram" src="../../img/logos/social_media_logos/instgram.png"></a>
            <a href="#"><img class ="youtube" src="../../img/logos/social_media_logos/youtube.png"></a>
</div>
```




Hier ist ein aktuelles Bild:


----------



## Robat (13. Feb 2020)

Du gibst dem img im Anchor-Tag gerade ein `margin-left: auto;`. Damit wird der Abstand des img im Anchor entsprechend gesetzt. Du willst aber den Abstand des Anchor-Tags in der div entsprechend setzen. Demnach musst du 

```
.head-banner a:first-of-type{
    margin-left: auto;
}
```
schreiben und nict

```
.head-banner a img.facebook{
    margin-left: auto;
}
```

Hab dir mal ein kleines Beispiel geschustert .. vielleicht ist es damit einfacher zu verstehen, warum deins nicht geht
https://jsfiddle.net/djhecg7L/1/


----------



## Kirby.exe (13. Feb 2020)

Robat hat gesagt.:


> Du gibst dem img im Anchor-Tag gerade ein `margin-left: auto;`. Damit wird der Abstand des img im Anchor entsprechend gesetzt. Du willst aber den Abstand des Anchor-Tags in der div entsprechend setzen. Demnach musst du
> 
> ```
> .head-banner a:first-of-type{
> ...


Achsoooo xD Das macht natürlich sinn xD Ich dachte first-of-type war nur metaphorisch xD


----------



## Kirby.exe (13. Feb 2020)

Ich hätte noch eine Frage, bezüglich js xD Bin ich irgendwie geistig verwirrt oder warum funktioniert der Code nicht xD

Ich möchte eigentlich nur dass, wenn ich runterscrolle, die Navbar Stick wird xD


```
window.onscroll = function() {
    myFunction()
};


var navbar = document.getElementById("navigation");


var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
```

Das sind alle Error-Meldungen :


----------



## Robat (13. Feb 2020)

Hast du das Script zufällig außerhalb des Browsers gestartet?


----------



## Kirby.exe (13. Feb 2020)

Robat hat gesagt.:


> Hast du das Script zufällig außerhalb des Browsers gestartet?


Also ich habe es noch nicht einmal eingebunden xD Ich hatte es erstmal in Brackets angepasst und da kamen die Fehlermeldungen xD Liegt wahrscheinlich daran dass er das Window Objekt nicht finden kann, da das Script nicht eingebunden ist XD 

Wenn ich für jede Situation wo ich verwirrt bin, einen Euro bekommen würde, dann könnte ich mein Studium abbrechen und direkt in Rente gehen xD


----------



## Robat (13. Feb 2020)

Kirby_Sike hat gesagt.:


> Wenn ich für jede Situation wo ich verwirrt bin, einen Euro bekommen würde, dann könnte ich mein Studium abbrechen und direkt in Rente gehen xD


Einfaches Geld ... wäre doch eine Option! Vielleicht findet sich ja ein Sponsor 

Wenn du das Script nicht innerhalb eines Browsers aufrufst existiert das window / document Objekt nicht. Was Brackets da macht kann ich dir nicht sagen - kenne die Internas nicht


----------



## Kirby.exe (13. Feb 2020)

Gibt es eine sinnvolle Methode die Webseite im Browser zu debuggen? Das Script tut nämlich nichts xD Die ID ist richtig und ich wüsste nicht woran es sonst liegt


----------



## Robat (13. Feb 2020)

Gibt so gut wie in jedem Browser einen Debugger in den Browsertools


----------



## Kirby.exe (13. Feb 2020)

Okee danke


----------



## Kirby.exe (13. Feb 2020)

Habe es gefixt....Ich hatte ganz vergessen, dass die Reihenfolge in HTML sehr wohl eine Rolle spielt xD Er kann schlecht auf etwas zugreifen, was zu dem Zeitpunkt nicht existiert xD

Wie kann ich die Sticky Navbar über alles stellen? Also das sie über dem Text Content liegt?


----------



## Robat (13. Feb 2020)

Mit `position: fixed` zB


----------



## Kirby.exe (13. Feb 2020)

Das ist sie bereits:

```
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
```


----------



## Kirby.exe (13. Feb 2020)

Fehler behoben 

Habe einfach `z-index = 1` hinzugefügt.


----------



## Kirby.exe (13. Feb 2020)

Gibt es eine Möglichkeit Dinge aus der HTML Datei zu Hidden? Ich versuche gerade meine Navbar responsive zu machen und ich möchte dass ab einer gewissen Bildschirmgröße ein Menü-Icon erscheint und die restliche Navbar ausgeblendet wird und anders herum.

Ich hatte es mit`visability: hidden` probiert, jedoch passiert dort gar nichts


Edit: Wer sucht, der findet...`Display: none` tut den Job


----------

