zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bildergalerie // Großbilder

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.11.2013, 12:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2013
Beiträge: 3
alleranfang befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.11.2013, 14:21
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Das wird sich kaum jemand zusammenbasteln und dann auch noch die nichtvorhandenen Grafiken ergänzen, poste also am Besten einen Link, der das Problem direkt zeigt.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.11.2013, 14:42
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2013
Beiträge: 3
alleranfang befindet sich auf einem aufstrebenden Ast
Standard

entschuldigt. Daran hab ich nicht gedacht.

Das wäre der Link:

Geändert von alleranfang (09.11.2013 um 12:26 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.11.2013, 15:18
Benutzerbild von cebito
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.07.2009
Ort: Dresden
Beiträge: 688
cebito sorgt für eine eindrucksvolle Atmosphärecebito sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von alleranfang Beitrag anzeigen
Wie schaffe ich es, dass das Großbild sichtbar bleibt?
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
Mit Zitat antworten
  #5 (permalink)  
Alt 09.11.2013, 12:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2013
Beiträge: 3
alleranfang befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
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
OK. Vielen Dank! Ich werde es mal versuchen.
Mit Zitat antworten
  #6 (permalink)  
Alt 25.03.2014, 22:43
Neuer Benutzer
neuer user
 
Registriert seit: 25.03.2014
Beiträge: 6
Verena befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cebito Beitrag anzeigen
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
Hallo, habe das Beispiel mal ausprobiert.
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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:32 Uhr.