DE - Allgemein • toggle | HTML & CSS

25.06.2012, 17:12 - Marceld - webSPELL friend - 617 Posts
hallo,...

habe folgende togglefunktion aus HTML+CSS zusammengebaut:

[toggle=HTML-Code]
Code:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          
          <title>mehrfach togglebar</title>
          
          <link rel="stylesheet" href="styles.css">
          <script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
        </script>
     </head>
<body onLoad="MM_preloadImages('toogle_bar2_r.jpg','toggle1_2_r.jpg','toggle2_2_r.jpg','toggle3_2_r.jpg')">

<div id="wrapper">

<ul class="menu">
        <table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                   <td width="25"><img src="toggle1.jpg" width="25" height="30" alt="toggle1"></td>
                   <td width="25"><img src="toggle2.jpg" width="25" height="30" alt="toggle2"></td>
                    <td width="610" class="toggle3">
                   Newsbox mit Togglefunktion...
              </td>
                 </tr>
          </table>
                 <ul>
            <table width="660" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td class="news_text">
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    </td>
                      </tr>
               </table>
               </ul>
     <li id="two">
      <table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                   <td width="25"><img src="toggle1_1.jpg" width="25" height="30" alt="toggle3"></td>
                   <td width="25" height="30"><a href="#two" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image11','','toggle1_2_r.jpg',1)"><img src="toggle1_2.jpg" alt="toggle4" name="two" id="two" width="25" height="30" border="0"></a></td>
                    <td width="610" class="toggle_1_3">25.06.2012 Lorem Ipsum dolor...
              </td>
                 </tr>
       </table>
          <ul>
               <table width="660" border="0" cellspacing="0" cellpadding="0">
                 <tr>
                         <td class="news_text">
                          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum doloo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justrem ipsum dolor sit amet.
                  </td>
                 </tr>
            </table>
         </ul>
       </li>
          <li id="three">
             <table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td width="25"><img src="toggle2_1.jpg" width="25" height="30" alt="toggle5"></td>
                        <td width="25"><a href="#three" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image12','','toggle2_2_r.jpg',1)"><img src="toggle2_2.jpg" alt="toggle6" name="Image12" width="25" height="30" border="0"></a></td>
                        <td width="610" class="toggle_2_3">22.06.2012 Ipsum dolor Lorem</td>
                      </tr>
               </table>
               <ul>
                    <table width="660" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td class="news_text">
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </td>
                      </tr>
               </table>
               </ul>
          </li>
          <li id="four">
             <table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
            <tr>
                        <td width="25"><img src="toggle2_1.jpg" width="25" height="30" alt="toggle7"></td>
                        <td width="25"><a href="#four" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','toggle2_2_r.jpg',1)"><span><img src="toggle2_2.jpg" alt="toggle8" name="Image13" width="25" height="30" border="0"></span></a></td>
                        <td width="610" class="toggle_2_3">
                         20.06.2012 Ipsum dolor Lorem
                    </td>
                      </tr>
               </table>
               <ul>
                    <table width="660" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td class="news_text">
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </td>
                      </tr>
               </table>
               </ul>
          </li>
          <li id="five">
             <table width="660" height="30" border="0" cellspacing="0" cellpadding="0">
            <tr>
                        <td width="25"><img src="toggle3_1.jpg" width="25" height="30" alt="toggle13" border="0"></td>
                        <td width="25"><a href="#five" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','toggle3_2_r.jpg',1)"><img src="toggle3_2.jpg" alt="toggle14" name="Image10" width="25" height="30" border="0"></a></td>
                        <td width="610" class="toggle_3_3">
                         17.06.2012 Ipsum dolor Lorem
                    </td>
                      </tr>
               </table>
               <ul>
                    <table width="660" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td class="news_text">
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
                    </td>
                      </tr>
               </table>
               </ul>
          </li>
  </ul>
</div>

</body>
</html>
[/toggle] [toggle=CSS-Code]
Code:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
#wrapper {     
     width: 660px;
     margin: auto;
     font-size: 0;
     background-color:#6a5548;
}

ul, ul ul {
     margin-top:0;
     padding: 0;
     list-style: none;
     color: #ffffff;
}

.news_text{
     background-color:#6a5548;
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     text-align:justify;
     color:#FFF;
     padding-left:25px;
     padding-right:25px;
     padding-top:10px;
     padding-bottom:10px;
     }

.toggle3{
     height:30px;
     background-image: url(toggle3.jpg);
     background-repeat:no-repeat;
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     font-weight:bold;
     color:fff;
     padding-left:10px;
     }
     
.toggle_1_3{
     height:30px;
     background-image: url(toggle1_3.jpg);
     background-repeat:no-repeat;
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     font-weight:bold;
     color:fff;
     padding-left:10px;
     }

.toggle_2_3{
     height:30px;
     background-image: url(toggle2_3.jpg);
     background-repeat:no-repeat;
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     font-weight:bold;
     color:fff;
     padding-left:10px;
     }

.toggle_3_3{
     height:30px;
     background-image: url(toggle3_3.jpg);
     background-repeat:no-repeat;
     font-family:Verdana, Geneva, sans-serif;
     font-size:12px;
     font-weight:bold;
     color:fff;
     padding-left:10px;
     }
     
/*Versteckte Texte*/

.menu > li > ul {
     height: 0;
     overflow: hidden;
     
     opacity: 0; 
       filter: alpha(opacity=0);
     
     -webkit-transition: opacity 0.9s ease-in-out;
     -moz-transition: opacity 0.9s ease-in-out;
     -o-transition: opacity 0.9s ease-in-out;
     -ms-transition: opacity 0.9s ease-in-out;
     transition: opacity 0.9s ease-in-out;
}

.menu > li:target > ul {
    height: auto; 
    
     opacity: 1; 
       filter: alpha(opacity=100);
}

[/toggle]

das was ich mir jetzt noch gern basteln würde wären
die selben toggleeigenschaften wie hier im webspellforum:

1
beim aufklappen meines toggels soll die seite nicht nach oben springen (anker/ a href zuweisungs problem)

2
beim wiederholten klicken meines toggels soll sich der toggle wieder schließen.
aktuell schließt der toggle nur wenn ich das nächste toggle öffne
(soll auch so bleiben das nicht mehr als 1 toggle offen bleibt),
jedoch soll man das eine offene toggle auch bei bedarf schließen können so das wieder alle geschlossen sind.

zu 1
habe folgenden link ergooglt:
http://forum.de.selfht...2009/10/t191450/#m1276945

das man statt:
a href="#two"

a href keine zuweisung gibt sondern:
a href="" onclick="return false"

problem ist dann bei meinem toggle nur das er sich nicht mehr aufklappt...

zu 2
-noch keine passende lösungshilfe ergooglt-

wäre super wenn jemand weiss wie ich die 2 probleme beheben kann...

lg marcel
-für jeden tip dankbar-

www.Marcel-Draeger.de | [url=http://www.facebook.com/pages/Marcel-Draeger/150774091653181]"Facebook"[/url] | [url=https://twitter.com/Marceldraeger]"Twitter" [/url] ------------------------------------------------- Kreativität überzeugt durch gute Idee
 
26.06.2012, 11:19 - he1OO - webSPELL user - 378 Posts
Hi,

Was du immer für fragen hast amüsiert

Wäre dafür ein Entwickler Froum net besser geeignet.

Denke mal du hast hier Javascript im Titel vergessen zwinkern

Aber um dein Problem zu lösen könntest du einen Array an eine Javascript funktion schicken.

Z.b. einen string mit (toggel1, toggel2, toggel3, toggel4, usw)
Diesen dann per javascript in einen array packen und ein for schleife machen beim drücken.

Z.B. könntest du eine funktion bauen

machmichauf('ichbintoggle3', 'toggelArray);

Onclick.

In der funktion machst du nix anderes als alle toogels die nicht "ichbintoggle3" zu. Wärend du beim der if abfrage == einfach guckst ist das teil offen oder zu.

So kannst du das ganze eigentlich mir 3-4 zeilen umsetzen.

Wenn du noch einen schönen moveeffekt brauchst bietet sich jquery an da kannst du das ganze im prinzip mit einer Zeile umsetzen den move.

natürlich setzt das vorraus das du die bei toggle1 usw. einfach die IDs übergibst. Und dann mit getElementbyId auf die zugreifst.
Beim öffnen und schliesen könntest du das ja auch einfach dann wenn sie offen ist auf ID_open ändern. Dann tust du dir auch leichter beim checken ob es offen oder zu ist.

mfg he1OO

[center]Rechtschreibfehler sind gewollt und zur allgemeinen Belustigung da HaVe FuN[/center] --- Support gebe ich auch ohne Homepage-Link, ohne Geld und ohne das ich mich über Rechtschreibung oder Art der Ausdrucksform Aufrege.
 
26.06.2012, 12:44 - Marceld - webSPELL friend - 617 Posts
hi und thx he100,

nach einer langen nacht habe ich das problem vor deiner antwort hier gelöst,...
musst dafür mein kopf in Java hauchen,...
java möglichkeiten sind schon schön aber nur wenn man sie richtig versteht und anwenden kann^^

daher bin ich auf minimalistische weise ans ziel (nicht ans ende!) gekommen:

Problem gelöst!

[toggle=HTML-Code]
Code:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
<!DOCTYPE html>
<html lang="en">
     <head>
          <meta charset="utf-8">
          
          <title>Mehrfach-Toggle</title>
<!-------- SCRIPTE ANFANG -------->

          <link rel="stylesheet" href="styles.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
          
<!-------- SCRIPTE ANFANG -------->
                    
     </head>
<body>

<!-------- TOGGLEBOX ANFANG -------->            
<div class="togglebox_news">
     <ul class="newsbox_toggle">
         <li class="einleitung_h1">Dieses Toggle infortmiert Sie über...</li>
               <ul>
                    <li class="einleitung_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et eabore et dolore magna aliquyam erat, sed diam voluptua.</li>
            </ul>
          
          <li><a href="#">Marcel </a>
               <ul>
                    <li class="toggle_texte">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et eabore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo do rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut lalores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
            </ul>
       </li>
      
          <li><a href="#">lernt</a>
               <ul>
                    <li class="toggle_texte">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</li>
               </ul>
          </li>
          <li><a href="#">jetzt </a>
               <ul>
                    <li class="toggle_texte">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
               </ul>
          </li>
          <li><a href="#">auch</a>
               <ul>
                    <li class="toggle_texte">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
               </ul>
          </li>
          <li><a href="#">Java</a>
               <ul>
                    <li class="toggle_texte">
                     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolo sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
               </ul>
          </li>
     </ul>

</div>

<script type="text/javascript">
     $(function() {
     
         var newsbox_toggle_ul = $('.newsbox_toggle > li > ul'),
                newsbox_toggle_a  = $('.newsbox_toggle > li > a');
         
         newsbox_toggle_ul.hide();
     
         newsbox_toggle_a.click(function(e) {
             e.preventDefault();
             if(!$(this).hasClass('active')) {
                 newsbox_toggle_a.removeClass('active');
                 newsbox_toggle_ul.filter(':visible').slideUp('normal');
                 $(this).addClass('active').next().stop(true,true).slideDown('normal');
             } else {
                 $(this).removeClass('active');
                 $(this).next().stop(true,true).slideUp('normal');
             }
         });
     
     });
</script>
<!--TOGGLESBOX ENDE-->


</body>
</html>
[/toggle] [toggle=CSS-Code]
Code:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
@charset "UTF-8";
/* CSS Document */

     
.togglebox_news{
     float:left;
     margin: 0 auto;
     width:660px;
     font-size: 12px;
     background-color:#6a5548;
}

.einleitung_h1{
     height:30px;
     padding-left:50px;
     padding-top:10px;
     background-color:#2e241e;
     font-family: Verdana, Geneva, sans-serif;
     font-size: 14px;
     font-weight:bold;
     color: #ffffff;
     }

.einleitung_text {
     background-color:#6a5548;
     width: 560px;
     height:auto;
     padding-left:50px;
     padding-right:50px;
     padding-top:10px;
     padding-bottom:10px;
     display: block;
     position: relative;
     font-family: Verdana, Geneva, sans-serif;
     font-size: 12px;
     text-align:justify;
     color: #ffffff;
}

a {     text-decoration: none;}

ul, ul ul {
     margin: 0;
     padding: 0;
     list-style: none;
}

.newsbox_toggle > li > a {
     background-color:#2e241e;
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(63, 50, 42)),to(rgb(46, 36, 30)));
     background-image: -webkit-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: -moz-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: -o-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: -ms-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#3f322a', EndColorStr='#2e241e');
     width: 600px;
     height:25px;
     line-height: 2.75em;
     padding-left:60px;
     padding-top:0px;
     padding-bottom:10px;
     display: block;
     position: relative;
     font-family: Verdana, Geneva, sans-serif;
     color: #9a9898;
}

.newsbox_toggle > li > a:hover, .newsbox_toggle > li > a.active {
     background-color: #2e241e;
     background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(63, 50, 42)),to(rgb(46, 36, 30)));
     background-image: -webkit-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: -moz-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: -o-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: -ms-linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     background-image: linear-gradient(top, rgb(63, 50, 42), rgb(46, 36, 30));
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#3f322a', EndColorStr='#2e241e');
}

.newsbox_toggle > li > a:before {
     content: '';
     background-image: url(toggle_button.jpg);
     background-repeat: no-repeat;
     font-size: 36px;
     height: 25px;
       width: 1em;
     position: absolute;
       left: 25px;
     top: 25%;
}

.toggle_texte {
     background-color:#6a5548;
     width: 560px;
     height:auto;
     padding-left:50px;
     padding-right:50px;
     padding-top:10px;
     padding-bottom:10px;
     display: block; 
     position: relative;
     font-family: Verdana, Geneva, sans-serif;
     font-size: 12px;
     line-height:16px;
     text-align:justify;
     color: #fff;
}
[/toggle]

lg marcel





www.Marcel-Draeger.de | [url=http://www.facebook.com/pages/Marcel-Draeger/150774091653181]"Facebook"[/url] | [url=https://twitter.com/Marceldraeger]"Twitter" [/url] ------------------------------------------------- Kreativität überzeugt durch gute Idee