SpryTabbedPanels, div der höhe der inhalte anpassen

marcmaroc · 14.06.2010

Hallo
Ich habe folgendes Problem:

in meiner Seite verwende ich SpryTabbedPanels in deinem div, jetzt sind die Inhalte unterschiedlich lang und der div container passt sich nicht an.
Gibt es eine möglichkeit das sich der div container an das Spry anpasst?
habe es mit % versucht, ist aber auch nicht richtig.
Leider ist der Quellcode etwas lang:

css:

Code:

@charset "utf-8";
/* CSS Document */

*  {
        padding:0;
    margin:0;
}
html  {
    height:100%;
}
body  {
     
    background-color:#dcdcdc;
    font: 100%/1.5 verdana, arial, helvetica, sans-serif;
    height:100%;
}
#warrper  {
        width:1000px;
        color:#000;
        background-color:silver;
        margin:0 auto;
        height:100%;
}

#center { min-height:100%;
        background: url(../image/style/hintergrund.png);
        background-repeat: repeat;
}

#header  {
        height:190px;
        background: url(../image/style/banner.png) top
        no-repeat;    
}

h1  {
        text-align:center;
    padding:20px;
}

#topmenu{    
    height:18px;
    width:1000px;
    top:153px;
    padding-left: 30px;
    background: url(../image/style/hintergrund.png) no-repeat;
}

#textbereich {
    width:930px;
    height:100%;
}

#textbereich p  {
        text-align:left;
    padding:15px;
}
#footer  {
    height:180px;
    background:url(../image/style/footer.png) no-repeat;
     margin-top:-50px;
     padding: 0px 5px 15px 25px;
}
#footer p  {
    text-align:center;
    padding-top:0.8em;
}

#footer a{
    text-decoration:none;
}
#footer td{
    padding-left: 5px;
    text-align:left;
    font-size:12px
}

#footer table{
    border: solid #97461a 2px;
}

/*menu */
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;

}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 120px; /*Width of top level menu link items*/
padding: 6px 5px;
border: 0px solid #97461a;
border-left-width: 0;
text-decoration: none;
/*background: url(../image/style/menu.png) center center no-repeat;*/
color: black;
font: bold 15px;
height:20px;
text-align:center;
}
    
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
border-top: 1px solid #97461a;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}

/*Sub level menu list items*/
.horizontalcssmenu ul li ul li{
display: inline;
float: none;
}


/* Sub level menu links style */
.horizontalcssmenu ul li ul li a{
width: 160px; /*width of sub menu levels*/
font-weight: normal;
padding: 2px 5px;
background: #fff1a3;
border-width: 0 1px 1px 1px;
}

.horizontalcssmenu ul li a:hover{
/*background: url(menubgover.gif) center center repeat-x;*/
}

.horizontalcssmenu ul li ul li a:hover{
background: #fff1a3;
}

.horizontalcssmenu .arrowdiv{
position: absolute;
right: 0;
/*background: transparent url(menuarrow.gif) no-repeat center left;*/
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
    
/* Holly Hack for IE \*/
* html .horizontalcssmenu ul li { float: left; height: 1%; }
* html .horizontalcssmenu ul li a { height: 1%; }
/* End */

#textmar{
    margin-left: 45px;
    line-height:normal;
    }

html:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <TITLE>Fondation Helga Heidrich SOS Animaux</TITLE> 
<!-- Metadata generated by http://www.SiteSubmission.de/metatag.html --> 
<META NAME="keywords" content=" Marrakech, Maroc, Animaux, chiens, chats, ane, chevaux"> 
<META NAME="description" content="La Fondation Helga Heidrich SOS Animaux vient en aide aux animaux abandonnée et maltraitait de Marrakech et ses régions. La Fondation fait des actions stérilisation et de vaccination."> 
<META NAME="Content-Language" content="fr, de, en"> 
<META NAME="author" content="marc heidrich"> 
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW"> 
<META NAME="revisit-after" CONTENT="20 days"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="title" content="Fondation Helga Heidrich SOS Animaux" />
    <meta name="subject" content="Marrakech, Maroc,  Marrakesch, Marokko, Morocco, Animaux, chiens, chats, ane, chevaux, Tiere, Esel, Pferde, Hunde, Katzen" />    
    <meta name="copyright" content="Fondation Helga Heidrich SOS Animaux" />    
    <meta name="abstract" content="La Fondation Helga Heidrich SOS Animaux vient en aide aux animaux abandonnée et maltraitait de Marrakech et ses régions. La Fondation fait des actions stérilisation et de vaccination. " />
    <meta name="MSSmartTagsPreventParsing" content="true" />
<script language="javascript"><!--
var s_track = document.URL; var s_ref = document.referrer; var x = screen.width; var y = screen.height;
document.write('<script src="http://fhh-sos-animaux.com/tracker.php?domain=1&track='+s_track+'&vref='+s_ref+'&x='+x+'&y='+y+'"><\/script>');
//--></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/yoxview/yoxview-init.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
google.load("jquery", "1.3.2");
/* ]]> */
</script>
<script type="text/javascript" src="js/csshorizontalmenu.js">

/***********************************************

* CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>
<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee


</script>
<link href="spry/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script src="spry/SpryTabbedPanels.js" type="text/javascript"></script>

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">


 <!--[if lte IE 8]>
  <style type="text/css">
    
  </style>
<![endif]-->

<link href="css/ground.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="warrper">
<div id="center">
<div id="header">
  <p align="center"><img src="image/style/banner2.gif" width="820" height="160" align="absmiddle" vspace="40" hspace="50"></p>
</div><!-- Ende #kopf-->
<div id="topmenu">
    <div class="horizontalcssmenu">
<ul id="cssmenu1">
<li ><a href="index.html" style="width:20px"><img src="image/style/frankreichk.gif" width="18" height="15" border="2" align="middle"></a></li>
<li><a href="indexde.html"style="width:20px"><img src="image/style/deutschlandk.gif" width="18" height="15" border="2" align="middle"></a></li>
<li><a href="indexen.html"style="width:20px" ><img src="image/style/grossbritannienk.gif" width="18" height="15" border="2" align="middle"></a></li>
<li><a href="index.html"> Fondation</a>
    <ul>
        <li><a href="vorwortfr.html">Pr&eacute;mot de la pr&eacute;sidente</a></li>
        <li><a href="wieallesfr.html">Comme tout commençait...</a></li>
        <li><a href="fortsetzungfr.html">... Suite dans Marrakech</a></li>
        <li><a href="unserezielefr.html">Nos objectifs</a></li>
     </ul>
</li>
<li><a href="#"> Refuge</a>
    <ul>
        <li><a href="tierefr.html">Les Animaux</a></li>
        <li><a href="gnadenhoffr.html">Le Refuge</a></li>
        <li><a href="altegnadenhoffr.html">Le Refuge provisoire</a></li>
     </ul>
</li>
<li><a href="#">Nos actions</a>
    <ul>
    <li><a href="sterilisationfr.html ">st&eacute;rilisation </a></li>
    <li><a href="impfungfr.html">vaccination</a></li>
    <li><a href="gesuchtfr.html">parrainage</a></li>
    </ul>
</li>

<li><a href="#">Support</a>
    <ul>
    <li><a href="bankverbindungfr.html">banque</a></li>
    <li><a href="mitgliederfr.php">membres</a></li>
    <li><a href="sponsorenfr.php">sponsor</a></li>
    <li><a href="futterclubfr.php">Club de nourriture</a></li>
    </ul>
</li>
<li><a href="#">Story</a>
    <ul >
        <li><a href="einsfr.html" style="width:80px">Tome 1</a></li>
        <li><a href="zweifr.html" style="width:80px">Tome 2</a></li>
    </ul>
</li>
<li><a href="#">Contact</a>
    <ul>
        <li><a href="wegbeschreibungfr.html">Adresse</a></li>
        <li><a href="mailfr.html">E-mail</a></li>
    </ul>
</li>
</ul>
<br style="clear: left;" />


</div>
</div>
<div id="textbereich">
 <div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Pri&egrave;re des animaux</li>    
    <li class="TabbedPanelsTab" tabindex="0">Fondation Brigitte Bardot</li>
    <li class="TabbedPanelsTab" tabindex="0">...suite &agrave; Marrakech</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"style=" font-size:14px">
    <br />
 <h5 style="margin:5px">Pri&egrave;re des animaux &agrave; Marrakech </h5><br />
<img src="image/tiere/esel/gebet der pferde.jpg" alt="Maultier" align="right" />
   <p style="margin:5px">S&rsquo;il te plait, donne-moi a manger
           <div id="textmar"> donne-moi a boire<br /> 
        ne me laisse pas sous un Soleil de plomb.</div>
    <p style="margin:5px">S&rsquo;il te plait, donne-moi un abri propre
        <div id="textmar">ne me bats pas et<br />
        ne me donne pas des coups de pied,<br />
        ne tire pas sur mes ren&eacute;s,<br /> 
        mais parle mois plut&ocirc;t,<br /> 
        laisse-moi le temps de te comprendre</div>
    <p style="margin:5px">S&rsquo;il te plait, v&eacute;rifie mes dents
        <div id="textmar">si je ne mange pas,<br />
        v&eacute;rifie mes sabots et soigne ma robe</div>
    <p style="margin:5px">S&rsquo;il te plait, donne-moi des m&eacute;dicaments
        <div id="textmar">si je suis malade et si je me blesse,<br />
        et a la fin de ma vie, ne me laisse pas souffrir.</div>
     <p style="margin:5px">S&rsquo;il te plait, amen&eacute;-moi au maison retraite <br />
                de la FHH SOS Animaux&nbsp;!<br />
              <br />
              <strong>MERCI</strong><br/><img src="image/tiere/esel/gebet der pferde2.jpg" alt="Esel" /> 
       <br/><br/>
          
       </div>    
      <div class="TabbedPanelsContent">
      <h3 style="margin: 0 5px">Chers amis des animaux !</h3>
      <b style="float:right"><img src="image/artikel/bb.jpg" alt="Brigitte Bardot" /><br />
      <h4>&nbsp;&nbsp;Brigitte Bardot</h4></b>
 
<p style="margin: 0 5px">Dois-je, ou pas ?<br>
Cette question m'a tortur&egrave; sans cesse l'an pass&egrave;.
 (2004)</p>
        <br/><br/>
          
    </div>
    <div class="TabbedPanelsContent" ><h2 style="margin: 0 5px">... et la suite à Marrakech </h2> <br /> <p style="float:right"> <img src="image/tiere/esel/artikel chaleur torride coupspied.jpg" /><br /><img src="image/tiere/esel/articel beton et chaleur.jpg" /><br /><img src="image/tiere/esel/artikel vegetaria zu sein.jpg" /><br><img src="image/tiere/esel/artikel scene de chaque jour.jpg" /></p><br /><br /><h3>Alltags Szenen</h3>
  
<p style="margin: 0 5px">Une misère indescriptible règnere aide pour que cessent, au plus vite, les supplices infligés aux animaux. </p>
<br />
<br/><br/>
          
</div>
    
      <div class="TabbedPanelsContent"><h3 style="margin: 0 5px">Statuten</h3>
<IMG width=500 height=750 style="display:block; float:
          
    </div>
  </div>
</div>
  </div><!-- Ende #textbereich-->

</div><!-- Ende #umhang_innen-->

<div id="footer">
        <?php include("newstickerfr.html"); ?>
        <br />
  <table width="960" height="176" align="left">
          <tr>
            <td width="224">Fondation Helga Heidrich SOS Animaux<br /><br />
            Sidi Abadd BP: 7066<br />
            40 000 Marrakech
        </td>
        <td width="242" style="border-left:#000 solid 1px">Liens de Banque<br /><br />
            Dresdner
              Bank (<em><strong>Commerzbank)</strong></em>, Burgwedel<br>
                 Code &eacute;tablissement bancaire: <br />250 80020 <br/>
Num&eacute;ro de compte: 0552015000 <br />IBAN:
                  DE 322 508 002 005 520 15000<BR />  
                  SWIFT:
                DRESDEFF250</td>
             
         
         <td width="194" style="border-left:#000 solid 1px">Attijariafabank,
                  Marrakech<br />
IBAN: <br/>
007 450 0000 00495 300 0121 66<br />
SWIFT: BCMAMAMC</td>
          <td width="246" style="border-left:#000 solid 1px">Faire une donnation en linge:                
                        <input type="hidden" name="pay_to_email" value="fhh_sos_animaux@yahoo.de" />
                      <form action="https://www.moneybookers.com/app/payment.pl" method="post" target="_blank">
                    <p class="MsoNormal">Pour faire une donation avec moneybrookers,
                s&eacute;lectionnez simplement la somme que vous d&eacute;siriez
                vers&eacute; et la sorte de monnaie</p>
                    <p>
                      <input name="amount" type="text" value="0.00" />
                        <input type="hidden" name="language" value="DE" />
                        <select name="currency" size="1">
                          <option value="EUR" selected="selected">EURO</option>
                          <option value="USD">U.S. Dollar</option>
                          <option value="GBP">British Pound</option>
                        </select>
                  
                        <input type="hidden" name="confirmation_note" value="Thank you for your help!" />
                        <input name="submit" type="submit" value="Pay!" />
                  </p>
            </form></td>
      </table>
</div><!-- Ende #fuss-->
</div><!-- Ende #umhang -->
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>


</body>
</html>

dosonaro · 16.06.2010

AW: SpryTabbedPanels, div der höhe der inhalte anpassen

verwendest du jquery oder mootools?

Für jQuery gibt es dieses Plugin:

Für Mootools dieses schöne "Plugin" http://blog.creonfx.com/javascript/equal-height-two-three-columns-div-layout

100% height in der CSS kannst du vergessen und brauchst du dann sowieso auch nicht.