HTML Pages

Prakt6c
-----------------------------------------------------------------------------------------------------------------------------

<header id="div_head">Praktikum zur Positionierung</header>

    <nav id="div_nav">
            <ul type="none">
                <li><a href="prakt6a.html">Teil1.Aufgabenbeschreibung</a></li>
                <li><a href="prakt6b.html">Teil2.Projekte</a></li>
                <li><a href="pract6c.html">Teil3.Projektanmeldung</a></li>
            </ul>
        </nav>
        <div id="main">
            <form method="get">
                <fieldset>
                    <legend>Neues Projekt</legend>
                <p><label for="name" class="lab">Name</label>
                    <input type="text" placeholder="Bitte Name eingeben" class="inp"
                           pattern="[A-Z][a-z]+">
                </p>
                <p><label for="vorn" class="lab">Vorname</label>
                    <input type="text" class="inp" pattern="[A-Z][a-z]+">
                </p>
                </fieldset>
                <fieldset>
                    <legend>Projektbeschreibung</legend>
                    <p><label for="tit" class="lab">Titel</label>
                        <input type="text" class="inp" pattern="[A-Z][a-z]+">
                    </p>
                    <p><label for="pro" class="lab">Beschreibung des Projekts</label>
                        <textarea rows="5" class="area"></textarea>
                    </p>
                </fieldset>
                <fieldset>
                    <legend>Projektteilnehmer</legend>
                    <p>
                        <label for="teil" class="lab">Teilnehmer</label>
                        Decker
                        <input type="checkbox" name="Teilnehmer" value="ON" />
                        Marker
                        <input type="checkbox" name="Teilnehmer" value="ON" />
                        Sebralla
                        <input type="checkbox" name="Teilnehmer" value="ON" />
                        Wittenzellner
                        <input type="checkbox" name="Teilnehmer" value="ON" />
                    </p>
                </fieldset>
                <fieldset>
                    <legend>Action</legend>
                    <input type="submit" value="Projekt speichern" size="25">
                    <input type="reset" value="Daten löschen" size="25">
                </fieldset>
            </form>

        </div>
        <footer id="div_foot">Status: ok</footer>


CSS:
-------------------------------------------------------------------------------------------------------------------------------
#div_head{background-color: yellow;position: absolute;top:0px;height:100px;left:0px;right:0px; font-weight: bold}
#div_nav{background-color: lightblue;
         position: absolute; top:100px; bottom: 50px; left: 0px; width: 250px}
#div_foot{background-color: yellow; position: absolute;bottom:0px;height:50px;left:0px;right:0px;}
html, body {height: 100%}
#main {background-color:lightgray; position:absolute; top:100px; bottom:50px; left:250px; right:0px}
.haupt{font-weight: bold}
.end{font-weight: bold}
table{border-collapse: collapse;margin: 30px}
th, td{height:30px}
.proj{font-family: Verdana;font-size: 12pt;font-weight: bold;
      margin-bottom:12px}
nav ul ul{display: none}
nav ul li:hover ul{display: block}
.lab{float: left; width: 120px}
.inp{width: 200px}
.area{width: 370px}

Prakt6b
---------------------------------------------------------------------------------------------------------------------------------

        <header id="div_head">Praktikum zur Positionierung</header>

        <nav id="div_nav">
            <ul type="none">
                <li><a href="prakt6a.html">Teil1.Aufgabenbeschreibung</a></li>
                <li><a href="prakt6b.html">Teil2.Projekte</a>
                    <ul type="none" class="auf">
                        <li>Projekt 1</li>
                        <li>Projekt 2</li>
                    </ul>
                </li>
                <li><a href="pract6c.html">Teil3.Projektanmeldung</a></li>
        </ul>
        </nav>
        <div id="main">
            <table border="1">
                <caption class="proj">Projekteinteilung in der B10a</caption>
                <thead>
                    <tr>
                        <th class="end">Projektbezeichnung</th>
                        <th class="end">Name</th>
                        <th class="end">Vorname</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td rowspan="4">Projekt 1</td>
                        <td>Bachmeier</td>
                        <td>Michael</td>
                    </tr>
                    <tr>
                        <td>Bergbauer</td>
                        <td>Eva</td>
                    </tr>
                    <tr>
                        <td>Gurtner</td>
                        <td>Tobias</td>
                    </tr>
                    <tr>
                        <td>Hopf</td>
                        <td>Michael</td>
                    </tr>
                    <tr>
                        <td rowspan="4">Project 2</td>
                        <td>Muche</td>
                        <td>Stefan</td>
                    </tr>
                    <tr>
                        <td>Pledl</td>
                        <td>Daneil</td>
                    </tr>
                    <tr>
                        <td>Schreck</td>
                        <td>Fabian</td>
                    </tr>
                    <tr>
                        <td>Zaglauer</td>
                        <td>Johannes</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="end">Ende der Tabelle</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <footer id="div_foot">Status: ok</footer>