Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 23

Thema: CSS-Galerie-Problem

  1. #1
    HTML Newbie
    Registriert seit
    28.05.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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/

  3. #3
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  4. #4
    HTML Newbie
    Themenstarter

    Registriert seit
    28.05.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @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

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    28.05.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Ich verzweifele langsam aber sicher. Nachdem ich mich an der Galerie http://www.cssplay.co.uk/menu/scroll_gallery versucht habe, stehe ich kurz vorm Wutausbruch. Es will einfach nicht so, wie es soll. Ich wäre sehr dankbar, wenn sich das jemand ansehen und reparieren könnte: http://uwe59.uw.funpic.de/test/

    Danke und Gruß
    uha

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    28.05.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  7. #7
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

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

    Code:
    /* needed for IE to make &#58;active state work first time */
    a, a&#58;visited &#123;color&#58;#000;&#125;
    
    /* common styling for all galleries */
    a.gallery, a.gallery&#58;visited &#123;display&#58;block; display&#58;inline-block; color&#58;#000; text-decoration&#58;none; border&#58;1px solid #000; width&#58;75px; height&#58;47px; float&#58;left; margin&#58;4px; z-index&#58;50;&#125;
    a.slidea &#123;background&#58;url&#40;london/thumb2.jpg&#41;;&#125;
    a.slideb &#123;background&#58;url&#40;london/thumb3.jpg&#41;;&#125;
    a.slidec &#123;background&#58;url&#40;london/thumb4.jpg&#41;;&#125;
    a.slided &#123;background&#58;url&#40;london/thumb5.jpg&#41;;&#125;
    a.slidee &#123;background&#58;url&#40;london/thumb6.jpg&#41;;&#125;
    a.slidef &#123;background&#58;url&#40;london/thumb7.jpg&#41;;&#125;
    a.slideg &#123;background&#58;url&#40;london/thumb8.jpg&#41;;&#125;
    a.slideh &#123;background&#58;url&#40;london/thumb9.jpg&#41;;&#125;
    a.slidei &#123;background&#58;url&#40;london/thumb10.jpg&#41;;&#125;
    a.slidej &#123;background&#58;url&#40;london/thumb11.jpg&#41;;&#125;
    a.gallery em, a.gallery span &#123;display&#58;none;&#125;
    a.gallery&#58;hover &#123;border&#58;1px solid #fff;&#125;
    
    /* styling for BOTTOM gallery */
    #container_bottom &#123;position&#58;relative; width&#58;425px; height&#58;425px; background&#58;#d1c8c3; border&#58;1px solid #a49188; margin&#58;1em auto;&#125;
    #container_bottom img &#123;border&#58;0;&#125;
    #container_bottom .thumbs &#123;position&#58;absolute; left&#58;0; bottom&#58;0; height&#58;114px;&#125;
    #container_bottom a.gallery&#58;hover span &#123;display&#58;block; position&#58;absolute; width&#58;402px; height&#58;50px; top&#58;-45px; left&#58;5px; padding&#58;5px; font-style&#58;italic; color&#58;#fff;  z-index&#58;100;&#125;
    #container_bottom a.gallery&#58;hover span&#58;first-line &#123;font-style&#58;normal; font-weight&#58;bold; font-size&#58;1.1em; color&#58;#000;&#125;
    #container_bottom a.gallery&#58;active, #container_bottom a.gallery&#58;focus &#123;border&#58;1px solid #000;&#125;
    #container_bottom a.gallery&#58;active em, #container_bottom a.gallery&#58;focus em &#123;display&#58;block; position&#58;absolute; width&#58;402px; height&#58;250px; top&#58;-305px; left&#58;5px; padding&#58;5px; color&#58;#000; border&#58;1px solid #3d330f; z-index&#58;50;&#125;
    #container_bottom h1 &#123;clear&#58;both; margin&#58;0; padding-top&#58;80px; text-align&#58;center; font-family&#58; georgia, "times new roman", serif; font-size&#58;3em; font-weight&#58;normal; color&#58;#fff;&#125;
    #container_bottom h1 em &#123;font-size&#58;0.6em; color&#58;#000;&#125;
    und das als HTML-Code:

    Code:
    <div id="container_bottom">
    <div class="thumbs">
    
    <a class="gallery slidea" href="#nogo">[img]london/pic2.jpg[/img]<span>LSE Square
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slideb" href="#nogo">[img]london/pic3.jpg[/img]<span>Buckingham Palace
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidec" href="#nogo">[img]london/pic4.jpg[/img]<span>Tower Bridge
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slided" href="#nogo">[img]london/pic5.jpg[/img]<span>Tower of London
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidee" href="#nogo">[img]london/pic6.jpg[/img]<span>Houses of Parliament
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidef" href="#nogo">[img]london/pic7.jpg[/img]<span>St. Paul's Cathedral
    Photographs courtesy of stock.xchng</span></a>
    
    <a class="gallery slideg" href="#nogo">[img]london/pic8.jpg[/img]<span>The London Eye
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slideh" href="#nogo">[img]london/pic9.jpg[/img]<span>Albert Hall
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidei" href="#nogo">[img]london/pic10.jpg[/img]<span>Wandsworth Common
    Photographs courtesy of stock.xchng</span></a>
    <a class="gallery slidej" href="#nogo">[img]london/pic11.jpg[/img]<span>London Taxi Cab
    Photographs courtesy of stock.xchng</span></a>
    </div>
    <h1>Views
    of
    London</h1>
    
    </div>
    Bei mir klappt das.
    Wenn das auch bei dir funktioniert, dann poste nochmal einen Link, damit wir die Box noch entsprechend positionieren können.

  8. #8
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    hey sejuma, kannste mal eben die funktionsweise erläutern?
    die href irritiert mich irgendwie bei dem dings
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    28.05.2008
    Beiträge
    9
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    @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

  10. #10
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Knackpunkt ist das Element "[i]":

    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:
    #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.
    <a class="gallery slidea" href="#nogo">[img]london/pic2.jpg[/img]<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.

Ähnliche Themen

  1. Problem mit Galerie (Pixlie)
    Von Tamira im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 11.02.2008, 13:39
  2. Galerie
    Von Me, the G im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 20.04.2007, 21:32
  3. galerie
    Von des-man im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 23.03.2007, 22:35
  4. Hab kleineres Problem mit Galerie
    Von Sleeme im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 16
    Letzter Beitrag: 08.01.2006, 20:06
  5. Problem mit Fotos in Flash-Galerie
    Von DrPepper im Forum Flash Forum
    Antworten: 0
    Letzter Beitrag: 11.07.2004, 21:39

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •