CSS-Problem

[stobi_de]

www.afripix.de/fpe

Ich stehe gerade ein wenig auf dem Schlauch mir der Positionierung des Logos.
Die oberen beiden Blöcke (einmal mit Backstretch), das schwarze beinhaltet eigentlich ein Video stammen aus 2 Projekten dieser Firma.
Wir hatten das vor langer Zeit schonmal durchgekaut, noch im NOF-Forum.

Nun ist es so, dass der Kunde wünscht, dass die Logoposition so ist wie im schwarzen Block, was nur aus sehr breiten Monitoren sichtbar ist.

Irgendwie sehe ich das nicht!

[Tommy Herrmann]

Moin,

was Du schreibst, kann ich im Moment noch nicht so richtig nachvollziehen.

Ich sehe da den Schriftzug "Fall-Protection-Engineering" als Bild und im oberen Block noch "Kompetenz für Absturzsicherheit".

Im unteren, schwarzen Block, der gleiche Schriftzug als Bild und ein Logo "16 Jahre Erfolg".

Durch den oberen Schriftzug entsteht am mobilen Geräte gerade ein riesen Überlauf, der die gesamte Seite zerschießt.

Wie Du das mit den weiterlaufenden Linien, rechts nach dem Bild gemacht hast, habe ich noch nicht erkennen können, denn diese scheinen für den Überlauf verantwortlich zu sein:

Im schwarzen Block funktioniert das.

Am Handy sind auch beide sichtbar und nicht, wie Du schreibst, dass das im schwarzen Block nur am großen Bildschirm sichtbar wäre. Das ist überall sichtbar

Ich sehe auch einige CSS-Fehler, wie z.B. anstelle von "display: flex;" steht da nur "flex;"

Was willst Du jetzt wo erreichen?

[stobi_de]

Moin Tommy,
ich glaube, bei den ersten Versuchen zu diesem Logo (nur das gelb-blaue Fall Protection Engeneering) war sogar noch die Doris Rehhausen dabei.
Der ganze andere Kram, Unterschrift und das "10 Jahre-Symbol" tun nichts zu Sache und sind aus einer anderen Website dieser Firma.
Ich glaube, ich habe es inzwischen einigermaßen (Baustellen-Adresse hat sich geändert)
https://www.afripix.de/hold/

[Tommy Herrmann]

jo - jetzt sieht es wieder richtig aus

[stobi_de]

Mit Chatgpt, also ich muss schon sagen....da gehts noch viel besser und sieht simpler aus.
Ist noch nicht online, sieht aber in Mobio selbst schonmal gut aus

Code: Alles auswählen

.logo-container {
  position: absolute;
  top: 30%;
  right: 10%;
  width: 250px;
}
.logo-container img {
  display: block;
  width: 100%;
}
.logo-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 200vw;
  height: 100%;
  background-image: url("file:///D:/InternetProjekte/fallprotection/assets/images/fall-logo-kurz-bg.png");
  background-repeat: repeat-x;
  background-size: contain;
}

Code: Alles auswählen

<div class="logo-container">
    <img src="file:///D:/InternetProjekte/fallprotection-hold/assets/images/fall-logo-kurz-3.png" alt="Logo">
</div>