djevil-ad
Goto Top

"Riesen Image bug"

Hallo und Guten Abend,

Ich habe leider einen blöden Fehler auf meiner Webseite, und zwar wird beim Laden das erste Image immer riesengross dagestellt,

Es ist prozentual und soll mit der Seite skalieren,

<div id="leftheadcell" class="left head cell">  
		
		    <img src="./images/logo147.png" width="62%" />  

</div>

Das Logo ist 147x147, und die 62% sind relativ zum Elternelement, also ist da wohl irgendwo der fehler zu suchen, aber im moment blicke ich es leider nicht?
Ich weiss nicht ob ich jetzt den Link hier posten darf, ansonsten kann ich hier noch den Css posten:

.head
{
text-align: center;
vertical-align: top;
padding: 1%;
}

#leftheadcell
{
width: 20.8%;
}

Das Logo erscheint nur beim ersten laden zu gross, (bei einer schnellen Verbindung fällt das nicht so auf, ist aber trotzdem hässlich)

Vielleicht kann mir einer helfen, ich hab schon einiges probiert...

Mit freundlichen Grüßen

Content-Key: 282542

Url: https://administrator.de/contentid/282542

Printed on: April 25, 2024 at 02:04 o'clock

Member: falscher-sperrstatus
falscher-sperrstatus Sep 10, 2015 at 19:09:19 (UTC)
Goto Top
Hallo djevil,

wie wäre es, wenn du einfach die Site postest?

Vermutlich wird das übergeordnete Element erst später (ext css?) geladen?

VG
Member: falscher-sperrstatus
falscher-sperrstatus Sep 10, 2015 at 20:06:52 (UTC)
Goto Top
Welches Bild? Top?
Member: bytecounter
bytecounter Sep 11, 2015 at 06:26:03 (UTC)
Goto Top
Hallo,

Prozentangaben sind ja relativ zu übergeordneten Elementen. Diese haben einen Standardwert, bis sie durch das CSS "überschrieben" werden. Wenn nun das Bild vor dem CSS geladen ist, kann es passieren, dass dies erst in falscher Größe dargestellt wird. Verhindern kannst Du dies, indem Du per HTML-Attribut (width oder height) eine absolute Größe in Pixeln vorgibst - oder das (wichtige) CSS in die HTML-Datei integrierst.

Unter dem geposteten Link kann ich allerdings das von Dir genannte Logo nicht finden. Auch das Wasserfalldiagramm sieht bei mir gut aus, die Bilder werden erst kurz nach dem CSS geladen und brauchen auch deutlich länger.

EIn anderer Lösungsansatz:
Dem body das CSS Attribut display:none mitgeben; und erst, wenn alles geladen ist, per Javascript auf display:block setzen. Allerdings solltest Du dann bei deaktiviertem Javascript einen Hinweis einbauen (unschön) oder so gestalten, dass das Attribut nur bei aktiviertem JS angewendet wird.

vg
Bytecounter
Member: Lochkartenstanzer
Lochkartenstanzer Sep 11, 2015 updated at 15:43:01 (UTC)
Goto Top
Also ich sehe da keinen Fehler in meinem Browser (FF 40.0.3 auf Ubuntu 12.04.5 LTS ), habe aber auch den Quellcode nicht angeschaut.

lks
Member: djevil-ad
djevil-ad Sep 11, 2015 updated at 16:18:29 (UTC)
Goto Top
Den ersten Fehler konnte ich korrigieren, in dem ich das css mit "link rel" statt @import importiert habe, das mochte zumindest der Firefox nicht,
Die Bilder laden jetzt aber immer noch zu gross, was auch klar ist, er lädt sie erst mit 100% und berechnet aus den css basierend dann die letztliche Grösse.

Aber wie gesagt, es fällt erst bei einer langsamen Verbindung auf, (die ich leider im moment nur habe), und es werden halt auch erstmal die Platzhalter angezeigt, was natürlich auch nicht so schön ist.

JS wollte ich erstmal für die Basiswebseite nicht benutzen, also muss ich vernmutlich der table-row mit den Images erstmal eine fixe Höhe geben, und sie dann später überschreiben,
schaun wa mal..

Gruss

dv