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

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

M

Manuel Lemke

Mitglied
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:
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:
Danke. Hab s eingebaut (siehe darunter folgendermaßen) und Größe noch angepasst auf 123% Zoom.


<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);background-position: center center; display:block; margin: 0px auto auto;}
</style>


Jetzt isses schon wieder so, das Logo wird links und rechts abgeschnitten, auf iPhoneBildschirm
sieht so aus

1620915026001.png
 
Hab also das TestLogo hochgeladen (weiter oben, blättern bitte)
und den neuen überarbeiteten Html Code fürs Logo
(mit dem neuen Code wird wiederum unten abgeschnitten)

<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>
 
bzw. das ist der vorherige alte Code (im responsiver Ansicht links und rechts abgeschnitten)

<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>
 
Du kannst die Seite bei einem Freehoster oder auf deinem Webspace in einen Unterordner kopieren, wo ist das Problem?
Deine Screenshot helfen kaum weiter.

Es ist auch nicht nötig, dass du mehrere Beiträge hintereinander schreibst. Man kann nämlich seine Beiträge editieren. Oder gleich alles zusammenfassen.
 
m.scatello schrieb:
Du kannst die Seite bei einem Freehoster oder auf deinem Webspace in einen Unterordner kopieren, wo ist das Problem?
Deine Screenshot helfen kaum weiter.

Es ist auch nicht nötig, dass du mehrere Beiträge hintereinander schreibst. Man kann nämlich seine Beiträge editieren. Oder gleich alles zusammenfassen.
Zum Vergrößern anklicken....
Ja ich weis. Wär aber das gleiche, evtl. schlechtes FirmenImage im voraus bevor ich überhaupt ersten Auftrag hab, nur weil ichs fertig kriegen will, und jemand rummeckert,... und so weiter.

Also hab alles soweit zusammen kompakt, dass man das ausprobieren kann mit jedem beliebigen TestFoto, siehe Beitrag https://www.html.de/threads/logo-so...se-passend-angezeigt-werden.60434/post-406531 weiter oben, und in jeder beliebigen WebSeite als HtmlRahmen.
Sollte also auch bei dir funktionieren, wenn du es so lässt (spart dir Zeit) und nur ein Parameter darin editierst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben