[GELÖST] Modul Album stellt Bilder im Hintergrund dar

Cruppellarius · 09. Januar 2011 14:50

Moin allerseits,
ich habe eine Frage bezüglich des Album Moduls.
Und zwar werden die Bilder, die angeklickt werden im Hintergrund der Seite angezeigt, und nicht so wie von mir gewünscht auf der Inhaltsseite selber. Kann mir jemand dazu ein Tipp geben wie ich das ändere, oder gibt es vielleicht eine Alternative zu dem Modul?

Ihr könnt euch das auhc ansehen was ich meine.

http://kulturwerkstattforum.de/index.php?page=gallery

Viele Grüße ausm Norden!

nockenfell · 09. Januar 2011 21:19

Du hast kein Stylesheet für das Album definiert oder eingebunden. Somit wird das Album auch nicht korrekt dargestellt.

Cruppellarius · 09. Januar 2011 21:25

Okay danke dir, aber wie heißt der Selektor den ich die Anweisung geben muss? Oder muss ich ein weiteres Stylesheet einbinden? Ich weiß ehrlich gesagt nicht genau wo ich da was anpacken muss :-(

nockenfell · 09. Januar 2011 22:11

Mit Album habe ich schon länger nicht mehr gebraucht. Auf einer alten Installation habe ich folgendes Stylesheet dazu gefunden:

Hier klicken, um den Code zum Kopieren zu markieren

/* Album Module CSS for default, ImageGallery, and Thickbox templates */
/* Used for categories to make things clear correctly */
.album_content {
    width:100%; 
    float:left;
}
.clear {
    clear:both
}
/* Album List UL */
.albumlist
{
    margin-left:0;
    padding-left:0;
    float:left;
}

/* Picture List UL */
.picturelist
{
    margin-left:0;
    padding-left:0;
}

/* Album and Picture Lists */
.thumb
{
    padding:0;
    width:150px;
    margin:0 0.5em 0.5em 0;
    
/* Thumbnail spacing */
    text-decoration:none;
    line-height:normal;
    list-style-type:none;
    text-align:center;
    float:left;

}

.thumb a
{
    display:block;
    height:72px; 
/* Set link formatting*/
    width:100px; 
/* Thumb width*/ 
    
/* Thumb height*/
    padding:10px;
/* Thumb padding to form thumb frame */
/* You can set the above to 0px = no frame - but no hover indication!*/
    margin:0;
    background-color:white;
/*Background of thumb */
    border-top:1px solid #eee;
/* Borders of thumb frame */
    border-right:2px solid #ccc;
    border-bottom:2px solid #ccc;
    border-left:1px solid #eee;
    text-decoration:none;
}
.albumcomment { text-align: left; }
.thumb a:visited img
{
    background-color:#eee;
/*Background of thumb on hover - sort of a light grey */
}

.thumb a:hover img
{
    background-color:#dae6e4;
/*Background of thumb on hover - sort of light blue/green */
}

/* Styling of text and navigation for Album */
.albumname
{
    font-size:smaller;
    text-align:center;
    font-weight:bold;
    font-style:normal;
}
.albumname a
{
    display: inline;
        border: none;
        margin:none;
        padding:none;
        background-color:transparent;
}
.albumpicturecount
{
    font-size:smaller;
    text-align:center;
    font-weight:normal;
    font-style:italic;
}

.albumcomment
{
    text-align:center;
    font-weight:normal;
    font-style:normal;
}

.albumnav
{
    text-align:center;
    font-weight:normal;
    font-style:normal;
    font-size:smaller;
}

.instructiontext
{
    font-weight:normal;
    font-style:normal;
    font-size:smaller;
    font-style:italic;
}

/* Big Picture */
.bigpicture
{
    padding:0.5em 0 0;
    clear:left;
    border-top:1px solid #ccc;
    text-align:center;
}

.bigpicturecaption
{
/* Big picture caption */
    text-align:center;
    margin:0 0 5px;
    padding:0;
}

.bigpicture img
{
/* Big picture settings */
    padding:18px;
/* Image padding to form photo frame. */
    width:80%;
/* Width of big picture - set to auto for actual width*/
    margin:0;
    background-color:white;
/* Background of picture */
    border-top:1px solid #eee;
/* Borders of picture frame */
    border-right:2px solid #ccc;
    border-bottom:2px solid #ccc;
    border-left:1px solid #eee;
    text-decoration:none;
}

.bigpicturenav
{
    margin:0;
    padding:0;
    color:#000;
    font-size:smaller;
    line-height:normal;
}

/*Thickbox CSS */
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
/* Already done in main CMSMS stylesheet. Commenting out. */
/* *{padding: 0; margin: 0;} */

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
    font: 12px Arial, Helvetica, sans-serif;
    color: #333333;
}

#TB_secondLine {
    font: 10px Arial, Helvetica, sans-serif;
    color:#666666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    background-color:#000;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    height:100%;
    width:100%;
}

* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_window {
    position: fixed;
    background: #ffffff;
    z-index: 102;
    color:#000000;
    display:none;
    border: 4px solid #525252;
    text-align:left;
    top:50%;
    left:50%;
}

* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_window img#TB_Image {
    display:block;
    margin: 15px 0 0 15px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #666;
    border-left: 1px solid #666;
}

#TB_caption{
    height:25px;
    padding:7px 30px 10px 25px;
    float:left;
}

#TB_closeWindow{
    height:25px;
    padding:11px 25px 10px 0;
    float:right;
}

#TB_closeAjaxWindow{
    padding:7px 10px 5px 0;
    margin-bottom:1px;
    text-align:right;
    float:right;
}

#TB_ajaxWindowTitle{
    float:left;
    padding:7px 0 5px 10px;
    margin-bottom:1px;
}

#TB_title{
    background-color:#e8e8e8;
    height:27px;
}

#TB_ajaxContent{
    clear:both;
    padding:2px 15px 15px 15px;
    overflow:auto;
    text-align:left;
    line-height:1.4em;
}

#TB_ajaxContent.TB_modal{
    padding:15px;
}

#TB_ajaxContent p{
    padding:5px 0px 5px 0px;
}

#TB_load{
    position: fixed;
    display:none;
    height:13px;
    width:208px;
    z-index:103;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}

* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}

#TB_HideSelect{
    z-index:99;
    position:fixed;
    top: 0;
    left: 0;
    background-color:#fff;
    border:none;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    height:100%;
    width:100%;
}

* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

#TB_iframeContent{
    clear:both;
    border:none;
    margin-bottom:-1px;
    margin-top:1px;
    _margin-bottom:1px;
}

/* CSS for Lightbox follows */
#lightbox{
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 100;
    text-align: center;
    line-height: 0;
    }

#lightbox a img{ border: none; }

#outerImageContainer{
    position: relative;
    background-color: #fff;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }

#imageContainer{
    padding: 10px;
    }

#loading{
    position: absolute;
    top: 40%;
    left: 0%;
    height: 25%;
    width: 100%;
    text-align: center;
    line-height: 0;
    }
#hoverNav{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 10;
    }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../templates/db/lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../templates/db/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../templates/db/lightbox/images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
    font: 10px Verdana, Helvetica, sans-serif;
    background-color: #fff;
    margin: 0 auto;
    line-height: 1.4em;
    }

#imageData{
    padding:0 10px;
    }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;    }    
        
#overlay{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    width: 100%;
    height: 500px;
    background-color: #000;
    filter:alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }
    

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }

* html>body .clearfix {
    display: inline-block; 
    width: 100%;
    }

* html .clearfix {
    /* Hides from IE-mac \*/
    height: 1%;
    /* End hide from IE-mac */
    }    
/* Last-Modified: 28/06/06 00:08:22 */
#GB_overlay {
    background-color: #000;
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    z-index: 100;
}

#GB_window {
    left: 0;
    top: 0;
    font-size: 1px;
    position: absolute;
    overflow: visible;
    z-index: 150;
}

#GB_window .content {
    width: auto;
    margin: 0;
    padding: 0;
}

#GB_frame {
    border: 0;
    margin: 0;
    padding: 0;
    overflow: auto;
    white-space: nowrap;
}


.GB_Gallery {
    margin: 0 22px 0 22px;
}

.GB_Gallery .content {
    background-color: #fff;
    border: 3px solid #ddd;
}

.GB_header {
    top: 10px;
    left: 0;
    margin: 0;
    z-index: 500;
    position: absolute;
    border-bottom: 2px solid #555;
    border-top: 2px solid #555;
}

.GB_header .inner {
    background-color: #333;
    font-family: Arial, Verdana, sans-serif;
    padding: 2px 20px 2px 20px;
}

.GB_header table {
    margin: 0;
    width: 97%;
    border-collapse: collapse;
}

.GB_header .caption {
    text-align: left;
    color: #eee;
    white-space: nowrap;
    font-size: 20px;
}

.GB_header .close {
    text-align: right;
}

.GB_header .close img {
    z-index: 500;
    cursor: pointer;
}

.GB_header .middle {
    white-space: nowrap;
    text-align: center;
}


#GB_middle {
    color: #eee;
}

#GB_middle img {
    cursor: pointer;
    vertical-align: middle;
}

#GB_middle .disabled {
    cursor: default;
}

#GB_middle .left {
    padding-right: 10px;
}

#GB_middle .right {
    padding-left: 10px;
}


.GB_Window .content {
    background-color: #fff;
    border: 3px solid #ccc;
    border-top: none;
}

.GB_Window .header {
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #999;
    border-left: 3px solid #ccc;
    border-right: 3px solid #ccc;
    margin: 0;

    height: 22px;
    font-size: 12px;
    padding: 3px 0;
    color: #333;
}

.GB_Window .caption {
    font-size: 12px;
    text-align: left;
    font-weight: bold;
    white-space: nowrap;
    padding-right: 20px;
}

.GB_Window .close { text-align: right; }
.GB_Window .close span { 
    font-size: 12px;
    cursor: pointer; 
}
.GB_Window .close img {
    cursor: pointer;
    padding: 0 3px 0 0;
}

.GB_Window .on { border-bottom: 1px solid #333; }
.GB_Window .click { border-bottom: 1px solid red; }

/* Start of CMSMS style sheet '02.1 Gallery CMotion horizontal' */


/* CMOTION GALLERY */



/* Please check gallerystyle.css and motiongallery.js for double-/hard-codings! */



div.largeview {

 text-align: center;

}



#motioncontainer {

margin-top: 5px;

height: 70px; /* according to gallery height */

width: 99.99%;

}



#motioncontainer a img {

border: 0; /* Set image border color */

margin: 0; /* chage this if you want some air inbetween images*/

height: 60px;

width:auto;

}



/* change cursor when clicking on image */

/*#motioncontainer a:active img {

cursor: progress;

}*/



#statusdiv {

background-color: #fff;

color: #FFBF00;/*#8f8f8f;*/

font-size: 65%;

font-weight: bold;

border: 0px solid #afafaf;

padding: .1em;

width: 100px;

position: absolute; /* Stop Editing Gallery Styles */

top: -10px;

left: 0px;

visibility: hidden;

}



#motioncontainer a:hover {

color: red; /* Dummy definition to overcome IE bug */

}



/* Those are already set in the template using

the "style"-tag for both of the divs. It seems to

work only this way - if someone could tell me why,

I'll appreciate!  */

/*

div#motioncontainer {

position:relative;

overflow:hidden;

}

div#motiongallery {

position:absolute;

left:0;

top:0;

white-space: nowrap;

}*/



/* END CMOTION GALLERY */

/* End of '02.1 Gallery CMotion horizontal' */

Ist alles unzensiert, sprich ich habs nicht durchgesehen und es kann nur als Leitlinie dazu dienen eine Lösung zu suchen

Forum für CMS/made simple

#1 09. Januar 2011 14:50

[GELÖST] Modul Album stellt Bilder im Hintergrund dar

#2 09. Januar 2011 21:19

Re: [GELÖST] Modul Album stellt Bilder im Hintergrund dar

#3 09. Januar 2011 21:25

Re: [GELÖST] Modul Album stellt Bilder im Hintergrund dar

#4 09. Januar 2011 22:11

Re: [GELÖST] Modul Album stellt Bilder im Hintergrund dar

Fußzeile des Forums