CSS-Galerie-Problem

    Hallo zusammen,

    ich bin neu hier und komme gleich mit einem für mich unlösbarem Problem. Ich bastele gerade an meiner ersten Homepage und dort möchte ich gerne eine Bildergalerie einbauen. Ich habe im Netz dies gefunden: http://www.cssplay.co.uk/menu/gallery_click Diese Galerie mit Bildern auf er linken Seite möchte ich gerne übernehmen. Allerdings bekomme ich es einfach nicht so hin, wie es sein sollte. Da ich (leider) noch mit Tabellen arbeite, hier mal der Aufbau der Tabelle:

    Code
    <table>
  <tr>
     <td>Menü</td>
     <td>Galerie</td>
  </tr>
</table>


    Die Galerie soll also in eine Tabellenspalte. Dazu kommt noch folgendes Problem, dass ich mehr Bilder habe, als auf dieser Demo-Seite benutzt werden. Daher würde ich gerne die Thumbs scrollen können. Alle meine Versuche sind bisher kläglich gescheitert, da ich CSS einfach noch nicht drauf habe (und HTML wohl auch noch nicht).

    Vielleicht gibt es hier ja einen Fachmann, der mir das zusammenbauen könnte, wenn das nicht zuviel verlangt ist. Auf die Tabelle möchte ich (im Moment) nicht verzichten, da ich sonst einige Seiten wieder umstricken müsste, bin froh, dass diese zumindest schon mal fertig sind.

    Ich bedanke mich fürs Lesen und Helfen
    Gruß
    uha

    <edit>
    Muss doch die Galerie nehmen, bei der die Thumbs oben liegen, da ich sonst zuwenig Platz für die großen Bilder habe
    </edit>

    Da steckt ein recht umfangreicher Quelltext bzw. CSS-Code dahinter, was als Anfänger in der Tat recht schwierig ist umzusetzen. Außerdem musst du dabei für jedes Bild CSS-Klassen anlegen, was äußerst viel Arbeit erfordert.

    Ich würde dir deshalb eine etwas andere Alternative empfehlen, wo du fertige Scripts verwenden kannst.
    Z.B.
    JAlbum: http://jalbum.net/ oder
    HomeGalery: http://www.stefanheymann.de/homegallery/

    also auch in eine tabellenzelle kann man ein div packen wo die komplette struktur drin is..;)
    mit deinem problem kann ich akut net weiterhelfen, da ich auf diese art noch kein menü gebaut habe (ich bevorzuge javascript bei solchen dingen- bzw die kombi aus javascript und css)
    leider ist auf deinem link die verknüpfung zum tutorial ausgegraut, sonst hätt ich mir das mal angesehen und dir den richtigen weg weisen können.

    edit: das hier hab ich mal für jemandem ausm forum gebaut...
    scrollende thumbnails, anzeige per mouseover und nen text der variable zu jedem bild gesetzt werden kann...
    http://home.arcor.de/synaptic/hilfe/js_gal/gallery.html

    sejuma
    Danke für die Hinweise. Die CSS-Klassen generiere ich mit PHP, das ist nicht mein wirkliches Problem, das funktioniert bei mir auch. Ich lese dabei die Infos aus einer Textdatei. Der CSS-Teil will einfach nicht. Und danke für die Links, habe ich mir angesehen. Mir gefällt die CSS-Galerie besser und möchte davon nur weggehen, wenn ich keine Lösong finde

    synaptic
    Auch dir Danke für die Infos. Das Menü hat mit der Galerie nichts zu tun, sondern das sind nur Links zu weiteren Seiten. Sorry, wenn ich das nicht richtig beschrieben habe.

    Danke und Gruß
    uha

    Hat niemand eine Idee und kann mir helfen? Oder ist das auch für Könner ein Problem, dass sich nicht so leicht lösen lässt? Oder erfordert die Lösung zuviel Aufwand?

    Gruß
    uha

    Verwende das als CSS-Angaben, natürlich korrigiert durch deine Bilder:

    und das als HTML-Code:

    Bei mir klappt das.
    Wenn das auch bei dir funktioniert, dann poste nochmal einen Link, damit wir die Box noch entsprechend positionieren können.

    sejuma
    erst mal vielen Dank. Ich kann das leider erst heute Abend testen, da ich die Zugangsdaten zum Server im Moment nicht zur Verfügung habe, da ich auf Arbeit bin.

    Danke und Gruß
    uha

    Knackpunkt ist das Element "":

    Zitat

    a.gallery em, a.gallery span {display:none;}


    Damit wird zunächst verhindert, dass das Großbild im Normalzustand erscheint (display: none)

    Aktiviert wird das große Bild durch diese Angabe:

    Zitat

    #container_bottom a.gallery:active em, #container_bottom a.gallery:focus em {display:block; position:absolute; width:402px; height:250px; top:-305px; left:5px; padding:5px; color:#000; border:1px solid #3d330f; z-index:50;}

    im Zusammenhang mit dem jeweiligen Link, z.B.

    Zitat

    <a class="gallery slidea" href="#nogo">[i]
    Zitat

    <span>LSE Square
    Photographs courtesy of stock.xchng</span></a>

    Das vergrößerte Bild wird also sozusagen versteckt und erscheint beim Link-Klick.

    So was ähnliches hab ich mal hier gebastelt, allerdings nur beim Hovern.

    Habe es gerade bei mir lokal testen können, es sieht schon mal super aus. Nur ein Problem besteht noch. In der Demo gibt es 10 Thumbs, bei mir werden es aber mehr. Man müsste die Thumbs also scrollen können. Dabei wäre mir es noch egal, ob die Thumbs zweireihig oder in einer Zeile stehen. Wenn du das noch hinbekommen könntest, dann wäre das absolute Klasse.

    Ich sage jetzt schon mal tausend Dank für die super Hilfe.
    uha

    na für scrollende thumbs brauchste dann ja schon javascript dabei.. oder meinste einfach nur die möglichkeit per hand zu scrollen?
    wie automatisiertes scrollen geht kannste ja meinem link oben entnehmen

    Mir würde das Scrollen per Scrollbalken vollkommen reichen. Auf JavaScript möchte ich nach Möglichkeit verzichten, denn ich habe schon mit CSS genug zu kämpfen, da muss ja nicht auch noch JavaScript dazukommen. ;)

    Danke und Gruß
    uha

    Dann versuch's mal damit:

    CSS


    HTML

    Vermutlich brauchst du für den IE 6 auch noch das conditional comment.

    Beachte naoch:
    Nimm unbedingt diesen Doctype, damit der IE das Boxmodell richtig darstellt:

    Code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Ja, das ist die andere Galerie mit dem Scrollbalken.
    Bei mir klappt's.

    Achte mal darauf, dass du die IF-Angabe für den IE nach dem </style> hast.

    Du kannst dir ja auch mal selbst den Quellstext der Seite von cssplay ansehen.
    Sind noch einige andere Dinge drin, aber wesentlich ist das was ich gepostet hatte.

    So, habe das gerade ausprobieren können. Ein paar Pixelangaben angepasst und Bingo, im Firefox funktioniert es jetzt schon mal perfekt. Die Anpassungen für den IE werde ich dann bestimmt auch noch hinbekommen.

    Da bleibt mir nur noch mal ein herzliches Danke an sejuma, hast mir damit riesig geholfen.

    Danke und Gruß
    uha

    Hallo,
    ich habe eine Frage, die sehr zu diesem Thema passt. Also ich hab mich auch mal bei den Galerien oben umgeschaut...
    http://www.cssplay.co.uk/menu/gallery.html#nogo

    was wäre für einen Newbie die einfachste Methode in etwa eine solche Galerie zu erstellen? den Hover effekt brauchte ich nicht. also einfach nur draufklicken und das bild erscheint größer in einem anderen div.

    bin ja grad dabei meine erste hp ohne tabellen zu erstellen.
    der vorläufie link: http://sandra.nadinelange.com/

    würde gerne die thumbnails rechts unter dem menu platzieren und dort wo das große foto ist, immer die bilder per klick "erscheinen lassen".

    wer mag mir helfen?

    bin wirklich ein newbie! :/
    viele Grüße
    Tink