Bitte um Hilfe für meine Problem mit dem Swop Ein- und Ausklapp-Text

03.07.2016 19:12 (zuletzt bearbeitet: 03.07.2016 19:18)
avatar  Mrs.DAU
#1
avatar

Hallo liebes Forum,

ich bin in HTML und CSS absoluter Anfänger. Nun möchte ich gerne auf meiner allerersten Jimdo-Seite einen Ausklapp-Text als eine Art Frage+Antwort Spiel.
Der Code für so ein »Swap-Dings« hab ich im Internet gefunden. Ich konnte ihn inzwischen weitgehend an meine Vorstellungen anpassen, bis auf 2 Probleme:

Ich hätte gern die beiden „Buttons“
»zur Antwort« und »Antwort einklappen«
mittig unter der jeweiligen Frage und oberhalb der Abgrenzungslinie.
Jetzt sitzen diese »Buttons« leider am linken Ende der »Frage« und sind noch dazu 2-Zeilig :-((

Die beiden „Buttons“ (»zur Antwort« und »Antwort einklappen«) sollten sich farblich wie alle anderen Links der Seite verhalten:
Linkfarbe = rgb 255, 0, 0 und aktiv (MouseOver) = rgb 155, 0, 0.

Ich habe den ganzen Sonntag getüftelt und schaff es nicht :-((
Kann mir bitte jemand helfen?

Der Link zur Seite:
http://spielplatz3000.jimdo.com/

Liebe Grüße und vielen Dank ans Forum
Christine

PS: Wenn es sinnvoll ist, dass ich den benutzten Code rein kopiere, gebt mir bitte bescheid. Danke.


 Antworten

 Beitrag melden
03.07.2016 22:04 (zuletzt bearbeitet: 03.07.2016 22:06)
avatar  Mrs.DAU
#2
avatar

Ist-Zustand

Wunsch-Zustand


 Antworten

 Beitrag melden
04.07.2016 10:15 (zuletzt bearbeitet: 04.07.2016 10:15)
avatar  az_
#3
avatar
az_

Gratulation zur gelungenen Akkordeon-Umsetzung! Dazu gibt es hier auch schon ein paar Artikel. Gib mal im Suchen-Feld "Akkordeon" ein!

Die Antwort auf Deine Frage ist wahrscheinlich folgende Codezeile:

1
2
3
 

a {color: red !important;}
 
 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
17.07.2016 18:29 (zuletzt bearbeitet: 17.07.2016 18:57)
avatar  Mrs.DAU
#4
avatar

Zuerst mal Danke für das Stichwort "Akkorden".
Jetzt weiß ich wenigstens wie das Aufklapp-Dingens heißt



Bin einen Schritt weiter gekommen
… aber nicht dass ich jetzt wüsste was ich tu’!
War pures Try and Error Stochern. Immerhin ist die Frage von Button „Antwort“ getrennt (2-Zeilig) und die Buttons „Antwort“ und „Ausblenden“ stehen auf Mittelachse.

-> http://spielplatz3000.jimdo.com/#swap

@ az:
Das Problem der „Farbe“ konnte ich nicht lösen.

Ich möchte "nur", dass sich die beiden Buttons ("Antwort" und "Ausblenden") farblich wie alle anderen "Links" auf der Seite verhalten. Habs versucht, aber leider keinen blassen Schimmer wo ich die Codezeile

1
 
a {color: red !important;}
 

einfügen soll, bzw ob das die richtige ist.

Ich stell' jetzt einfach mal den Code hier rein. Vielleicht kannst Du mir ja weiterhelfen – so dass ich es auch kapier … ?

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
 
<hr />
<h3> Warum ist die Banane krumm? </h3>
 
<script type="text/javascript">
//<![CDATA[
function swap(openlink,closelink, linkid, dataid)
{
if( document.getElementById(dataid).style.display == 'none')
{
document.getElementById(dataid).style.display='inline';
document.getElementById(linkid).firstChild.nodeValue=closelink;
} else
{
document.getElementById(dataid).style.display='none';
document.getElementById(linkid).firstChild.nodeValue=openlink;
}
}
//]]>
</script>
<table class="tab24" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr bgcolor="#FFFFFF">

<td align="center" width="34%" style="padding-left:0px; padding-right:0px;">
<a href="#swap" onclick="javascript:swap('Antwort','Ausblenden', 'swaplink1', 'hideme1')" id="swaplink1" onfocus="this.blur()" name="swaplink1">Antwort</a>
</td>
</tr>
 
<tr style=" text-align: left; font-size: 16px; font-weight: normal; background-color:">
<td colspan="3" style="padding-left:0px; padding-right:0px;">
<div id="hideme1" style="display:none">
<br />
<div align="left">
</div>
 
<p>
Hier steht die Antwort auf die jeweiliege Frage.
</p>
</div>
</td>
</tr>
</table>
 
<hr />
 



L.G. Christine


 Antworten

 Beitrag melden
18.07.2016 13:36
avatar  az_
#5
avatar
az_

...das sieht doch schon sehr gut aus!

die Code-Zeile setzt Du einfach unter Einstellungen > Head bearbeiten in den Editor ein. Näheres hier: http://www.redesign-berlin.de/jimdo-tutorials/css-formatierungen/

der komplette Code mit grauem Hover-Verhalten wäre dann dieser hier:


1
2
3
4
5
 
<style>
a {color: red !important;}
a:hover {color:grey !important;}
 
</style>
 



LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
19.07.2016 10:54 (zuletzt bearbeitet: 19.07.2016 11:10)
avatar  Mrs.DAU
#6
avatar

Vielen, vielen Dank az,
so langsam erschließt sich mir das System … auch wenn ich (noch), desorientiert wie ein blindes Hühnchen, im Inspektor-Fenster von Firefox umherstochere


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!