Hallo,
habe ein Problem mit einem According. Ich bekomme dies auf Teufel-komm-raus nicht zentriert.
Dieses befindet sich auf folgender Seite:
http://camel-testseite.de.tl/Titel-der-neuen-Seite.htm
<br />
<br />
<div class="accordion" id="accordion-js">
<h2>Aliquam tincidunt mauris eu risus</h2>
<p style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
<h2>Vestibulum auctor dapibus neque</h2>
<div>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
<p style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
</div>
<h2>Aenean ultricies mi vitae est</h2>
<p style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
<h2>Consectetur adipisicing elit, sed do eiusmod tempor</h2>
<p style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
<h2>Praesent dapibus, neque id cursus</h2>
<p style="text-align: justify;">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum.sis luctus, metus</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <script>window.jQuery || document.write("<script src='../../js/libs/jquery-1.6.3.min.js'>x3C/script>")</script> <script type="text/javascript">
$(document).ready(function(){
$('#accordion-js').find('h2').click(function(){
$(this).next().slideToggle();
}).next().hide();
});
</script>
Der für das according zuständige Code vefindet sich in CSS-Code ohne Style tags:
.accordion{border: 1px solid #ddd; border-top: none; margin: 10px
0;
float: left; width: 650px; position: relative;}
.accordion a{display: block; text-decoration: none;}
.accordion h2, .accordion a{
background-color: #fff; background-image: url(../img/gradient.jpg);
background-image: -moz-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -ms-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -o-linear-gradient(bottom, #f1f1f1, #fff);
background-image: -webkit-linear-gradient(bottom, #f1f1f1, #fff);
background-image: linear-gradient(bottom, #f1f1f1, #fff); border-top: 1px solid #ddd;
color: #222; font: 14px/30px 'Verdana', sans-serif; height: 30px; margin: 0; padding: 0; text-indent: 10px;}
p{color: #fff; font: 12px/18px 'Verdana', sans-serif; padding: 20px 10px;}
#accordion-css3{float: right;}
a[href^="#accordion"] + *{display: none;}
#accordion-css3 :target{display: block;}
/* HTML 5 */
#accordion-html5{clear: both; margin-top: 20px;}
details summary::-webkit-details-marker{display: none;}
/* Page styling*/
.accordion:before{color: #F0498D; font-weight: bold; position: absolute; left: 0; top: -20px;}
#accordion-js:before{content: 'jQuery Method';}
#accordion-css3:before{content: 'CSS3 Method';}
#accordion-html5:before{content: 'HTML5 Method';}
Wenn es jetzt irgendjemanden gelingt, dieses according zu zentrieren, kann er mir später die "Schaltflächen des according rein optisch so abändern, dass sie denen des folgenden accordings gleichen?
http://camel-testseite.de.tl/xxx.htm Hier ist ein anderer Farb-Verlauf sowie Farbwechsel der einzelnen Schaltflächen und der Schrift zu sehen.
Wäre schon super. VIELEN DANK IM VORAUS!!!
')
