Bilder in Banner alignen

Kirby.exe

Kirby.exe

Top Contributor
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:
13021

Hier ist der Code:

HTML: 
<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>
CSS: 
.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

Robat

Top Contributor
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`
CSS: 
.head-banner a:first-of-type {
  margin-left: auto;
}

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

Kirby.exe

Top Contributor
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`
CSS: 
.head-banner a:first-of-type {
  margin-left: auto;
}

BTW: `.head-banner ownerName` hier fehlt bei owerName der Punkt davor
Zum Vergrößern anklicken....
Uups Danke ;)
 
Kirby.exe

Kirby.exe

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

Robat

Top Contributor
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

Kirby.exe

Top Contributor
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

Robat

Top Contributor
HTML: 
<!-- 
    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

Kirby.exe

Top Contributor
Robat hat gesagt.:
HTML: 
<!--
    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>
Zum Vergrößern anklicken....
Ich bin irgendwie immernoch verwirrt und mache es scheinbar falsch :(

Hier ist nochmal der geupdatete Source Code:

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

13027
 
Robat

Robat

Top Contributor
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
CSS: 
.head-banner a:first-of-type{
    margin-left: auto;
}
schreiben und nict
CSS: 
.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

Kirby.exe

Top Contributor
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
CSS: 
.head-banner a:first-of-type{
    margin-left: auto;
}
schreiben und nict
CSS: 
.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/
Zum Vergrößern anklicken....
Achsoooo xD Das macht natürlich sinn xD Ich dachte first-of-type war nur metaphorisch xD
 
Kirby.exe

Kirby.exe

Top Contributor
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

Javascript: 
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 :
13028
 
Kirby.exe

Kirby.exe

Top Contributor
Robat hat gesagt.:
Hast du das Script zufällig außerhalb des Browsers gestartet?
Zum Vergrößern anklicken....
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

Robat

Top Contributor
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
Zum Vergrößern anklicken....
Einfaches Geld ... wäre doch eine Option! Vielleicht findet sich ja ein Sponsor :p

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

Kirby.exe

Top Contributor
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
 
Kirby.exe

Kirby.exe

Top Contributor
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?
 
Kirby.exe

Kirby.exe

Top Contributor
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 mitvisability: hidden probiert, jedoch passiert dort gar nichts


Edit: Wer sucht, der findet...Display: none tut den Job :)
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
melaniemueller Bilder in Tabellen HTML / CSS 3
krgewb Bilder übereinander HTML / CSS 1
B Bilder aus Server in HTML anzeigen HTML / CSS 5
G Bilder speichern HTML / CSS 4
B Bilder Reihenfolge beim auslesen eines Verzeichnisses in falscher Reihenfolge HTML / CSS 4
H Bilder werden nicht alle geladen HTML / CSS 0
K Flexslider läd sehr langsam die bilder HTML / CSS 1

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben