dwex
Erfahrenes Mitglied
Hallo Leute,
ich experimentiere gerade mit jQuery - Accordion und stehe von einem Problem wo ich nicht weiterkomme.
Ich habe folgenden Quellcode aus dem Beispiel:
Hier wird mir das Accordion in der Höhe von 480px angezeigt - das funktioniert bestens.
Jetzt habe ich mir gedacht ich positioniere das ganze absolut um die Höhe der Box jeweils auf die Seitenhöhe anzupassen wie ich es brauche. Dazu habe ich im CSS folgendes geändert.
Sodass ich eine Box erhalten welche von Oben immer 95px und von Unten immer 30px Abstand hat. (Wenn ich dieser Box eine Hintergrundfarbe verpasse dann sehe ich auch das die tatsächlich so hoch ist).
Leider wird mein Accordion jetzt "zusammengepresst" und nicht mehr in der gewollten Höhe angezeigt.
Kann mir bitte einer erklären was ich falsch mache und mir auf den richtigen Weg helfen.
Vielen Dank für eure Bemühungen im voraus.
ich experimentiere gerade mit jQuery - Accordion und stehe von einem Problem wo ich nicht weiterkomme.
Ich habe folgenden Quellcode aus dem Beispiel:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Example Page</title>
<link type="text/css" href="css/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function(){
// Accordion
$("#accordion").accordion({
fillSpace: true,
header: "h3",
active: 1 // Aktiviert den jeweiligen Tab - beginnend bei 0
});
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 10px; height: 100%;}
#accordion {
width: 200px;
height: 480px;
}
</style>
</head>
<body>
<!-- Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
<div>
<h3><a href="#">Testeintrag 1</a></h3>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>
<div>
<h3><a href="#">Second</a></h3>
<div>Phasellus mattis tincidunt nibh.</div>
</div>
<div>
<h3><a href="#">Third</a></h3>
<div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
</div>
</body>
</html>Jetzt habe ich mir gedacht ich positioniere das ganze absolut um die Höhe der Box jeweils auf die Seitenhöhe anzupassen wie ich es brauche. Dazu habe ich im CSS folgendes geändert.
HTML:
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 10px; height: 100%;}
#accordion {
position:absolute;
top:95px;
bottom:30px;
width: 200px;
}
</style>Sodass ich eine Box erhalten welche von Oben immer 95px und von Unten immer 30px Abstand hat. (Wenn ich dieser Box eine Hintergrundfarbe verpasse dann sehe ich auch das die tatsächlich so hoch ist).
Leider wird mein Accordion jetzt "zusammengepresst" und nicht mehr in der gewollten Höhe angezeigt.
Kann mir bitte einer erklären was ich falsch mache und mir auf den richtigen Weg helfen.
Vielen Dank für eure Bemühungen im voraus.
