|
|
|
|
|
|
Hallo,
ich baue derzeit eine Seite die aus sehr vielen Grafiken besteht.
Auch die Menüführung wird durch einzelne Grafiken gelöst, weil die gewünschte Schriftart niemand besitzt.
Jetzt würde ich gerne wissen welche Preloader-Ideen am besten funktionieren (insofern ich einen verwenden muss).
Die Menüführung will ich per CSS und background-image machen, das sich eben bei :hover und :active und :focus ändert.
Werden denn Bilder die in CSS eingetragen sind auch gleich geladen obwohl sie nicht dargestellt werden?
Preloader fallen mir jetzt Flash und Javascript ein, aber Flash will ich eigentlich rauslassen. Javascript ist halt naja.
Eine weitere Idee wäre, die benötigten Bilder in einer div zu laden die nicht sichtbar ist.
Besteht dann ein Unterschied zwischen display:none und visibility:hidden?
Und werden "unsichtbare" Grafiken geladen?
Vielen Dank für eure Hilfe! 
|
|
|
|
|
|
|
|
|
|
|
Die Bilder werden nicht automatisch mitgeladen. Hierfür wäre die einfachste Variante ein kleines javascript, dass die Bilder beim Seitenaufruf explizit mitläd.
Ist ein einzeiler, hab ihn aber grad nicht im kopf
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Teufel
Werden denn Bilder die in CSS eingetragen sind auch gleich geladen obwohl sie nicht dargestellt werden?
| |
Nein, mann kann das :hover Bild auch mit CSS einfuegen und dann beim :hover die Position veraendern. So haengt das ganze nicht von JS ab...
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von Y2Keeper am 19.01.2008 16:25]
|
|
|
|
|
|
|
|
|
Ah, das ist eine Idee.
Jetzt habe ich allerdings noch ein Problem:
| |
| Code: |
<div id="navi">
<div id="navi-news">
<ul>
<li><a href="#" id="news"> </a></li>
</ul>
</div>
</div>
|
|
CSS dazu:
| |
| Code: |
#navi a { background-position: 0 0; background-repeat: no-repeat; }
#navi a#news:link, #navi a#news:visited { background-image: url("./css/navi/navi-01.png"); }
#navi a { width: 247px; height: 17px; } /* Abmessungen fürs Bild */
|
|
Er zeigt das Bild einfach nicht an.
Wenn ich hingegen die ID der <li> zuweise, dann zeigt er das Bild an (auch das hovern funktioniert entsprechend...)
Warum funktioniert das denn nicht so wie ich will? :/
/e: Der Pfad bleibt wohlgemerkt der gleiche, ich mach nur aus dem a# ein li# im CSS.
|
|
[Dieser Beitrag wurde 2 mal editiert; zum letzten Mal von Teufel am 19.01.2008 16:37]
|
|
|
|
|
|
|
|
|
Wie wärs mit die Bilder einfach in die Seite einbinden mit "display: none" geladen werden sollten sie dann trotzdem.
Generell ist preloaden aber bä und ich bin dagegen.
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von TheRealPlextor am 19.01.2008 17:16]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von TheRealPlextor
Wie wärs mit die Bilder einfach in die Seite einbinden mit "display: none" geladen werden sollten sie dann trotzdem.
Generell ist preloaden aber bä und ich bin dagegen.
| |
Muss bei der Seite aber leider sein.
Das mit den as hab ich gelöst, display:block wars.
Letztes Problem:
Der IE ( ) stellt meine Bildchen allesamt mit margin dar, obwohl ich das xmal anders definiert habe, via #navi img, #navi * und generell *.
Der IE 6 machts komischerweise auch richtig, versaut aber dann unten was.
So sollte es aussehen: (FF) 
So siehts im IE 7 aus:
Hat jemand eine Lösung für die Mistkrücke?
|
|
|
|
|
|
|
|
|
|
|
Wenn du weisst wie es unter IE7 funktioniert, dann kannst du einfach ein conditional style sheet verwenden, also:
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="styles.css" /><![endif]-->
|
|
|
|
|
|
|
|
|
|
|
| | Zitat von Teufel
| | Zitat von TheRealPlextor
Wie wärs mit die Bilder einfach in die Seite einbinden mit "display: none" geladen werden sollten sie dann trotzdem.
Generell ist preloaden aber bä und ich bin dagegen.
| |
Muss bei der Seite aber leider sein.
Das mit den as hab ich gelöst, display:block wars.
Letztes Problem:
Der IE () stellt meine Bildchen allesamt mit margin dar, obwohl ich das xmal anders definiert habe, via #navi img, #navi * und generell *.
Der IE 6 machts komischerweise auch richtig, versaut aber dann unten was.
So sollte es aussehen: (FF) http://domerich.de/share/uploads/bilder/ff_6rh.png
So siehts im IE 7 aus:
http://domerich.de/share/uploads/bilder/ie7_821.png
Hat jemand eine Lösung für die Mistkrücke?
| |
display:block; für die Bilder.
|
|
|
|
|
|
|
|
|
|
|
Die Bilder sind ja allesamt background-images. #navi a { display: block; } ist bereits eingetragen.
Könnte es evtl Boxmodel oder sowas sein?
Die Kategorien --Game-- oder --Misc-- sind einzelne divs, die diese Bilder als background-image haben. In der div steht dann eine <ul> mit den einzelnen Links als <li><a>.
Damit man die Kategorie ordentlich sehen kann hat jede Kategorie div ein padding-top von der Höhe des eigenen background-images.
Wenn es euch sehr helfen würde den Sourcecode zu sehen dann kann ich einen Link auch gerne per PM weitergeben, ich will dieses Problem wirklich lösen :/
|
|
|
|
|
|
|
|
|
|
|
|
Evtl. die lis alle in eine Zeile schreiben
|
|
|
|
|
|
|
|
|
|
|
Gute Idee, hat aber leider nicht funktioniert.
Das macht der IE 6 aus meiner schönen Seite.
Anscheinend meint er halt irgendwelche margins zeichnen zu müssen, sowohl nach Rechts als auch unten.
Der IE 7 macht wenigstens nach Rechts nichts dergleichen.
Die navi floatet links und das rechte content feld daneben auch. Beide haben eigentlich eine feste Breite zugewiesen.
Innerhalb der <a> Tags steht , das rauszunehmen hat auch nichts gebracht, genausowenig wie eine style="" Definition für die div
So, wenigstens ist jetzt der Rechte margin im IE6 weg.
Nach wie vor gibts noch die horizontalen Linien.
|
|
[Dieser Beitrag wurde 2 mal editiert; zum letzten Mal von Teufel am 19.01.2008 20:36]
|
|
|
|
|
|
|
|
|
Update:
So siehts jetzt im IE 6 und IE 7 aus. Diese Linien sind exakt 1px dick.
Das mit dem Preloader hab ich btw mit einer unsichtbaren div gelöst. Funktioniert einwandfrei und auch bei Leuten ohne Javascript :>
|
|
|
|
|
|
|
|
|
|
|
Hat denn keiner mehr eine Idee? 
|
|
|
|
|
|
|
|
|
|
|
Ich tät sowas nicht machen:
| |
| Code: |
<a href="..."> </a> |
|
Ist semantisch so eigentlich nicht korrekt. Besser wär imho sowas:
| |
| Code: |
<a href="..."><span>Feed</span></a> |
|
Dann kannst du immer noch für a span { display: none; } machen.
¤: Achja und scheiss doch auf den Preload. Ist heutzutage überhaupt nicht mehr nötig. Vorallem nicht bei einer TF2 Seite. Jemand der genug Bandbreite für Steam hat, hat auch dafür genug :D
¤2: Die Abstände zwischen den Bildern entstehen im IE manchmal durch Leerschläge oder Zeilenumbrüche im Quelltext. Mach die halt mal raus.
|
|
[Dieser Beitrag wurde 2 mal editiert; zum letzten Mal von Meister Zopf am 20.01.2008 14:17]
|
|
|
|
|
|
|
|
|
|
Könntest du vielleicht mal ein bisschen mehr Quellcode mit Zusammenhang posten? Würd das ganze etwas leichter machen
|
|
|
|
|
|
|
|
|
|
|
|
klaaaa
|
|
[Dieser Beitrag wurde 1 mal editiert; zum letzten Mal von Teufel am 21.01.2008 18:23]
|
|
|
|
|
|
|
|
|
enos hatte die Lösung dafür: Der IE macht von Haus Aus Abstände in Listen, abhängig von der Schriftgröße. #navi { font-size: 0px; } hat das Problem gelöst.
|
|
|
|
|
|
|
|
| Thema: Preload |
