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

MenuLinks sollen prozentual zur BildschirmGröße passend dargestellt werden.

M

Manuel Lemke

Mitglied
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.
 
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.
 
suche solch ähnliches Css Argument
width:=height;
wurde leider noch nicht entwickelt und als Parameter bereitgestellt.
---> Wer weis etwas entsprechendes?

ansonsten funktioniert inzwischen
height:10%;
tadellos.
 
Sempervivum schrieb:
In deinem Fall dürfte sich das Problem mit Viewport-Units lösen lassen:
Code: 
height: 10vh;
width: 10vh;
Siehe hier:

CSS/Wertetypen/Zahlen, Maße und Maßeinheiten/Viewportabmessungen – SELFHTML-Wiki

wiki.selfhtml.org wiki.selfhtml.org
Zum Vergrößern anklicken....
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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben