Benötige Hilfe HTML und CSS

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen

Beginne grad mit html und CSS und hab hier ne Aufgabe die ich gern lösen würde. Ich selbst steh leider auf dem Schlauch und weiss nicht mehr weiter.
Hab mittels HTML und CSS eine Tabelle mit Reitern erstellt. So nun möcht ich unter dem blauen Feld jedem Reiter noch eine Extra Tabelle zuweisen die nur mit dem jeweiligen Reiter aufmacht und weiss grad nicht wie. Könnt ihr mir da bitte helfen?

LG
Rebecca

[CODE]

Code-Beispiel von Webmasterparadies.de .trand { width: 100%; border: 1px solid #C5B798; margin-top: 10px; background-color: #E3E1FB; vertical-align: bottom; } 
.fformat {
    margin-top: 13px;
    vertical-align: bottom;
}

.tfstyle {
    min-width: 130px;
    /*vertical-align:bottom;*/
}

.btnstyle {
    vertical-align: bottom;
    float: right;
}

.btnChg {
    min-width: 90px;
    margin-top: 8px;
    margin-left: 0;
}

.tabledaten {
    border-spacing: 4px;
    /*background-color: #FFFF99;*/
    /*border: 2px solid;*/
    /*bordercolor:#F0F0F7;*/
    width: 100%;
}

.tableentry {
    background-color: #EAEAEA;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

Bez {
    font-weight: bold;
}

CRM System
R2 IT e.K.
  • Kontakte 

        </li><li>
        <input type="radio" name="tabreiter-0" id="tabreiter-0-1" /><label for="tabreiter-0-1">Firmen</label>
        <div>
            <p><input type='submit' value='   Neue Firma   '>
            <select name='contact'>
              <option value='1'></option>
              <option value='3'></option>
              <option value='4'></option>
            </select>
            <action><input type='submit' value='   anzeigen   '><input type='submit' value='   Suchen   '><action><input type='submit' value='   Logout   ' >

        </li><li>
        <input type="radio" name="tabreiter-0" id="tabreiter-0-2" /><label for="tabreiter-0-2">Projekte</label>
        <div>
            <p><input type='submit' value='   Neues Projekt   '>
            <select name='contact'>
              <option value='1'></option>
              <option value='3'></option>
              <option value='4'></option>
            </select>
            <action><input type='submit' value='   anzeigen   '><input type='submit' value='   Suchen   '><action><input type='submit' value='   Logout   ' ></action>

  • Suchen

  • Einstellungen

    • [/CODE] [CODE].tabreiter { width: 100%; height: 100px; } .tabreiter ul, .tabreiter li { margin: 0; padding: 0; list-style: none; } .tabreiter, .tabreiter input[type="radio"]:checked + label { position: relative; } .tabreiter li, .tabreiter input[type="radio"] + label { display: inline-block; } .tabreiter li > div, .tabreiter input[type="radio"] { position: absolute; } .tabreiter li > div, .tabreiter input[type="radio"] + label { border: solid 1px #ccc; } .tabreiter { font-family: Arial, Sans-serif; font-size: 1em; font-weight: 400; color: #000000; } .tabreiter li { vertical-align: top; } .tabreiter li:first-child { margin-left: 8px; } .tabreiter li > div { top: 33px; bottom: 0; left: 0; width: 100%; padding: 8px; overflow: auto; background: #EAEAEA; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .tabreiter input[type="radio"] + label { margin: 0 2px 0 0; padding: 0 18px; line-height: 32px; background: #F4F4F4; text-align: center; border-radius: 5px 5px 0 0; cursor: pointer; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .tabreiter input[type="radio"]:checked + label { z-index: 1; background: #DDDDDD; border-bottom-color: #EAEAEA; cursor: default; } .tabreiter input[type="radio"] { opacity: 0; } .tabreiter input[type="radio"] ~ div { display: none; } .tabreiter input[type="radio"]:checked:not(:disabled) ~ div { display: block; } .tabreiter input[type="radio"]:disabled + label { opacity: .5; cursor: no-drop; }[/CODE] [CODE]@charset "utf-8"; /* CSS Document */ .trand { width: 100%; border: 1px solid #C5B798; margin-top: 10px; background-color: #E3E1FB; vertical-align: bottom; } 
    .fformat {
    margin-top: 13px;
    vertical-align: bottom;
}

.tfstyle {
    min-width: 130px;
    /*vertical-align:bottom;*/
}

.btnstyle {
    vertical-align: bottom;
    float: right;
}

.btnChg {
    min-width: 90px;
    margin-top: 8px;
    margin-left: 0;
}

.tabledaten {
    border-spacing: 4px;
    /*background-color: #FFFF99;*/
    /*border: 2px solid;*/
    /*bordercolor:#F0F0F7;*/
    width: 100%;
}

.tableentry {
    background-color: #EAEAEA;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

Bez {
    font-weight: bold;
}
    [/CODE]