Die auf CSS basierenden Galerien sind besonders bei größeren
Bildern nicht sinnvoll, weil dafür ja alle Bilder vom browser
geladen werden, nicht nur jene, die sich der Besucher wirklich
ansehen will.
Das löst man dann doch besser über ein PHP-Skript, welches
das ausgewählte Bild dann in groß einbindet und dazu die
Navigation in kleinen Bildern.
comjag - bei dir wird :hover ja offenbar angewendet, um einfach
ein Hintergrundbild eines a-Elementes auszutauschen, zudem
scheinen die Hintergrundbilder nicht besonders groß zu sein, das
ist also zum einen unbedenklich, zum anderen funktioniert das
sogar bereits bei MSIE 6 und älter.
Was sumatra70 referenziert hat, hat eine andere Funktionalität,
da ist es das primäre Ziel, wenn man über ein Vorschaubild
fährt, daß dann ein größeres (?) Hauptbild angezeigt wird.
Das hat nichts mit Verweisen zu tun, schon gar nicht, wenn die
dann auch noch einen ungültigen Wert als Referenz enthalten:
href="#" - das ist dann vom (X)HTML her schon mal Blödsinn,
weswegen man das lassen sollte. Nun kann man das stattdessen
auch bei einem a ohne href anwenden oder einem span oder
div (was dann bei MSIE 6 und älter nicht funktioniert, aber
dennoch technisch an sich unbedenklich ist). Der einzige Haken
daran ist dann eben, daß immer alle Bilder geladen werden, auch
jene, die sich der Nutzer gar nicht angucken will, ist also eine
Verschwendung von Resourcen, insofern ist diese Technik für
Galerien zwar technisch möglich, aber nicht effektiv.
Und wenn dann da auch noch im img steht:
alt=“description”
da weiß man gleich, daß das ein ziemlich lieblos
zusammengefrickeltes Konstrukt ist, was man sicher nicht als
Vorbild verwenden sollte ;o)
Im konkreten Falle sind dann auch noch die Vorschaubilder
identisch mit den Hauptbildern, also nur per CSS verkleinert.
Daß die gesamte Konstruktion schlecht durchdacht ist, sieht man
auch, wenn man CSS einfach mal deaktiviert - da hat man zwei
identische Bilder nebeneinander - was soll einem das inhaltlich
sagen?
sumatra70 ist ja nun offensichtlich nicht der Autor, der Autor
dieser ‘Galerie’ ist aber sicher gar kein Experte auf diesem
Gebiet ;o)
Die Quelle dieses Beispieles stand mir leider nicht mehr zur verfügung.
Wobei es auch nur ein Beispiel sein sollte. Es war ja auch dafür gedacht, das man die “#” ersetzen und die Vorschau auch noch anders definieren kann.
Ich fand nur die Idee des Layoutes nicht schlecht.
okay mal b2maintopic
hab jetzt die bilder eingebunden und einzelnen div umschlossen, zumindest die ersten 3 zum probieren.
nun will ich diese nebeneinander haben, aber die divs nehmen nicht die breite an die ich angebe woran liegt das?
hier der link comjag.bplaced.net/logos/filmauswahl.html
hier die css comjag.bplaced.net/logos/bilder.css
besonders die ersten divs mit #1#2#3 anschaun
das will net
Wie wäre es mit float:left; ? Afaik werden block-Elemente nicht automatisch nebeneinander angezeigt, sondern nur inline-Ausdrücke … (falls es doch wer besser weiss, gerne korrigieren )
Und ansonsten bist du dir sicher, dass die Größen sich nicht ändern? Deine Hintergrundbilder haben ja nur eine gewisse Größe … vielleicht einfach mal background-color:red; oder so einbauen und die Größe variieren.
ja ich weiß dass sie sich komplett über die seite erstreckne weil ichs mir durch die web developer toolbar habanzeigen lassen
wenn ich display:block raus nehme, dann fällt alles zusammen und ich hab nur noch einen bunten punkt links oben
und float:left hilft auch net
Bei mir funktioniert es, wenn ich den div-boxen andere ids gebe.
also anstatt #1 mal #div1 oder so probieren. Und um die Divs nebeneinander zu kriegen: float:left;
CSS2.1 bietet für sowas display: inline-block;
Bei welchen browser (-Versionen) das implementiert ist, habe
ich allerdings nicht ausprobiert.
Bei inzeiligen Elementen oder solchen, die display:inline haben,
bestimmt sich die Größe nach dem Inhalt. Da es bei dir faktisch
keinen gibt, schrumpft das dann zusammen.
Teils ist ja für das Hintergrundbild keine Wiederholung wirksam,
das kann bei kleinen Bildern natürlich auch zu kleinen Flächen
mit Hintergrund führen.
float kann sowohl bei inzeiligen als auch Block-Elementen
angeben. Die Wirkung ist nur geringfügig unterschiedlich.
Achso - Fragmentidentifizierer (Werte von id-Attributen)
beginnen immer mit einem Buchstaben, nicht mit einer Zahl ;o)
@ hummer
danke
wie soll man denn bitte darauf kommen dass es anne namen liegt @hoffmann
das mit den buchstaben am anfang wusste ich nicht, jetzt bin ich schlauer
danke nochmal an alle, ich denke den rest bekomm ich hin
Man kann beides zuweisen, id hat höhere Priorität als die
Klasse, wenn man beides angibt, hat das noch höhere
Priorität (also sowas: div.bsp.etc#dieshier {color: red}).
In class kann man auch eine Leerzeichen-separierte Liste von
mehreren Klassen notieren, die spätere hat dann höhere
Priorität.
ah gut zu wissen danke
so hab mir die elemente jetzt mal angeordnet und werd die mal testweise einbinden
heri nochmal das vorläufig fertige comjag.bplaced.net/logos/filmauswahl.html
das einzige was stört ist, wenn die hover Grafiken noch nicht im Cache sind, dauert es ein bisschen bis sie angezeigt werden.
Ich hab das immer umgangen, indem ich die normale und die hover Grafik in eine Grafik gepackt hab und dann beim :hover nur die background-position verändert habe.
Übrigens is diese mit ca. 18KB noch 10 KB kleiner als die jpeg von dir.
das soll man riechen das sowas geht
probier ich nachher mal bin bloß fix dabei die bildern zu verkleinern inne größe
edit//
danke dein tipp war gold wert
woran liegt das?
)
