|
|||
Bildergalerie // Großbilder
Hallo zusammen,
ich bin nciht der geübte Page-Ersteller, darum konnte ich Antworten, die ich in der Suche gefunden habe, auf mein Problem bzw. auf eine Lösung leider nicht ableiten. Darum würde ich mich freuen, wenn mir vielleicht jemand helfen könnte. Es geht darum, dass ich eine Galerie habe, bei denen Minibilder auf der rechten Seite sind und das Großbild in der Mitte angezeigt wird. Leider erscheint das Großbild nur dann, wenn ich mich auf dem entsprechenden Miniaturbild befinde und verschwindet wieder, sobald ich das Minibild verlasse. Wie schaffe ich es, dass das Großbild sichtbar bleibt? Für Hilfe bin ich äußerst dankbar. Hier der style.css und der image_viewer.css ================================================= style.css /* global */ html{height: 100%;} body { font-family: verdana, arial, sans-serif; padding: 0px; margin: 0px; font-size: .68em; } p { margin: 0px; padding: 0px 0px 16px 0px; line-height: 1.7em; } h1 { font-family: arial, sans-serif; letter-spacing: .1em; font-weight: normal; padding: 16px 0px 5px 0px; margin: 0px 0px 12px 0px; border-bottom: 1px solid; font-size: 150%; } .sub { font-size: 55%; padding-left: 12px; letter-spacing: .1em; } img { border: 0px; margin: 0px; padding: 0px; } a{outline: none;} /* block quote */ blockquote { margin: 20px 0px 20px 0px; padding: 10px 20px 0px 20px; border-left: 8px solid; } /* unordered list */ ul { margin: 2px 0px 18px 16px; padding: 0px; } ul li { list-style-type: square; margin: 0px 0px 6px 0px; padding: 0px; } /* ordered list */ ol { margin: 8px 0px 0px 24px; padding: 0px; } ol li { margin: 0px 0px 11px 0px; padding: 0px; } /* margin lefts / margin rights - to centre content */ #logo, #menu, #site_content { margin-left: auto; margin-right: auto; } /* logo */ #logo { width: 880px; height: 95px; border-top: 5px solid; } #logo h1 { font-family: century gothic, sans-serif; font-size: 600%; font-weight: normal; padding: 0px 0px 0px 14px; border: 0px; float: left; letter-spacing: 0px; } #links { margin: 15px 9px 0px 0px; font-size: 80%; text-align: right; padding: 20px 10px 0px 0px; text-transform: uppercase; } #links a, #links a:hover { padding: 0px 0px 2px 0px; text-decoration: none; } /* navigation menu */ #menu { height: 44px; width: 880px; border-bottom: 2px solid; } #menu ul{margin: 0px auto;} #menu li { float: left; margin: 0px; padding: 0px; list-style: none; } #menu li a { display: block; float: left; height: 38px; text-decoration: none; padding: 6px 19px 0px 19px; border-right: 2px solid; font-weight: bold; } #colours { height: 0px; text-align: right; padding: 16px 16px 0px 300px; } /* main content */ #site_content { width: 878px; height: 480px; overflow:auto; border-right: 1px solid; border-bottom: 1px solid; border-left: 1px solid; } /* side menu */ #side_menu { padding: 22px 3px 10px 19px; float: left; width: 170px; } .side_menu_item { width: 170px; padding: 6px 0px 8px 0px; height: 70px; } .side_menu_item a { float: left; width: 146px; height: 54px; } .side_menu_item img { display: block; margin: 2px; } .info { padding-top: 4px; float: left; } /* page content */ #content { text-align: left; width: 653px; float: left; padding: 12px 0px 18px 14px; } #content a, #content a:hover{text-decoration: none;} /* form */ form { margin: 3px 0px 0px 0px; padding: 0; } form#contact{height: 220px;} div.row1 { width: 501px; clear: both; } div.row1 span.formlabel { float: left; width: 164px; text-align: left; } div.row1 span.forminput { float: right; text-align: right; } #contact input, #contact textarea { width: 299px; font-family: verdana, arial, sans-serif; font-size: 100%; border: 1px solid; overflow: auto; margin: 2px; } #contact input.submit { width: 99px; margin: 8px 0px 0px 220px; height: 22px; cursor: pointer; } ============================================= ============================================= image_viewer.css #gallery { position: relative; width: 656px; padding-top: 8px; } #thumbs { width: 205px; float: right; } #thumbs a { display: block; float: right; margin: 1px 0px 3px 10px; width: 50px; height: 50px; border: 2px solid #40403E; } #thumbs a img { width: 50px; height: 50px; border: 0; } #thumbs a:hover {border-color: #ddd;} #thumbs a:hover img { position: absolute; width: auto; height: auto; right: 196px; top: 8px; padding: 2px; border: 2px solid #40403E; } |
Sponsored Links |
Sponsored Links |
|
||||
Das geht so nicht mit CSS, da der :hover wegfällt, wenn du das Vorschaubild verlässt. Warum also nicht bei klick aufs Vorschaubild? Ein Tutorial von mir dazu findest du hier. Fullscreen Image Gallery mit CSS3 - ecss3mples.de
|
|
|||
Zitat:
|
|
|||
Zitat:
Sieht echt toll aus! Manch mal hat man aber soviele Bilder das sich dann das ganze Bild zulegt. Mein Gedanke wäre ein Scrolleiste. Habe schon eine Sachen dazu probiert aber das passt nicht. bei den Thumb habe ich bei Baackground no-repeat scroll center center transparent; eingefügt. Gibt es da schon andere lösungs ansätze? Danke |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Css basierte Bildergalerie | Relühcs | CSS | 6 | 11.04.2012 18:44 |
Bildergalerie in Liste oder Div packen? | schogette | CSS | 11 | 10.08.2009 13:39 |
hasLayout Problem mit "Ulles" hover Bildergalerie | regioprint | CSS | 7 | 17.03.2008 11:45 |
Probleme mit Bildergalerie | Lili0312 | Site- und Layoutcheck | 3 | 03.03.2007 15:35 |
erstes bild direkt anzeigen --> bildergalerie | las | CSS | 9 | 21.07.2006 16:57 |