Beiträge von Sailor

Als Erstes solltest du diese Fehlversuche mit 'float', 'align-item' und 'justify-content' löschen und dann stattdessen für den Button...

#createclan {
  margin: 0 auto;
}

einfügen.

Ändere mal die 'padding' Werte in deinem CSS für 'nav ul li a'

Du kannst den roten Kasten beliebig positionieren, in dem Code, den du hast, musst du dazu nur den Wert bei 'top' anpassen.
Sollte sich der rote Kasten in der neuen Position unter die orange Linie schieben, dann kannst du ihn mit 'z-index' wieder in den Vordergrund holen.

Und was ist jetzt die Frage?

Kann ich bestätigen, auf meinem Handy läuft die Seite auch über... die Ursache dafür könnte deine Formatierung des body mit 'height: 100%;' sein.
Versuche doch bitte mal, ob sich bei Verwendung von height: 100vh (statt der 100%) etwas an dem Überlauf ändert.

Der rote Balken ist nicht so das große Problem - den kann zB mit ::after realisieren:

#sonderbutton::after {
    content: " ";
    width: 120px;
    height: 10px;
    background-color: #f00;
    position: absolute;
    top: 64px;
}

Problematisch wird es, wenn die Displaybreite kleiner wird, denn bei etwa 710px bricht die Menüzeile (zum ersten mal) um und dann passt der 'top: 64px' nicht mehr.
Man müsste also entweder bei kleineren Bildschirmen den roten Balken ausblenden...

@media screen and (max-width: 709px) {
  #sonderbutton::after {
     display: none;
  }  
}

oder den Abstand zum oberen Rand vergrößern...

@media screen and (max-width: 709px) {
  #sonderbutton::after {
     top: 124px;
  }  
}

Für noch kleinere Bildschirme (Handy & Co) müsste es dann analog gemacht werden, damit es passt.

Es ist nicht verboten... aber es wird nicht gerne gesehen! Und das mit gutem Grund. Bedenke doch bitte mal, dass hier - und in anderen Foren - die Hilfswilligen das freiwillig und in ihrer Freizeit machen und wenn die dann feststellen, dass an unterschiedlichen Stellen das gleiche Thema mit ggf. unterschiedlichen Sachständen behandelt wird, dann könnten die Hilfestellung schnell eingestellt werden... oder erwartest du, das jeder der dir helfen will erst mal rum sucht, wie den gerade der aktuelle Stand ist?

Doppelpost??
https://www.html-seminar.de/forum/thread/7…48917#post48917
Wie viele Leute willst du noch mit deinem Problem beschäftigen? Reicht nicht einmal?

So wie die Frage formuliert ist, sieht es aus wie 'Hausaufgaben' ;)!

document.location.href ist keine Funktion... die richtige Schreibweise wäre...

<INPUT  type="button" onclick="document.location.href='https://www.example.com'" name="btnName" value="   Naechste Seite  ">

Meinst du ein Bild irgendwo auf einer beliebigen Webseite? Oder willst du Bilder auf deiner eigenen Seite in einem neuen Browserfenster mit weißem Hintergrund öffnen?

Was verstehst du unter ...'mit weißem Hintergrund anzuzeigen'?
Bilder werden in Webseiten mittels <img src="adresse_des_bildes" alt="irgendwas"> eingebunden - und wenn an dieser Stelle der Hintergrund weiß ist, dann hast du das auf einem weißen Hintergrund. Oder meinst du, du willst das Bild selbst mit einem weißen Hintergrund... also Katze auf weiß? Dann wirst du das Bild mit einem Bildbearbeitungsprogramm entsprechend bearbeiten müssen.

Jep... sieht gut aus!

Ich habe mir das nochmal angeschaut... dein Problem mit den runden Icons kann ich nicht nachvollziehen. Wenn ich in der Simulation auf deiner Seite das boder-radius: 50%; wieder aktiviere, sieht alles schick aus... nichts von dem zu erkennen, was du da beschreibst! Anscheinend machst du da irgend etwas 'verkehrt' - kann ich aber so nicht erkennen, weiß ja nicht, was du da genau (sonst noch) machst!
Das mit der Icon-Größe... da müsste ich nochmal genauer schauen. Das hängt natürlich alles zusammen, wenn man einen Parameter ändert, dann beeinflusst das möglicherweise alle anderen. zB.. du machst das Icon größer, es braucht dann mehr Platz und dadurch wird die Box größer. Wenn du dich auf eine Größe festgelegt hast, dann muss man anschließend alles andere nachjustieren, damit es optisch wieder passt!
Das Fax Icon! ... ich glaube, deine Einfügecodes sind falsch!
Geh mal auf https://fontawesome.com/icons?d=gallery&c=communication und check das mal für alle deine Icons!
du fügst ein.... <i class="fa fa-fax fa-4x"></i> , die Awesome Seite sagt aber <i class="fas fa-fax fa-4x"></i>.
Habe das jetzt nur beim Fax kontrolliert, ich gehe aber davon aus, dass es bei den anderen Icons auch falsch ist!

- - - Aktualisiert - - -

Mir ist noch was aufgefallen... der Bereich direkt unter den Telekommunikations-Icons ist (komisch) verschoben.
Liegt daran, dass die Icons mit 'float' formatiert sind und dieses float noch auf den dahinter liegenden Bereich wirkt.
Füge mal

.features {
clear: both;
}

in dein CSS ein, damit das float aufgehoben wird.

Der Status-Code 304... so interpretiere ich die von dir kopierte Meldung.. sagt, dass die Datei bereits beim letzten aktualisieren geladen wurde und deswegen jetzt nicht nochmal geladen wird.
Leere mal deinen Browsercache und versuche es erneut... es müsste der Status 200 angezeigt werden, dann kannst du sicher sein, dass du die 'neue' Version hast.
Das mit den lustig aussehenden Zeichen verstehe ich nicht - an den Zeichen dürfte das nichts ändern. Es sollte lediglich aus eckig rund machen. Aber ok, wenn dir eckig besser gefällt, dann lass es so ;)!

Nimm mal 'border-radius: 50% !important;' statt nur 'border-radius: 50%;'

Versuche bitte den 'box i' Elementen eine einheitliche Größe zu geben...

.box i {
  width: 2em;
  height: 2em;
  line-height: 2em;
  padding: 0px;
}

Die Zahlenwerte kannst du natürlich nach deinen Bedürfnissen anpassen.

Ein Link zur Seite wäre hilfreich.

Da ist wohl folgender Eintrag in der style.css (Zeile 866 ff) das, was du suchst!

.s-promo-block-v4::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(34, 35, 36, 0.3) 0%, rgba(19, 177, 205, 0.6) 100%);
    background-repeat: repeat-x;
    content: " ";
}