button:focus - anderes, nicht verschachteltes Element formatieren

[A. Kupferschmidt]

Meinst du vielleicht so etwas

<button class="button" onclick="showDiv('st1'); return false" >Stufe 1</button>

Class="button" macht die Gestaltung des Schalters ('st1') ist die ID-Variable nach gesucht werden soll (ID="st1")

Stufe 1< ist die Beschriftung des Button

Damit das funktionier brauchst du noch einen Skript:

<script type="text/javascript">
function showDiv(id) {
    if(document.getElementById) {
        var mydiv = document.getElementById(id);
        mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
    }
}
</script>

Der Container wird dann wie folgt aufgerufen:

<div id="st1" style="display: none;">
.......
</div>

Klickst du den Button erscheint an der Stelle, an dem du deinen DIV-Container gestellt hast das was zwischen Div id="st1" bis /Div steht.

Vorteil: ist der Schalter nicht betätigt "schrumpft" deine Seite. es wird kein Platz für deinen Containerinhalt benötigt. Drückst du den Schalter ein zweites mal, wir der eingefügte Teil wieder entfernt. Du kannst auch mehrer Container hintereinander Schalten, ohne das die Seite beim ersten anzeigen die volle Länge zeigt.

Nachteil: Rückwirkend mit CSS oder Java auf Style oder Funktion innerhalb der Divcontainers einzugreifen ist nicht leicht.

Hier mein Style für den Button:

<style type="text/css">
.button {
 width: ; /* Breite des Buttons */
 height: 25px; /* Höhe des Buttons */
 border: 1px solid #aaa; /* Rahmen */
 border-radius: 5px; /* Abgerundete Ecken */
 background: #eee; /* Hintergundfarbe für ältere Browser */
 background-image: linear-gradient(#cdffbc, #6ec153); /* Farbverlauf */
 display: block; /* Darstellung als Block-Element */
 text-align: center; /* Horizontale Text-Ausrichtung */
 text-decoration: none; /* Links nicht unterstrichen */
 color: #333; /* Textfarbe */
}
.button:hover {
background-image: linear-gradient(#6ec153, #cdffbc); /* Farbe */
color: white;
}
</style>

Edit Rolf B: HTML umrahmt man mit ~~~html (zu Beginn) und ~~~ (am Ende)