Container-Problem

Status
Nicht offen für weitere Antworten.
schleckerbeck

schleckerbeck

Erfahrenes Mitglied
Hi,

zerbrech mir jetzt schon eine Zeit lang den Kopf darüber:
Ich habe eine Gallerie, wo die Bilder erst klein, und dann per Klick groß in einem Div Container dargestellt werden sollen. Hab das ganze mit AJAX realisiert. Hab jetzt bloß noch ein blödes Problem mit den Containern: Per display:block; wird der Container, in dem die großen Bilder sind, versteckt (soll man ja am Anfang nicht sehen). Und wenn man jetzt auf ein Bild klickt, wird er per display:block; wieder angezeigt. Leider schiebt er mir dann den ganzen Inhalt (sprich die anderen Thumbnails) nach unten. Ich würde es aber gern so haben, dass der Container über den Thumbnails "schwebt". Hab schon fast alles mit display und visibility ausprobiert, leider ohne Ergebnis.

Hat da jemand nen Vorschlag?

Danke!
 
Wenn du den Container im Viewport positionierst, also aus dem Dokumentfluss herausnimmst, verschiebt sich auch nichts beim Ein- und Ausblenden.

Mit einer zusätzlichen Schichtpositionierung z-index lässt sich der Container über die Thumbnails legen.
 
Hab ich eigentlich auch gedacht. Hier mal meine CSS Datei:

PHP: 
#picshow {
    position:absolute;
    top:20px;
    height:400px;
    width:500px;
    border:1px solid #CCCCCC;
    background-color: #FFFFFF;
    display:block;
    overflow:auto;
    text-align:center;
}

Es wird mir aber trotzdem verschoben.

Danke, sc
 
Zeig doch bitte mal den vollständigen Quelltext (HTML + CSS) der Seite, denn anhand des gezeigten Codeschnippsel lässt sich das "Fehlverhalten" nicht nachvollziehen.
 
Also in diesem Beispiel verschiebt sich nichts, wenn der Container #picshow ein- und ausgeblendet wird:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
html, body, h1 {
    margin: 0;
    padding: 0;
}

div#picshow {
    position:absolute;
    top:20px;
    height:400px;
    width:500px;
    border:1px solid #CCCCCC;
    background-color: #FFFFFF;
    display:none;
    overflow:auto;
    text-align:center;
}

div#content {
    background: #efefef;
}
-->
</style>

<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.display == 'block'){
    obj[id].style.display = 'none';
    }
    else {
    obj[id].style.display = 'block';
    }
}
//-->
</script>

</head>
<body>

<div id="picshow">
     <a href="#" onclick="ShowHide('picshow')">&raquo; Hide 'picshow'</a>
</div>

<div id="content">
     <h1>Content</h1>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <a href="#" onclick="ShowHide('picshow')">&raquo; Show 'picshow'</a>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
     <p>some dummy text to expand the box</p>
</div>

</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück