Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag14.04.2012 um 09:37 (UTC)    
Titel: Hilfe, wie zentriere ich ein jquery-element?!

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!!!


Zuletzt bearbeitet von camel-testseite am 15.04.2012, 01:34, insgesamt 7-mal bearbeitet
Beitrag15.04.2012 um 00:30 (UTC)    
Titel:

Hallo,

ich habe dir die Stellen oben markiert.
Zum zentrieren: Das rote löschen und das blaue in auto abändern.
Das grüne fehlt, das orangene ist der Hintergrund, das braune die Schriftfarbe und für den Hover kannst du diese Eigenschaften mit der Pseudoklasse hover überschreiben:
Zitat:
.accordion h2:hover{
/* hier die Formatierungen */
}

______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 15.04.2012, 01:35, insgesamt einmal bearbeitet
Beitrag15.04.2012 um 08:51 (UTC)    
Titel:

Vielen Dank für Deine schnelle Hilfe. Zentriert ist jetzt, nur weiß ich leider nicht, wie ich das mit den Schalt im einzelnen hinbekomme, denn der Code des accordings, dessen optische Eigenschaften (der Schaltflächen) ich übernehmen möchte ist dieser:

Da blick ich leider nicht mehr durch.

.verticalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
width: 700px;
}

.verticalaccordion>ul>li {
display:block;
overflow: hidden;
margin: 0;
padding: 0;
list-style:none;
height:30px;
width: 700px;

/* Decorative CSS */
background-color:#f0f0f0;

/* CSS3 Transition Effect */
transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;

}

.verticalaccordion>ul>li>h3 {
display:block;
margin: 0;
padding:10px;
height:19px;

/* Decorative CSS */
border-top:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background: #cccccc;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); /* IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)"; /* IE 8 */

}

.verticalaccordion>ul>li>div {
margin:0;
overflow: auto;
padding:10px;
height:800px;
}

.verticalaccordion>ul>li:hover {
height: 900px;
}

.verticalaccordion:hover>ul>li:hover>h3 {
/* Decorative CSS */
color:#fff;
background: #000000;

/* CSS3 Gradient Effect */
background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)"; /* IE 8 */

}

.verticalaccordion>ul>li>h3:hover {
cursor:pointer;
}


Zuletzt bearbeitet von camel-testseite am 16.04.2012, 00:42, insgesamt einmal bearbeitet
Beitrag15.04.2012 um 23:43 (UTC)    
Titel:

Ich habe es nochmal farblich gemacht. Das orangene ist das orangene in deinem ersten post und das blaue der hover.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag16.04.2012 um 10:09 (UTC)    
Titel:

Tausend Dank, wenn man es erklärt, als sei ich ein Idiot, dann verstehe ich das prima ('Laughing')

Jetzt tritt leider folgender Fehler ein:
Wenn ich eine Setlist, hier z.B. http://pink-camel.de/Setlists.htm#1973-05-05
in einem Feld des Accordings einfügen möchte, so ist die According-Funktion nicht mehr gegeben und es treten weitere kleinere Fehler auf.
Da diese Setlist mit einem Anker versehen ist, wollte ich noch wissen, ob das According, wenn man auf den Verweis zum Anker klickt auch das According automatisch öffnet, in dem sich der Anker befindet?

Nochmals VIELEN Dank!!!!!


Code der Setlist:

<html>

<body>


<div align="center">
<table width="539" cellspacing="1" border="0">
<tbody>
<tr>
<td align="center" style="text-align: center">
<div><span style="font-family: Verdana; font-size: small"><a name="1973-05-05"></a></span></div>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<table width="539" cellspacing="1" border="1">
<tbody>
<tr>
<td align="center" bgcolor="#202020" style="text-align: center">
<div style="text-align: left"><span style="color: rgb(255,255,255)"><strong><span style="font-family: Verdana"><font size="4">1973-05-05</font><span style="font-family: Verdana; color: rgb(255,255,255)"><font size="4"> - Cossato, IT</font></span></span><span style="font-family: Verdana; font-size: larger">&nbsp;&nbsp; </span></strong><span style="font-family: Verdana; font-size: small"><br />
<b>Blue Caf&eacute;<br />
</b></span></span><span style="font-family: Verdana; color: rgb(255,255,255); font-size: small"><br />
Source: AUD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br />
Quality: B</span></div>
<hr />
<div><span style="font-family: Verdana; font-size: small;">
<table align="center" width="400" border="0" style="table-layout: fixed">
<colgroup><col width="42" /></colgroup><colgroup><col width="28" /></colgroup><colgroup><col width="285" /></colgroup><colgroup><col width="45" /></colgroup>
<tbody>
<tr>
<td style="text-align: center" colspan="4">&nbsp;</td>
</tr>
<tr>
<td style="text-align: center" colspan="4">&nbsp;</td>
</tr>
<tr>
<td style="text-align: center" colspan="4">&nbsp;</td>
</tr>
<tr>
<td style="text-align: center" colspan="4"><span style="font-family: Verdana; font-size: small"><strong><span style="font-family: Verdana; color: rgb(255,255,255); font-size: small">Dancing Cossatese</span></strong></span></td>
</tr>
<tr>
<td style="text-align: center" colspan="4">&nbsp;</td>
</tr>
<tr>
<td height="300" bgcolor="#ffffcc" style="text-align: center" colspan="4"><span style="font-family: Verdana; font-size: small">
<p align="center"><a target="_blank" href="http://pink-camel.de.tl/Artworks.htm#1973-05-05 - Cosatto, IT"><img width="250" height="250" src="http://img.webme.com/pic/p/pink-camel/1973-05-01_200.png" title="go to artworks" alt="" /></a></p>
</span></td>
</tr>
<tr>
<td style="text-align: center">&nbsp;</td>
<td style="text-align: center">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td style="text-align: center">&nbsp;</td>
<td style="text-align: center">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="#cccccc" style="text-align: center"><span style="font-family: Verdana; font-size: small"><strong> Disc</strong></span><strong><span style="font-family: Verdana; font-size: small">1</span></strong></td>
<td style="text-align: center"><span style="font-family: Verdana; font-size: small">&nbsp;&nbsp; </span></td>
<td align="center" valign="middle"><span style="font-family: Verdana; font-size: small">&nbsp; </span></td>
<td align="left" valign="top"><span style="font-family: Verdana">&nbsp; </span></td>
</tr>
<tr>
<td style="text-align: center;">&nbsp;</td>
<td align="center" valign="top"><font color="#ffffff"><span style="font-family: Verdana; font-size: small;"> 01.<br />
02.<br />
03.<br />
04.<br />
05.</span></font></td>
<td align="left" valign="top"><span style="font-family: Verdana; font-size: small;"><font color="#ffffff"> Tune up and speaking <br />
Lady Fantasy<br />
Mystic Queen<br />
Arubaluba<br />
The&nbsp;Travel</font></span><span style="font-family: Verdana; color: rgb(255, 255, 255); font-size: small;"> </span></td>
<td valign="top" style="text-align: center;"><span style="font-family: Verdana; font-size: small;"><font color="#ffffff"> 01:29<br />
15:18<br />
06:03<br />
08:09<br />
09:22</font></span></td>
</tr>
<tr>
<td style="text-align: center">&nbsp;</td>
<td align="center" valign="top">&nbsp;</td>
<td valign="top" colspan="2" style="text-align: right;">&nbsp;</td>
</tr>
<tr>
<td style="text-align: center">&nbsp;</td>
<td align="center" valign="top">&nbsp;</td>
<td valign="top" style="text-align: right;">&nbsp;<span style="font-family: Verdana; font-size: small"><span style="font-family: Verdana; color: rgb(255, 255, 255); font-size: small;"><strong>Total</strong></span><span style="font-family: Verdana; color: rgb(255,255,255); font-size: small"><strong> &nbsp;&nbsp; &nbsp;</strong></span></span><span style="font-family: Verdana; color: rgb(255,255,255); font-size: small"><strong><span style="font-family: Verdana; font-size: small"> </span></strong></span></td>
<td style="text-align: center;"><span style="font-family: Verdana; color: rgb(255,255,255); font-size: small"><strong><span style="font-family: Verdana; font-size: small">40:21</span></strong></span></td>
</tr>
</tbody>
</table>
&nbsp; &nbsp; </span><span style="font-family: Verdana; font-size: small">
<p>&nbsp;</p>
</span></div>
</td>
</tr>
</tbody>
</table>
</div>

</body>

</html>


Zuletzt bearbeitet von camel-testseite am 16.04.2012, 23:02, insgesamt einmal bearbeitet
Beitrag16.04.2012 um 22:07 (UTC)    
Titel:

Das rote in deinem letzten Post, musst du auch noch löschen.

camel-testseite hat Folgendes geschrieben:
Tausend Dank, wenn man es erklärt, als sei ich ein Idiot, dann verstehe ich das prima ('Laughing')

Das war nicht meine Absicht. Very Happy

camel-testseite hat Folgendes geschrieben:
Wenn ich eine Setlist, hier z.B. http://pink-camel.de/Setlists.htm#1973-05-05
in einem Feld des Accordings einfügen möchte, so ist die According-Funktion nicht mehr gegeben und es treten weitere kleinere Fehler auf.

kannst du das mal einfügen, damit man schauen kann. Was sind das für andere Fehler?

camel-testseite hat Folgendes geschrieben:
Da diese Setlist mit einem Anker versehen ist, wollte ich noch wissen, ob das According, wenn man auf den Verweis zum Anker klickt auch das According automatisch öffnet, in dem sich der Anker befindet?

Ich denke eher nicht, das müsste man wohl gegenprogrammieren. Aber machen wir erstmal eins nachdem anderen.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de