Logo soll prozentual zur BildschirmGröße passend angezeigt werden!

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

Manuel Lemke

Neues Mitglied
13 Februar 2021
11
0
1
@PlanetEarth
universalFavorService.com
Hi. Mein WebSeitenLogo soll prozentual zur BildschirmGröße passend angezeigt werden!
Baue grade Seite (unveröffentlicht) um, dass die auch auf mobilen Bildschirmen gut aussehen soll.
Jetzt spinnt das Logo total, obwohl ich oben mit top:0px; das bündig angeordnet habe, wirds
im Desktop volle Breite Modus
unerklärlicher Weise nach oben aus dem SichtBereich hinaus verschoben.

Soll sein, beim hovern mit Cursor 7% hoch,
und normal 5% Größe,
oben links bündig.

Auch zu beachten, mein LösungsAnsatz soll auch den InternetExplorer kompatibel sein wegen JavaScript,
in sofern, dass dieser nicht beim Laden der HauptSeite schon rummeckert, von wegen
"sollen blockierte Elemente angezeigt werden?".
Das ist so wie wenn man beim DönerMann Döner bestellt, der fragt komplett, du sagst ja, dann fragt der trotzdem wegen jeder einzelnen Zutat nochmal nach, und tut als ob der nichts versteht.
InternetExplorer muss unterstützt sein, ich nutz fast nur den. Der iExplorer unterstützt JavaScript nur mit der blöden extra Frage "mit allem".

Also ist bisherige Lösung welche konkrete PixelWerte nutzt und reibungslos funktioniert hatte, mit
reinem Html, und Css,
sieht so aus_

<div style="
position:fixed;
left:0px;
top:0px;
height:64px;
width:500px;
overflow:hidden;
background-color: transparent;
z-index:100;
">
<a class="Start" href="index.html" target="_self" style="display: block; position:absolute; z-index: 4;">
<style>
.Start {background:url(Logo.gif);background-size: cover;min-width:300px; height: 51px; top:-12px;left:12px}
.Start:hover {background:url(Logo.gif);background-size: cover;min-width:370px; min-height: 64px; top:-18px;left:4px}
</style>
</a></div>

.

Die neue Lösung, welche unerklärlicher weise Logo immer nach oben aus Sichtbereich hinaus verschiebt,
sieht so aus_

<a class="Start" style="width: 50%; position: absolute; z-index: 4; min-height: 7%;" href="index.html" target="_self">
<style>
.Start {background:url(Logo.gif);background-size: cover;height: 5%; top:0px; left:12px}
.Start:hover {background:url(Logo.gif);background-size: cover;height: 12%;min-width:77%; top:0px; left:4px}
</style>
</a>

Könnt mir bitte jemand sagen an welchem Parameter wo man noch etwas abändern kann, was ergänzen oder streichen, dass das Logo sichtbar ist und korrekt zoomt?
Danke.
 
Zuletzt bearbeitet:
Werbung:
29 Januar 2020
30
1
8
17
hey ho kannst du auch die html senden ?

so hätte ichs gemacht.
HTML:
<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/header.css">
    <title></title>
  </head>

  <body>
    <header>
      <div class="logo">
        <img src="img/logo.jpg" alt="logo">
      </div>

    </header>

  </body>

</html>


CSS:
/* Hintergrund + Animation */
html{width: 100%;height: 100%;position: fixed;margin: 0px;background: linear-gradient(160deg, #4682b4, #333d40);background-size: 400% 400%;animation: Backanimation 18s ease infinite;box-shadow: 0 1px 3px rgba(0, 0, 0, 0,8);z-index: 2;background-color: #fff;}
@keyFrames Backanimation {0%{background-position: 0% 50%;}50%{background-position: 100% 50%;}100%{;background-position: 0% 50%;}}


header{background-color: black; height:15%; width: 100%;position: absolute;position: fixed;}
body{margin: 0px;padding: 0px;background: linear-gradient(160deg, #4682b4, #333d40);background-size: 400% 400%;animation: Backanimation 10s ease infinite;}


/* Logo + ranzoomen */
.logo img{float:right;position:absolute;width: 100%;height:100%;}
.logo{float: left; margin:1%;overflow: hidden; height:80%; width:10%;position: absolute;}
.logo:hover{transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-0-transform: scale(1.1);box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);color: black;}


Natürlich kann man @keyframes auch dazu benutzen wenn man divs etc. "animieren will".
Hoffentlich hilft dir der code irgendwie weiter auch wenn er eine fast Katastrophe ist.
Liebe Grüße EntrigesFichtenholz.
ps. was dir an Parametern helfen könnte wäre so etwas wie
position: absolute;

Meines Wissens gibt es ne Lösung für den Ie weil ich das auch lange zeit hatte.. aber ich habs vergessen. war iwas mit metawerten.
 
Zuletzt bearbeitet:
Werbung: