Cyperfriend
Der ohne Avatar
- Registriert
- 14 Juli 2013
- Beiträge
- 1.123
Edit: Da noch keine Antwort kam editiere ich den Beitrag und den dazugehörigen Quellcode. Das Problem der Ausrichtung habe ich behoben.
Ich habe folgendes Formular mit klassischen Tabellen-Elementen erstellt. Sieht soweit ganz gut aus:
Anhang anzeigen 25511
Nun will ich diese Tabelle aber erstellen OHNE das ich dabei das klassische HTML-Tabellenelement verwende. Wie kann ich das erreichen?
Bislang sieht das Ergebnis so aus:
Anhang anzeigen 25512
Man sieht jetzt, was fehlt:
1) Tabelle hat zwischen den Zeilen einen doppelt so dicken Strich wie Außen.
2) Kein Strich zwischen den Zellen
3) Anordnung nebeneinander funktioniert nicht. (Hier kann keine allgemeine Regel vorgegeben werden, da ich später auch Zeilen habe, wo wirklich nur ein <label> und ein <inpput>-Feld rein kommen, da das <input>-, bzw. <select>Feld zu viel Platz benötigen wird.)
4) Ich will einen automatischen Farbwechsel zwischen den Zeilen (zwei Farben). Es folgen noch weitere <fieldset>-Elemente und ich will, dass immer mit der gleichen Farbe begonnen wird.
HTML:
[src=html4strict]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Formulare</title>
<link rel="stylesheet" type="text/css" href="formulare.css">
</head>
<body>
<!-- Anfang Formular -->
<div>
<form action="" name="">
<!-- Anfang Hardware -->
<fieldset>
<legend>Hardware</legend>
<p>
<label for="ComputerHersteller">Hersteller</label>
<input type="text" name="ComputerHersteller" id="ComputerHersteller" style="float:left;">
<label for="ComputerModell">Modell</label>
<input type="text" name="ComputerModell" id="ComputerModell">
</p>
<p>
<label for="Grafikkarte">Grafikkarte</label>
<input type="text" name="Grafikkarte" id="Grafikkarte" style="float:left;">
<label for="Soundkarte">Soundkarte</label>
<input type="text" name="Soundkarte" id="Soundkarte">
</p>
</fieldset>
<!-- Ende Hardware -->
<!-- Anfang Speichern -->
<fieldset>
<p>
<input type="submit" name="speichern" value="Speichern">
</p>
</fieldset>
<!-- Ende Speichern -->
</form>
</div>
<!-- Ende Formular -->
</body>
</html>
[/src]
CSS:
[src=css]
@charset "utf-8";
/* CSS Document */
/* Grundeinstellungen */
* {
margin:0;
padding:0;
background-color:e9e9e9;
font-family:Arial;
font-size:12px;
color:#000;
}
/* Formulareinstellungen */
form {
background-color:#e9e9e9;
width:550px;
margin-left:auto;
margin-right:auto;
}
/* Fieldset-Überschrift */
legend {
font-weight:bold;
}
/* Absatz */
p {
border:1px solid #000;
border-collapse:collapse;
}
/* */
label {
margin-left:15px;
width:110px;
display:block;
float:left;
}
[/src]
Wäre super, wenn ihr mir weiterhelfen könntet.
Ich habe folgendes Formular mit klassischen Tabellen-Elementen erstellt. Sieht soweit ganz gut aus:
Anhang anzeigen 25511
Nun will ich diese Tabelle aber erstellen OHNE das ich dabei das klassische HTML-Tabellenelement verwende. Wie kann ich das erreichen?
Bislang sieht das Ergebnis so aus:
Anhang anzeigen 25512
Man sieht jetzt, was fehlt:
1) Tabelle hat zwischen den Zeilen einen doppelt so dicken Strich wie Außen.
2) Kein Strich zwischen den Zellen
3) Anordnung nebeneinander funktioniert nicht. (Hier kann keine allgemeine Regel vorgegeben werden, da ich später auch Zeilen habe, wo wirklich nur ein <label> und ein <inpput>-Feld rein kommen, da das <input>-, bzw. <select>Feld zu viel Platz benötigen wird.)
4) Ich will einen automatischen Farbwechsel zwischen den Zeilen (zwei Farben). Es folgen noch weitere <fieldset>-Elemente und ich will, dass immer mit der gleichen Farbe begonnen wird.
HTML:
[src=html4strict]
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Formulare</title>
<link rel="stylesheet" type="text/css" href="formulare.css">
</head>
<body>
<!-- Anfang Formular -->
<div>
<form action="" name="">
<!-- Anfang Hardware -->
<fieldset>
<legend>Hardware</legend>
<p>
<label for="ComputerHersteller">Hersteller</label>
<input type="text" name="ComputerHersteller" id="ComputerHersteller" style="float:left;">
<label for="ComputerModell">Modell</label>
<input type="text" name="ComputerModell" id="ComputerModell">
</p>
<p>
<label for="Grafikkarte">Grafikkarte</label>
<input type="text" name="Grafikkarte" id="Grafikkarte" style="float:left;">
<label for="Soundkarte">Soundkarte</label>
<input type="text" name="Soundkarte" id="Soundkarte">
</p>
</fieldset>
<!-- Ende Hardware -->
<!-- Anfang Speichern -->
<fieldset>
<p>
<input type="submit" name="speichern" value="Speichern">
</p>
</fieldset>
<!-- Ende Speichern -->
</form>
</div>
<!-- Ende Formular -->
</body>
</html>
[/src]
CSS:
[src=css]
@charset "utf-8";
/* CSS Document */
/* Grundeinstellungen */
* {
margin:0;
padding:0;
background-color:e9e9e9;
font-family:Arial;
font-size:12px;
color:#000;
}
/* Formulareinstellungen */
form {
background-color:#e9e9e9;
width:550px;
margin-left:auto;
margin-right:auto;
}
/* Fieldset-Überschrift */
legend {
font-weight:bold;
}
/* Absatz */
p {
border:1px solid #000;
border-collapse:collapse;
}
/* */
label {
margin-left:15px;
width:110px;
display:block;
float:left;
}
[/src]
Wäre super, wenn ihr mir weiterhelfen könntet.
Zuletzt bearbeitet:
