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

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

Manuel Lemke

Mitglied
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:
Werbung:
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)
 
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.
 
Werbung:
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.
 
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.
 
Werbung:
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: 5
Zuletzt bearbeitet:
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:
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
Logo soll laden StartSeite der Seite, also index.html!

Wechselnder Inhalt ignorieren, hat nichts zu tun mit Funktion des Logos, das war für die einzelnen Seiten vorgesehen, es startet je eine automatisch abspielende Präsentation, man kann das beschleunigen durch anklicken = nächste, nächste, nächste, weiter ... .

Gleiches Bild des Hover ist weil ichs ursprünglich vorgesehen hatte, jetzt nicht mehr.

Hab also dein Rat soweit umgesetzt in Tat (nachfolgende Antwort) aber schneidet immernoch im mobilen Browsern die Ränder ab.
 
Werbung:
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!).

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.
Danke für deine Antwort. Musst du nicht "selber basteln" sondern ist alles da.

Seite ist unfertigST. Unfertiger als unfertig. Wenn ich da ein Link zu teile kann ich mir gleich weiteres gemecker anhören, zu NebenThemen (die ich auch früher oder später bearbeiten werde) soll aber erstmal grundsätzlich einsatz bereit sein. Ist noch so viel zu machen dran, kann ich hier nicht der Öffentlichkeit präsentieren.
Mir fehlt zB. auch noch eine FirmenAdresse in Frankfurt M sicher stört sowas den ein oder anderen.
Aber wird ne geile Seite (wenns fertig ist) mit GeschäftsProfil, UnterSeiten automatisch Präsentation abspielen,...
...BaustellenRadio, und StartDesktop, und mit NachrichtenTicker.
 
Zuletzt bearbeitet:
Jedenfalls das Logo sollte als AushängeSchild als mindestes tadellos aussehen!

Logo ist 324 x 47,66 auf dem Desktop, ohne Hovern, und vergrößert um etwa *1,3 fach.
Logo soll 7% Höhe und bis zu 33% Breite, jeweils automatisch anpassend für jeweiliges BildschirmFormat 16:9 Desktop oder 9:16 Telefon bzw. 9:21... .
Kann auch das selbe bleiben beim hovern.

Das Logo und alle Designs werden dann für gleich mehrere Projekte verwendet, man speichert Logo jeweils als Logo.png oder Logo.gif. also muss Design sich automatisch anpassen, auch wenn Bilder verschieden groß sind!
 
Werbung:
Aktueller BearbeitungsStand =

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


<style>
.Start {background:url(https://www.html.de/attachments/logo-gif.5631/);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(https://www.html.de/attachments/logo-gif.5631);background-size: cover;
height: 10%; min-width:51%;min-width:463px; background-position: center center; display:block; margin: 0px auto auto;}
</style>


</a>
 
1. 2 Mal min-width geht nicht, du kannst das nur einmal verwenden
2. Ohne Link und Ansehen kann Dir niemand helfen
3. Grundsätzlichte Stichworte sind Media Queries und Responsive Design.
 
Zurück
Oben