• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Benötige Hilfe HTML und CSS

B

blackybaby

Neues Mitglied
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: 
<!DOCTYPE html>

<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="robots" content="noindex">
    <title>Code-Beispiel von Webmasterparadies.de</title>
    <link href="tabreiter.css" rel="stylesheet" type="text/css">
    <link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<link rel="stylesheet" type="text/css" href="Layout/styles.css">
<style type='text/css'>
    .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;
    }
</style>
<table border='0' width='100%' cellpadding="0" cellspacing="0" margin="0">
    <!--Logo und Programmname-->
    <tr height="80px">
        <td width='25%' bgcolor="#A5A7ED"></td>
        <td width='75%' valign="bottom" bgcolor="#A5A7ED"><h1>CRM System</h1></td>
    </tr>
    <!--Trennzeile mit dunkler Farbe-->
    <tr height="8px">
        <td bgcolor="003377"></td>
        <td bgcolor="003377"></td>
    </tr>
</table>

<!-- Table mit den Buttons, 10 Stueck-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" margin="0">
    <tr height="50px">
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
        <td width="10%" bgcolor="#FFFFCA"></td>
    </tr>
</table>
<hr><center>R2 IT e.K.</center><hr>
<div class="tabreiter">
    <ul>
        <li>
            <input type="radio" name="tabreiter-0" checked="checked" id="tabreiter-0-0" /><label for="tabreiter-0-0">Kontakte</label>
          <div>
                <p>
<action><input type='submit' value='   Neuer Kontakt   '></action>
                  <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><form action='../show_contact.php' method='POST'>
</form><form action='add_contact_2.php' method='post'>
</div><form action='add_contact_2.php' method='post'>
</p>


        </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   ' >
</action>
               
        </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>
</action>
                <form action='../show_contact.php' method='POST'>
</form></p>
            </div>
        </li><li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-3"  /><label for="tabreiter-0-3">Suchen</label>
            <div>
                <p></p>
            </div>
        </li>
        <li>
            <input type="radio" name="tabreiter-0" id="tabreiter-0-4"  /><label for="tabreiter-0-4">Einstellungen</label>
            <div>
                <p></p>
            </div>
        </li>
    </ul>
</div>


</body>
</html>
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: 
@charset "utf-8";
/* CSS Document */
<style type='text/css'>
    .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;
    }
</style>
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben