Forum

SpryTabbedPanels, div der höhe der inhalte anpassen

Erstellt von marcmaroc, 14.06.2010.



  1. marcmaroc

    marcmaroc Nicht mehr ganz neu hier

    1
    Dabei seit:
    01.04.2009
    Beiträge:
    235
    Geschlecht:
    männlich
    Ort:
    Saarlouis
    Software:
    CS 6 Premium
    Kameratyp:
    Canon PowerShot A490
    SpryTabbedPanels, div der höhe der inhalte anpassen
    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 (Text):
    1. @charset "utf-8";
    2. /* CSS Document */
    3.  
    4. *  {
    5.         padding:0;
    6.     margin:0;
    7. }
    8. html  {
    9.     height:100%;
    10. }
    11. body  {
    12.      
    13.     background-color:#dcdcdc;
    14.     font: 100%/1.5 verdana, arial, helvetica, sans-serif;
    15.     height:100%;
    16. }
    17. #warrper  {
    18.         width:1000px;
    19.         color:#000;
    20.         background-color:silver;
    21.         margin:0 auto;
    22.         height:100%;
    23. }
    24.  
    25. #center { min-height:100%;
    26.         background: url(../image/style/hintergrund.png);
    27.         background-repeat: repeat;
    28. }
    29.  
    30. #header  {
    31.         height:190px;
    32.         background: url(../image/style/banner.png) top
    33.         no-repeat;    
    34. }
    35.  
    36. h1  {
    37.         text-align:center;
    38.     padding:20px;
    39. }
    40.  
    41. #topmenu{    
    42.     height:18px;
    43.     width:1000px;
    44.     top:153px;
    45.     padding-left: 30px;
    46.     background: url(../image/style/hintergrund.png) no-repeat;
    47. }
    48.  
    49. #textbereich {
    50.     width:930px;
    51.     height:100%;
    52. }
    53.  
    54. #textbereich p  {
    55.         text-align:left;
    56.     padding:15px;
    57. }
    58. #footer  {
    59.     height:180px;
    60.     background:url(../image/style/footer.png) no-repeat;
    61.      margin-top:-50px;
    62.      padding: 0px 5px 15px 25px;
    63. }
    64. #footer p  {
    65.     text-align:center;
    66.     padding-top:0.8em;
    67. }
    68.  
    69. #footer a{
    70.     text-decoration:none;
    71. }
    72. #footer td{
    73.     padding-left: 5px;
    74.     text-align:left;
    75.     font-size:12px
    76. }
    77.  
    78. #footer table{
    79.     border: solid #97461a 2px;
    80. }
    81.  
    82. /*menu */
    83. .horizontalcssmenu ul{
    84. margin: 0;
    85. padding: 0;
    86. list-style-type: none;
    87.  
    88. }
    89.  
    90. /*Top level list items*/
    91. .horizontalcssmenu ul li{
    92. position: relative;
    93. display: inline;
    94. float: left;
    95. }
    96.  
    97. /*Top level menu link items style*/
    98. .horizontalcssmenu ul li a{
    99. display: block;
    100. width: 120px; /*Width of top level menu link items*/
    101. padding: 6px 5px;
    102. border: 0px solid #97461a;
    103. border-left-width: 0;
    104. text-decoration: none;
    105. /*background: url(../image/style/menu.png) center center no-repeat;*/
    106. color: black;
    107. font: bold 15px;
    108. height:20px;
    109. text-align:center;
    110. }
    111.    
    112. /*Sub level menu*/
    113. .horizontalcssmenu ul li ul{
    114. left: 0;
    115. top: 0;
    116. border-top: 1px solid #97461a;
    117. position: absolute;
    118. display: block;
    119. visibility: hidden;
    120. z-index: 100;
    121. }
    122.  
    123. /*Sub level menu list items*/
    124. .horizontalcssmenu ul li ul li{
    125. display: inline;
    126. float: none;
    127. }
    128.  
    129.  
    130. /* Sub level menu links style */
    131. .horizontalcssmenu ul li ul li a{
    132. width: 160px; /*width of sub menu levels*/
    133. font-weight: normal;
    134. padding: 2px 5px;
    135. background: #fff1a3;
    136. border-width: 0 1px 1px 1px;
    137. }
    138.  
    139. .horizontalcssmenu ul li a:hover{
    140. /*background: url(menubgover.gif) center center repeat-x;*/
    141. }
    142.  
    143. .horizontalcssmenu ul li ul li a:hover{
    144. background: #fff1a3;
    145. }
    146.  
    147. .horizontalcssmenu .arrowdiv{
    148. position: absolute;
    149. right: 0;
    150. /*background: transparent url(menuarrow.gif) no-repeat center left;*/
    151. }
    152.  
    153. * html p#iepara{ /*For a paragraph (if any) that immediately follows menu, add 1em top spacing between the two in IE*/
    154. padding-top: 1em;
    155. }
    156.    
    157. /* Holly Hack for IE \*/
    158. * html .horizontalcssmenu ul li { float: left; height: 1%; }
    159. * html .horizontalcssmenu ul li a { height: 1%; }
    160. /* End */
    161.  
    162. #textmar{
    163.     margin-left: 45px;
    164.     line-height:normal;
    165.     }
    166.  
    html:
    HTML:
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    3.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    4.   <TITLE>Fondation Helga Heidrich SOS Animaux</TITLE>
    5. <!-- Metadata generated by http://www.SiteSubmission.de/metatag.html -->
    6. <META NAME="keywords" content=" Marrakech, Maroc, Animaux, chiens, chats, ane, chevaux">
    7. <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.">
    8. <META NAME="Content-Language" content="fr, de, en">
    9. <META NAME="author" content="marc heidrich">
    10. <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
    11. <META NAME="revisit-after" CONTENT="20 days">
    12.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    13.     <meta name="title" content="Fondation Helga Heidrich SOS Animaux" />
    14.     <meta name="subject" content="Marrakech, Maroc,  Marrakesch, Marokko, Morocco, Animaux, chiens, chats, ane, chevaux, Tiere, Esel, Pferde, Hunde, Katzen" />    
    15.     <meta name="copyright" content="Fondation Helga Heidrich SOS Animaux" />    
    16.     <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. " />
    17.     <meta name="MSSmartTagsPreventParsing" content="true" />
    18. <script language="javascript"><!--
    19. var s_track = document.URL; var s_ref = document.referrer; var x = screen.width; var y = screen.height;
    20. document.write('<script src="http://fhh-sos-animaux.com/tracker.php?domain=1&track='+s_track+'&vref='+s_ref+'&x='+x+'&y='+y+'"><\/script>');
    21. //--></script>
    22. <script type="text/javascript" src="js/jquery.js"></script>
    23. <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    24. <script type="text/javascript" src="/js/yoxview/yoxview-init.js"></script>
    25. <script type="text/javascript">
    26. /* <![CDATA[ */
    27. google.load("jquery", "1.3.2");
    28. /* ]]> */
    29. <script type="text/javascript" src="js/csshorizontalmenu.js">
    30.  
    31. /***********************************************
    32.  
    33. * CSS Horizontal List Menu- by JavaScript Kit (www.javascriptkit.com)
    34. * Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/
    35. * This notice must stay intact for usage
    36. * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    37.  
    38. ***********************************************/
    39.  
    40. <script type="text/javascript">
    41.  
    42. /***********************************************
    43. * Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
    44. * This notice MUST stay intact for legal use
    45. * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    46. ***********************************************/
    47.  
    48. var delayb4scroll=500 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
    49. var marqueespeed=1 //Specify marquee scroll speed (larger is faster 1-10)
    50. var pauseit=1 //Pause marquee onMousever (0=no. 1=yes)?
    51.  
    52. ////NO NEED TO EDIT BELOW THIS LINE////////////
    53.  
    54. var copyspeed=marqueespeed
    55. var pausespeed=(pauseit==0)? copyspeed: 0
    56. var actualheight=''
    57.  
    58. function scrollmarquee(){
    59. if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
    60. cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
    61. else
    62. cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
    63. }
    64.  
    65. function initializemarquee(){
    66. cross_marquee=document.getElementById("vmarquee")
    67. cross_marquee.style.top=0
    68. marqueeheight=document.getElementById("marqueecontainer").offsetHeight
    69. actualheight=cross_marquee.offsetHeight
    70. if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
    71. cross_marquee.style.height=marqueeheight+"px"
    72. cross_marquee.style.overflow="scroll"
    73. return
    74. }
    75. setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
    76. }
    77.  
    78. if (window.addEventListener)
    79. window.addEventListener("load", initializemarquee, false)
    80. else if (window.attachEvent)
    81. window.attachEvent("onload", initializemarquee)
    82. else if (document.getElementById)
    83. window.onload=initializemarquee
    84.  
    85.  
    86. <link href="spry/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    87. <script src="spry/SpryTabbedPanels.js" type="text/javascript"></script>
    88.  
    89. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    90.  
    91.  
    92.  <!--[if lte IE 8]>
    93.  <style type="text/css">
    94.    
    95.  </style>
    96. <![endif]-->
    97.  
    98. <link href="css/ground.css" rel="stylesheet" type="text/css" />
    99. </head>
    100.  
    101.  
    102. <div id="warrper">
    103. <div id="center">
    104. <div id="header">
    105.   <p align="center"><img src="image/style/banner2.gif" width="820" height="160" align="absmiddle" vspace="40" hspace="50"></p>
    106. </div><!-- Ende #kopf-->
    107. <div id="topmenu">
    108.     <div class="horizontalcssmenu">
    109. <ul id="cssmenu1">
    110. <li ><a href="index.html" style="width:20px"><img src="image/style/frankreichk.gif" width="18" height="15" border="2" align="middle"></a></li>
    111. <li><a href="indexde.html"style="width:20px"><img src="image/style/deutschlandk.gif" width="18" height="15" border="2" align="middle"></a></li>
    112. <li><a href="indexen.html"style="width:20px" ><img src="image/style/grossbritannienk.gif" width="18" height="15" border="2" align="middle"></a></li>
    113. <li><a href="index.html"> Fondation</a>
    114.     <ul>
    115.         <li><a href="vorwortfr.html">Pr&eacute;mot de la pr&eacute;sidente</a></li>
    116.         <li><a href="wieallesfr.html">Comme tout commençait...</a></li>
    117.         <li><a href="fortsetzungfr.html">... Suite dans Marrakech</a></li>
    118.         <li><a href="unserezielefr.html">Nos objectifs</a></li>
    119.      </ul>
    120. </li>
    121. <li><a href="#"> Refuge</a>
    122.     <ul>
    123.         <li><a href="tierefr.html">Les Animaux</a></li>
    124.         <li><a href="gnadenhoffr.html">Le Refuge</a></li>
    125.         <li><a href="altegnadenhoffr.html">Le Refuge provisoire</a></li>
    126.      </ul>
    127. </li>
    128. <li><a href="#">Nos actions</a>
    129.     <ul>
    130.     <li><a href="sterilisationfr.html ">st&eacute;rilisation </a></li>
    131.     <li><a href="impfungfr.html">vaccination</a></li>
    132.     <li><a href="gesuchtfr.html">parrainage</a></li>
    133.     </ul>
    134. </li>
    135.  
    136. <li><a href="#">Support</a>
    137.     <ul>
    138.     <li><a href="bankverbindungfr.html">banque</a></li>
    139.     <li><a href="mitgliederfr.php">membres</a></li>
    140.     <li><a href="sponsorenfr.php">sponsor</a></li>
    141.     <li><a href="futterclubfr.php">Club de nourriture</a></li>
    142.     </ul>
    143. </li>
    144. <li><a href="#">Story</a>
    145.     <ul >
    146.         <li><a href="einsfr.html" style="width:80px">Tome 1</a></li>
    147.         <li><a href="zweifr.html" style="width:80px">Tome 2</a></li>
    148.     </ul>
    149. </li>
    150. <li><a href="#">Contact</a>
    151.     <ul>
    152.         <li><a href="wegbeschreibungfr.html">Adresse</a></li>
    153.         <li><a href="mailfr.html">E-mail</a></li>
    154.     </ul>
    155. </li>
    156. </ul>
    157. <br style="clear: left;" />
    158.  
    159.  
    160. </div>
    161. </div>
    162. <div id="textbereich">
    163.  <div id="TabbedPanels1" class="TabbedPanels">
    164.   <ul class="TabbedPanelsTabGroup">
    165.     <li class="TabbedPanelsTab" tabindex="0">Pri&egrave;re des animaux</li>    
    166.     <li class="TabbedPanelsTab" tabindex="0">Fondation Brigitte Bardot</li>
    167.     <li class="TabbedPanelsTab" tabindex="0">...suite &agrave; Marrakech</li>
    168.   </ul>
    169.   <div class="TabbedPanelsContentGroup">
    170.     <div class="TabbedPanelsContent"style=" font-size:14px">
    171.     <br />
    172.  <h5 style="margin:5px">Pri&egrave;re des animaux &agrave; Marrakech </h5><br />
    173. <img src="image/tiere/esel/gebet der pferde.jpg" alt="Maultier" align="right" />
    174.    <p style="margin:5px">S&rsquo;il te plait, donne-moi a manger
    175.            <div id="textmar"> donne-moi a boire<br />
    176.         ne me laisse pas sous un Soleil de plomb.</div>
    177.     <p style="margin:5px">S&rsquo;il te plait, donne-moi un abri propre
    178.         <div id="textmar">ne me bats pas et<br />
    179.         ne me donne pas des coups de pied,<br />
    180.         ne tire pas sur mes ren&eacute;s,<br />
    181.         mais parle mois plut&ocirc;t,<br />
    182.         laisse-moi le temps de te comprendre</div>
    183.     <p style="margin:5px">S&rsquo;il te plait, v&eacute;rifie mes dents
    184.         <div id="textmar">si je ne mange pas,<br />
    185.         v&eacute;rifie mes sabots et soigne ma robe</div>
    186.     <p style="margin:5px">S&rsquo;il te plait, donne-moi des m&eacute;dicaments
    187.         <div id="textmar">si je suis malade et si je me blesse,<br />
    188.         et a la fin de ma vie, ne me laisse pas souffrir.</div>
    189.      <p style="margin:5px">S&rsquo;il te plait, amen&eacute;-moi au maison retraite <br />
    190.                 de la FHH SOS Animaux&nbsp;!<br />
    191.               <br />
    192.               <strong>MERCI</strong><br/><img src="image/tiere/esel/gebet der pferde2.jpg" alt="Esel" />
    193.        <br/><br/>
    194.          
    195.        </div>    
    196.       <div class="TabbedPanelsContent">
    197.       <h3 style="margin: 0 5px">Chers amis des animaux !</h3>
    198.       <b style="float:right"><img src="image/artikel/bb.jpg" alt="Brigitte Bardot" /><br />
    199.       <h4>&nbsp;&nbsp;Brigitte Bardot</h4></b>
    200.  
    201. <p style="margin: 0 5px">Dois-je, ou pas ?<br>
    202. Cette question m'a tortur&egrave; sans cesse l'an pass&egrave;.
    203.  (2004)</p>
    204.         <br/><br/>
    205.          
    206.     </div>
    207.     <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>
    208.  
    209. <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>
    210. <br />
    211. <br/><br/>
    212.          
    213. </div>
    214.    
    215.       <div class="TabbedPanelsContent"><h3 style="margin: 0 5px">Statuten</h3>
    216. <IMG width=500 height=750 style="display:block; float:
    217.          
    218.    </div>
    219.   </div>
    220. </div>
    221.   </div><!-- Ende #textbereich-->
    222.  
    223. </div><!-- Ende #umhang_innen-->
    224.  
    225. <div id="footer">
    226.         <?php include("newstickerfr.html"); ?>
    227.         <br />
    228.   <table width="960" height="176" align="left">
    229.           <tr>
    230.             <td width="224">Fondation Helga Heidrich SOS Animaux<br /><br />
    231.             Sidi Abadd BP: 7066<br />
    232.             40 000 Marrakech
    233.         </td>
    234.         <td width="242" style="border-left:#000 solid 1px">Liens de Banque<br /><br />
    235.             Dresdner
    236.               Bank (<em><strong>Commerzbank)</strong></em>, Burgwedel<br>
    237.                  Code &eacute;tablissement bancaire: <br />250 80020 <br/>
    238. Num&eacute;ro de compte: 0552015000 <br />IBAN:
    239.                   DE 322 508 002 005 520 15000<BR />  
    240.                   SWIFT:
    241.                 DRESDEFF250</td>
    242.              
    243.          
    244.          <td width="194" style="border-left:#000 solid 1px">Attijariafabank,
    245.                   Marrakech<br />
    246. IBAN: <br/>
    247. 007 450 0000 00495 300 0121 66<br />
    248. SWIFT: BCMAMAMC</td>
    249.           <td width="246" style="border-left:#000 solid 1px">Faire une donnation en linge:                
    250.                         <input type="hidden" name="pay_to_email" value="fhh_sos_animaux@yahoo.de" />
    251.                       <form action="https://www.moneybookers.com/app/payment.pl" method="post" target="_blank">
    252.                     <p class="MsoNormal">Pour faire une donation avec moneybrookers,
    253.                 s&eacute;lectionnez simplement la somme que vous d&eacute;siriez
    254.                 vers&eacute; et la sorte de monnaie</p>
    255.                     <p>
    256.                       <input name="amount" type="text" value="0.00" />
    257.                         <input type="hidden" name="language" value="DE" />
    258.                         <select name="currency" size="1">
    259.                           <option value="EUR" selected="selected">EURO</option>
    260.                           <option value="USD">U.S. Dollar</option>
    261.                           <option value="GBP">British Pound</option>
    262.                         </select>
    263.                  
    264.                         <input type="hidden" name="confirmation_note" value="Thank you for your help!" />
    265.                         <input name="submit" type="submit" value="Pay!" />
    266.                   </p>
    267.             </form></td>
    268.       </table>
    269. </div><!-- Ende #fuss-->
    270. </div><!-- Ende #umhang -->
    271. <script type="text/javascript">
    272. <!--
    273. var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    274. //-->
    275.  
    276.  
    277. </body>
    278. </html>
    279.  
    280.  
     
    #1      
  2. dosonaro

    dosonaro Aktives Mitglied

    Dabei seit:
    12.10.2008
    Beiträge:
    364
    Geschlecht:
    männlich
    Ort:
    Wuppertal
    Software:
    Adobe Photoshop CS4
    SpryTabbedPanels, div der höhe der inhalte anpassen
    #2      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×