MenuLinks sollen prozentual zur BildschirmGröße passend dargestellt 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. Baue (unveröffentlichte) WebSeite grade so um, dass die auch für Browser auf Telefon gut aussieht.
MenuPunkte zB. <a href="Kontakt003.html" target="Screen"><img width="55px" height="55px" src="Kontakt.png"></a><br>

mit jeweils HintergrundGrafiken sollen
anstatt jeweils 64px BildPunkte
neu besser 10% der Höhe angezeigt werden!

Es sind 7 MenuPunkte = 70% zusammen,
oben ist Platz für Logo 10%,
unterhalb sind so Karten zum anklicken, für DienstleistungsBeispiele, die nehmen 100Pixel weg, bis 140Pixel, das sind sind bis zu > maximal 20% .

Habe dafür noch garkeinen LösungsAnsatz, denn die Herausforderung ist, die Bilder sollen quadratisch sein, aber bei zB. schalten zwischen Fenster und maximiertem VollBildFenster könnten Bilder verzerrt sein, wenn man auch Weite in % angibt.

Wie kann man das richtig machen, mit Css?
Vielen Dank.

Ps. hab schon rumprobiert, und die Bilder sind mal komplett verschwunden, dann wieder riesige Fläche verdeckt... Also Tip wäre schon sehr hilfreich. Nochmal Danke im voraus.
 
Werbung:

Manuel Lemke

Neues Mitglied
13 Februar 2021
11
0
1
@PlanetEarth
universalFavorService.com
Hat nicht funktioniert mit dem padding-bottom: 100%, also 1:zu 1.

Die Links sind
<a>...
und bilder als Hintergrund sind
<img>
das abgeschlossen mit </a>

AspectRatio scheint nur für <div> Elemente anwendbar zu sein, wie in deinem Beispiel
1618593912480.png
...darin das entscheidende funktionale CssElement ist padding-bottom: 42.85714286%;
=wäre also bei meinen Grafiken entsprechend 1:1 mit 100%; .

Wie kann ich meine Grafiken (verschiedener Formate) so formatieren, dass die Höhe immer 10% ist von kompletter SeitenHöhe, und Breite entsprechend 1:1 ?

Nochmal Danke.
 
Werbung:

Manuel Lemke

Neues Mitglied
13 Februar 2021
11
0
1
@PlanetEarth
universalFavorService.com
In deinem Fall dürfte sich das Problem mit Viewport-Units lösen lassen:
Code:
height: 10vh;
width: 10vh;
Siehe hier:
Das ist gut, klappt.

Jetzt noch Kleinigkeit_ die Grenze von dem umgebenden <div> schneidet HyperlinkSchaltFlächen ab,
1618859253118.png
beim Hovern dh. vergrößern,
links und von erster oben-.

Hab da schon zIndexWert höher eingestellt, also vor den Rahmen.
Wie kann man das abstellen?
Danke.


<div id="Hyperlinks" style="
z-index:10;
position:fixed;
float: left;
top:10%;
bottom:200px;
left:12px;
width:123px;
min-height:300px; height:70%;
overflow:hidden;
border:none; border: 0px; border-color: transparent;
background: black;
">


<style>

#HyperlinksVertical {border-radius: 5px;background-color: #ffffcc;
width:=height; height: 8vh;
width: 8vh;
margin: 0px; opacity: 0.8;
-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1)));}

#HyperlinksVertical:hover {z-index:100; position:absolute;opacity: 1; border: 1px solid #eee;
-ms-transform: scale(1.3); /* IE */ -webkit-transform: scle(1.3); /* Safari */ transform: scale(1.3);
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8);}
</style>

<a href="Kontakt003.html" target="Screen"><img id="HyperlinksVertical" src="Kontakt.png"></a><br>
...
<a href="Impressum001.html" target="Screen"><img id="HyperlinksVertical" src="Laws.jpg"></a><br>

</div>
 
Werbung:

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.349
456
83
68
Da geht ja einiges durcheinander:
  • style-Tags in den head-Bereich
  • all diese Präfixe sind heute überflüssig
  • wenn Du mehrere Elemente ansprechen willst, musst Du ihnen jeweils die selbe Klasse zuteilen, die selbe ID geht nicht
  • dies width:=height; ist kein zulässigen CSS
  • Codetags beim Posten von Code verwenden, das Menüsymbol, drei Punkte untereinander oben rechts und dann das Symbol </>
Aber dein eigentliches Problem:
die Grenze von dem umgebenden <div> schneidet HyperlinkSchaltFlächen ab, beim Hovern
Das liegt nicht am z-index sondern daran, dass Du für das umschließende div#Hyperlinks overflow: hidden;eingestellt hast, d. h. alles was über die Grenzen hinaus ragt, ist nicht sichtbar.

Ich habe das Ganze in dem Sinne mal aufgeräumt, sieht dann so aus:
Code:
<!DOCTYPE html>
<html lang="de">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Draggable Table</title>
    <style>
        .HyperlinksVertical {
            border-radius: 5px;
            background-color: #ffffcc;
            height: 8vh;
            width: 8vh;
            margin: 0px;
            opacity: 0.8;
            transition: all 0.5s ease;
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0, 0, 0, 0.1)));
        }

        .HyperlinksVertical:hover {
            z-index: 100;
            position: absolute;
            opacity: 1;
            border: 1px solid #eee;
            transform: scale(1.3);
            box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.8);
        }

        #Hyperlinks {
            z-index: 10;
            position: fixed;
            float: left;
            top: 10%;
            bottom: 200px;
            left: 12px;
            width: 123px;
            min-height: 300px;
            height: 70%;
            /* overflow: hidden; */
            border: none;
            border: 0px;
            border-color: transparent;
            background: black;
        }
    </style>
</head>

<body>
    <div id="Hyperlinks">
        <a href="Kontakt003.html" target="Screen">
            <img class="HyperlinksVertical" src="Kontakt.png">
        </a>
        <a href="Impressum001.html" target="Screen">
            <img class="HyperlinksVertical" src="Laws.png">
        </a>
    </div>
</body>

</html>
 
  • Like
Reaktionen: Manuel Lemke
Werbung: