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.

Ist-Zustand

Wunsch-Zustand

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:

 a {color: red !important;}
 
 

LG, az

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

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 … ?

<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

...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:

<style>
a {color: red !important;}
a:hover {color:grey !important;}
 
</style>
 

LG, az

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