border geht nicht um das ganze Formular-DIV

[scrotum]

Ich habe versucht ein Formular zu bauen, dass ohne tables arbeitet, also nur CSS.

Habe aber zwei Fragen:

1. Wieso geht der Border des formular-DIVS nicht um mein Formular?
2. Wie kann ich mit CSS bei meinen Buttons einen active-Zustand definierten. .formbutton a:active {} funktioniert nicht.

Hier der HTML-Code:

<div class="formular">
						<div class="spaltelinks">
							<div class="formzeile">
								<div class="formzeilelinks" style="width: 63px"><label for="mitteilung">Mitteilung:</label></div>
								<div class="formzeilerechts"><textarea name="mitteilung" rows="5" cols="37"></textarea> </div>
							</div>
						</div>
						<div class="spalterechts">
							<div class="formzeile">
								<div class="formzeilelinks"><label>Name:</label></div>
								<div class="formzeilerechts"><input type="text" size="40" maxlength="50" name="namefeld"></div>
							</div>
							<div class="formzeile">
								<div class="formzeilelinks"><label>E-Mail:</label></div>
								<div class="formzeilerechts"><input type="text" size="40" maxlength="60" name="emailfeld"></div>							
							</div>
							<div class="formzeile">
								<div class="formzeilelinks"></div>
								<div class="formzeilerechts"><input type="submit" name="Submit" value="Eintragen" class="formbutton">&nbsp;<input type="reset" name="Reset" value="Zurücksetzen" class="formbutton"></div>							
							</div>
						</div>
</div>

Hier der CSS-Code:

.formular {
border: 1px solid black;
}

label {
font-weight: bold;
}

.formzeile {
clear: both;
}

.formzeilelinks {
float: left;
width: 40px;
margin-top: 5px;
}

.formzeilerechts{
float: left;
}

.spaltelinks {
float: left;
width: 310px;
}

.spalterechts {
float: left;
}

input, textarea{
border: none;
background-color: #FFCC00;
margin: 5px;
padding: 2px;
font-family: Verdana, Arial, Helvetica , sans-serif;
font-size: 9px;
line-height: 11px;
letter-spacing: 0.5px;
}

.formbutton {
background-color: #CC66FF;
border: 3px double green;
}

Danke für eure Hilfe!

 

[Maik]

• Stelle nach den floatenden DIVs wieder den normalen Textfluss im Dokument her:
  

div.clear {
clear: left;
height: 0;
margin: 0;
padding: 0;
font-size: 0;
}

und füge das DIV.clear im HTML-Code nach den floatenden DIVs ein:

<div class="formular">
                                                <div class="spaltelinks">
                                                        <div class="formzeile">
                                                                <div class="formzeilelinks" style="width: 63px"><label for="mitteilung">Mitteilung:</label></div>
                                                                <div class="formzeilerechts"><textarea name="mitteilung" rows="5" cols="37"></textarea> </div>
                                                        </div>
                                                </div>
                                                <div class="spalterechts">
                                                        <div class="formzeile">
                                                                <div class="formzeilelinks"><label>Name:</label></div>
                                                                <div class="formzeilerechts"><input type="text" size="40" maxlength="50" name="namefeld"></div>
                                                        </div>
                                                        <div class="formzeile">
                                                                <div class="formzeilelinks"><label>E-Mail:</label></div>
                                                                <div class="formzeilerechts"><input type="text" size="40" maxlength="60" name="emailfeld"></div>
                                                        </div>
                                                        <div class="formzeile">
                                                                <div class="formzeilelinks"></div>
                                                                <div class="formzeilerechts"><input type="submit" name="Submit" value="Eintragen" class="formbutton">&nbsp;<input type="reset" name="Reset" value="Zurücksetzen" class="formbutton"></div>
                                                        </div>
                                                </div>

                                                <div class="clear">&nbsp;</div>
</div>

• Cascading Style Sheets { Schnellreferenz zu CSS 2.1 : Unterstützung durch die Browser }

 

[scrotum]

Danke. Das erste Problem ist gelöst... Das hatte ich schonmal, hätte eigentlcih selber drauf können kommen ;-).

Und was ist mit meiner zweiten Frage? Den Link, den du gepostet hast, ist das zum Nummer 1 verdeutlichen oder eine Antwort auf meine Frage 2? Den ich sehe in diesem Link keine Lösung für mein 2. Problem mit dem Button der sich verändern söll, wenn man ihn klickt.

 

[Maik]

Selbstverständlich bezieht sich Antwort Nr.2 auf deine zweite Frage, lese einfach mal den Abschnitt zu dem verlinkten Anker Pseudoklassen.

MS IE/Win bis Version 6 stellt :active nicht immer mit allen deklarierten Eigenschaften dar.

Zudem wendet der IE die Pseudoklassen nur auf das a-Element an. In den modernen Browsern funktioniert folgende CSS-Regel:

input.formbutton:active {
background-color: #ffff00;
border: 3px double green;
}

Für den IE wäre Javascript erforderlich, um beispielsweise zwei CSS-Klassen für die Button-Zustände zu tauschen:

input.formbutton_normal {
background-color: #CC66FF;
border: 3px double green;
}

input.formbutton_normal:active { /* Für moderne Browser */
background-color: #ffff00;
border: 3px double green;
}

input.formbutton_active { /* Für IE */
background-color: #ffff00;
border: 3px double green;
}

<input type="submit" name="Submit" value="Eintragen" class="formbutton_normal" onclick="this.className='formbutton_active'" onblur="this.className='formbutton_normal'">