Warum wird Logo links rechts abgeschnitten in responsiver Vorschau zB. iPhone Bildschirm?

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Manuel Lemke

Mitglied
13 Februar 2021
40
0
6
@PlanetEarth
universalFavorService.com
Hi Leute. Weis jemand warum wird das Logo abgeschnitten links und rechts bei VorschauFenster für iPhone Samsung LG ... ? Das ganze Logo nimmt mehr Zeit in Anspruch, als ich für meine gesamte WebSeite eingeplant hatte.
Auf Desktop siehts vernünftig aus dh. vollständige Breite und funktioniert auch.
Alles das weniger als 669Pixel Bidlschirmbreite ist wird im responsive Modus abgeschnitten, Logo selber ist 1134px groß, also wie hängt das zusammen?


Das ist der Html/ CSS

<a class="Start" href="index.html" target="_self"
style="position:fixed; z-index: 4;
float: left;
top:12px;
left:12px;">


<style>
.Start {background:url(Logo.gif);background-size: cover;
height: 7%; min-width:33%;min-width:324px; background-position: center center; display:block; margin: 0px auto auto;}

.Start:hover {background:url(Logo.gif);background-size: cover;transform: scale(1.23);-webkit-transform: scale(1.23);-moz-transform: scale(1.23);-0-transform: scale(1.23);display:block; margin: 0px auto auto;}
</style>
</a>

Man kann an Stelle von background-position: center center; auch Attribut löschen, dann wirds rechts abgeschnitten.

So siehts aufm Schirm aus (abgeschnitten)
1620915301743.png
 
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
Alles das weniger als 669Pixel Bidlschirmbreite ist wird im responsive Modus abgeschnitten, Logo selber ist 1134px groß,
Hört sich schon merkwürdig an.
Deine position:fixed und Float sollte da auch nicht sein.
Das iFrame kann ich so auch nicht zuordnen.

Könntest du ein Link zur Seite posten, oder einfach bei codepen.io dein Problem nachstellen (ganze Seite Copy-and-paste bei codepen reinkopieren)
 

Manuel Lemke

Mitglied
13 Februar 2021
40
0
6
@PlanetEarth
universalFavorService.com
Ohne Position fixed verschwindet das Logo.
Am besten von vorne.

Logo besteht aus einem Hyperlink <a href= ...>und nutzt background:url(Logo.gif);
HintergrundGrafiken, die sich beim überfahren vergrößern soll.
Das Logo (irgend eines) soll maximal 7% Höhe vom Bildschirm einnehmen +soll von seiner eigenen BildWeite 100% einnehmen, und maximal 50% von Bildschirm.

Muss reines Html und Css, weil bei Javasript meckert der InternetExplorer rum "blockierte Elemente...", das wär schlechtes Zeichen gleich am Start einer WebSeite, als 1rstEindruck.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.402
461
83
68
Könntest du ein Link zur Seite posten, oder einfach bei codepen.io dein Problem nachstellen (ganze Seite Copy-and-paste bei codepen reinkopieren)
Ohne das geht überhaupt nichts. Oder wenigstens das relevante HTML und CSS posten, keinen Screenshot.
 

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
Muss reines Html und Css, weil bei Javasript meckert der InternetExplorer rum "blockierte Elemente...", das wär schlechtes Zeichen gleich am Start einer WebSeite, als 1rstEindruck.
Das sollte eigentlich kein Problem sein. Ich schätze mal das 90 Prozent der Internetseiten irgendwie Javascript benutzen.
Das kann und muss der IE eigentlich ohne mucken akzeptieren.
Vielleicht hast du da irgendein Viren Programm / Add-on / Plugin was den Fehler verursacht, bzw. der den Fehler schreibt.
 

Manuel Lemke

Mitglied
13 Februar 2021
40
0
6
@PlanetEarth
universalFavorService.com
Hi. Beides nicht. Das ist nur wenig Javascript, aus WebLehrSeiten. Tritt bei allen Javascript seiten auf.
Ist kein Addon oder Virus, weil Windows neu installiert und nichts weiter dazu nur reiner InternetExplorer.
Vielleicht kann man das auch irgendwo abstellen, schon gesucht, fand nichts.
Zum Beispiel soetwas einfaches hier für automatische SitenWeiterleitung für PräsentationsFolien

<SCRIPT language="JavaScript">
<!--
setTimeout("window.location.href='Auto001.html'",3000);
// -->
</SCRIPT>

Kann man auch so_
<head>
<meta http-equiv="refresh" content="10; URL=Auto001.html">
</head>

aber dann mecken alle anderen Browser "Seite kann nicht angezeigt werden" nach mehr als 2 Folien in einer Reihenfolge weitergeleitet. Der InternetExplorer stellt Problem los alles dar.
 

Manuel Lemke

Mitglied
13 Februar 2021
40
0
6
@PlanetEarth
universalFavorService.com
Ohne das geht überhaupt nichts. Oder wenigstens das relevante HTML und CSS posten, keinen Screenshot.
Ja hatte ich schon, ist alles zusammen drin komplettes BauElement für sich.
Das ist der Link imHtmlDokument mit dem Css + LogoDatei anbei _

<a class="Start" href="index.html" target="_self"
style="position:fixed; z-index: 4;
float: left;
top:12px;
left:12px;">

<style>
.Start {background:url(Logo.gif);background-size: cover;
height: 7%; min-width:33%;min-width:324px; background-position: center center; display:block; margin: 0px auto auto;}

.Start:hover {background:url(Logo.gif);background-size: cover;
height: 10%; min-width:51%;min-width:463px; background-position: center center; display:block; margin: 0px auto auto;}
</style>

</a>
 

Anhänge

  • Logo.gif
    9,6 KB · Aufrufe: 4
Zuletzt bearbeitet:

basti1012

Senior HTML'ler
26 November 2017
1.593
173
63
Minden
basti1012.de
Kannst du jetzt mal in 2 Sätzen erklären, was du willst?
Klick auf das Bild und dann wird die Seite gewechselt?
Oder
Seite wird in 10 Sekunden automatisch gewechselt?
Warum ist das ein Background Image und nicht ein einfaches <img> ?
Warum hat .Start und .Start:hover das gleiche Bild? , Ein transform:scale(1.2) würde auch reichen.
Code:
.Start:hover {
   transform:scale(1.2);
   transition:all 500ms;
}

Das
Code:
min-width:33%;
min-width:324px;
Hat glaube ich auch kein Sinn, man kann nur eine Angabe machen.
So würde es mehr Sinn machen.
Code:
width:33%;
min-width:324px;
Deine Inline Styleangaben im <a> kannst du auch löschen.
Ändere mal das height:7%; in 30px;.
Dann mach dir mal Gedanken warum es dann geht ?
Tip:
ein <img> würde mit height:7%; auch laufen
 
Zuletzt bearbeitet:

tk1234

Mitglied
2 September 2020
96
23
8
Zum eigentlichen Problem kann ich jetzt nichts sagen, dafür mist mir das alles zu wirr und es fehlt eine Seite unter der man sich das anschauen kann (ohne die selbst bauen zu müssen!). Nur zwei Dinge:
<SCRIPT language="JavaScript">
<!--
setTimeout("window.location.href='Auto001.html'",3000);
// -->
</SCRIPT>
Wo hast du das denn ausgegraben? Das hat ja schon antiquarischen Wert: das language-Attribut ist schon seit Ewigkeiten durch das type-Attribut ersetzt worden und selbst das type-Attribut ist schon lange überflüssig. Auch die Kommentare haben da schon lange nichts mehr zu suchen, von der Tatsache dass html-Elemente üblicherweise klein geschrieben werden mal ganz zu schweigen.

So würde es mehr Sinn machen.
Code:
width:33%;
min-width:324px;
Deine Inline Styleangaben im <a> kannst du auch löschen.
Ändere mal das height:7%; in 30px;.
Nein. Pixel sind sehr wahrscheinlich die falsche Einheit aber das Bild ist ohnehin viel zu groß als dass das auf jeglichem Bildschirm funktionieren würde: wenn man das soweit verkleinert dass es ganz auf das Display eines Smartphones passt, kann man es gleich weglassen, erkennen wird man da ohnehin nichts mehr.

Aber wie schon gesagt, ohne sich das richtig anschauen zu können wird der Thread ohnehin zu nichts führen - am Besten sollte der CSS-Quelltext auch gleich etwas bereinigt sein, Eigenschaften die für foo gelten müssen für foo:hover nicht wiederholt werden.
 
Werbung:

Neueste Beiträge