Hallo,
ich versuche gerade mein Eingabeformular so zu gestalten das es in allen Themen und mit jedem Browser möglichst optimal aussieht.
Das stellt sich schwerer da als gedacht.
Grob so es wie folgt aussehen: Oben einen Titel, dann Text, dann Detail, dann Eingabefelder und im Anschluss eine Tabelle.
Mein Grundgerüst sieht so aus:
PHP
$text .= "<div>";
$text .= "<div class='kopf'>";
$text .= "kopf red";
$text .= "</div>";
$text .= "<div class='title'>";
$text .= "titel green";
$text .= "</div>";
$text .= "<h1>h1</h1>";
$text .= "<h2>h2</h2>";
$text .= "<h3>h3</h3>";
$text .= "<h4>h4</h4>";
$text .= "<h5>h5</h5>";
$text .= "<h6>h6</h6>";
$text .= "<div class='eingabe'>";
$text .= "<input type='text' name='author' id='author' value='' size='22' tabindex='1' aria-required='true' />";
$text .= " <label for='author'><small>Name (benötigt)</small></label><br>";
$text .= "<input type='text' name='email' id='email' value='' size='22' tabindex='2' aria-required='true' />";
$text .= " <label for='email'><small>E-Mail (wird nicht veröffentlicht) (benötigt)</small></label><br>";
$text .= "<input type='text' name='url' id='url' value='' size='22' tabindex='3' />";
$text .= " <label for='url'><small>Website</small></label>";
$text .= "</div>";
$text .= "<div class='table'>";
$text .= "table blue";
$text .= "<table>";
$text .= "<thead>";
$text .= "<tr>";
$text .= "<th>";
$text .= "th z1s1 ";
$text .= "</th>";
$text .= "<th>";
$text .= "th z1s2 ";
$text .= "</th>";
$text .= "</tr>";
$text .= "</thead>";
$text .= "<tbody>";
$text .= "<tr>";
$text .= "<td>";
$text .= "td z2s1 ";
$text .= "</td>";
$text .= "<td>";
$text .= "td z2s2 ";
$text .= "</td>";
$text .= "</tr>";
$text .= "</tbody>";
$text .= "<tfoot>";
$text .= "<tr>";
$text .= "<th>";
$text .= "th z3s1 ";
$text .= "</th>";
$text .= "<th>";
$text .= "th z3s2 d";
$text .= "</th>";
$text .= "</tr>";
$text .= "</tfoot>";
$text .= "</table>";
$text .= "</div>";
$text .= "</div>";Die CSS dazu:
HTML
div.kopf
{
color:red;
}
div.title
{
color:green;
}
div.table
{
color:blue;
}
div.table tfood
{
color:green;
}
div.table thead
{
color:blue;
}
div.table tbody
{
color:red;
}
div.eingabe input
{
margin: 0;padding: 0;
}
div.eingabe label
{
color:red;
}Mit dem Titel, Text und Eingabefelder kann ich leben. Aber wenn jemand eine Idee hat :wink:
Die Tabelle ist Schrott ... soweit ich erlesen konnte gibt es Problme mit thead und tfoot ... aber stimmt das?
Könnt Ihr mit Tipps geben?