✔ Probleme mit einem fieldset und legend

Status
Nicht offen für weitere Antworten.
P

Patematthes

Mitglied
Hallo ich bin ein Anfänger was CSS betrifft.
Ich habe ein fieldset mit legend aber irgendwie ist das gerade alles etwas verrückt.

Wüsste einer wie ich das wieder hin bekomme?

HTML: 
<fieldset id="fieldset_login">
<legend id="legend">Anmeldeformular</legend>
<table>
<tr>
<td>Benutzername:</td>
<td><input type="text" name="name" size="20" /></td>
</tr>
<tr>
<td>Kennwort:</td>
<td><input type="password" name="pwd" size="20" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Anmelden" /></td>
</tr>
</table>
</fieldset>
</form>

Code: 
#fieldset_login {
width: 400px;
border: 2px solid #000000;
background-color: #C0C0C0;
}
#legend {
width: 400px;
position: relative;
}
 
Hi,

versuch es mal hiermit:

Code: 
form {
background-color: #C0C0C0;
}

#fieldset_login {
width: 400px;
border: 2px solid #000000;
}

/* auskommentiert = deaktiviert */
/*#legend {
width: 400px;
position: relative;
}*/
 
Vielleicht hilft dir dieses Modell weiter?

Code: 
div.box {
            position:relative;
            margin:1em;
            width:400px;
            padding:0.5em 0 0 0;
            border:2px #000 solid;
            color:#000;
            background:#c0c0c0;
        }
div.box h1 {
            position:absolute;
            top:-0.5em;
            left:1em;
            margin:0;
            padding: 0;
            font-size:1em;
            font-weight:normal;
        }
div.box h1 span {
            margin: 0;
            padding:0 0.5em;
            color:#000;
            background:#c0c0c0;
            font-size:1em;
        }
Code: 
<form>
    <div class="box">
       <h1><span>Anmeldeformular</span></h1>
       <table>
              <tr>
                  <td>Benutzername:</td>
                  <td><input type="text" name="name" size="20" /></td>
              </tr>
              <tr>
                  <td>Kennwort:</td>
                  <td><input type="password" name="pwd" size="20" /></td>
              </tr>
              <tr>
                  <td colspan="2"><input type="submit" value="Anmelden" /></td>
              </tr>
       </table>
    </div>
</form>
 
Ne das bringt es nun irgendwie auch nicht ganz, denn wenn ich deine Vorgaben verwende habe ich keinen rahmen mehr um das fieldset und es ist linksbündig. Ich poste mal den aktuellen Code. Das einzige was hier wirklich noch fehlt ist, dass der background im ie 6.0 nicht über die obere linie hinaus geht.

HTML: 
<?php session_start(); ?>
<html>
<head>
  <title>Willkommen im LK der AS</title>
  <link href="lkstyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="aussen">
<h1>Loginbereich für das Lärmkataster</h1> <br/><br />
<?php
if (isset ($_request["fehler"]))
{
  echo "MOEP";
}
?>
<!-- Ausgabe Loginformular mit Feldern: Benutzername,Kennwort -->
<form action="login.php" method="post">
<fieldset id="fieldset_login">
<table>
<tr>
<td>Benutzername:</td>
<td><input type="text" name="name" size="20" /></td>
</tr>
<tr>
<td>Kennwort:</td>
<td><input type="password" name="pwd" size="20" /></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Anmelden" /></td>
</tr>
</table>
</fieldset>
</form>
<!-- Allgemeiner Hinweis und Möglichkeit der Kontaktaufnahme -->
<p>Um sich am System anzumelden benötigen Sie einen Benutzernamen
und ein Passwort.<br />
Sollten Sie Fragen dazu haben wenden Sie Sich bitte an den
<a class="normal" href="mailto: subject=Lärmkataster">Administrator</a>.</p>
</div>
</div>
</body>
</html>

Der CSS Code

Code: 
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#fieldset_login {
width: 400px;
border: 2px solid #000000;
background-color: #C0C0C0;
}
#aussen {
text-align: center;
}
#main {
width: 750px;
text-align: left;
margin: 0px auto;
}
#links {
height: 30px;
width: 750px;
background-image: url(pics/links.jpg);
background-repeat: no-repeat;
color: #FFFFFF;
margin: 0px auto;
text-align: left;
}
#links_table {
width: 200px;
height: 30px;
vertical-align: middle;
}
#loggout {
text-align: right;
}
#header {
width: 750px;
height: 200px;
text-align: left;
margin: 0px auto;
}
#logo {
float: right;
text-align: right;
}
#ausgabe_table {
font-size: 9px;
border: 1px;
border-color: #000000;
}
#footer {
text-align: right;
width: 750px;
margin: 0px auto;
}
#button_text {
font-size: 9px;
}
hr {
color: #000000;
background: #000000;
height: 1px;
border: none;
}
a.menu:link {
color: #FFFFFF;
text-decoration: none;
}
a.menu:visited {
color: #FFFFFF;
text-decoration: none;
}
a.menu:hover {
color: #FF0000;
text-decoration: none;
}
a.menu:active {
color: #FF0000;
text-decoration: none;
}
a.normal:link {
color: #000000;
text-decoration: underline;
}
a.normal:visited {
color: #000000;
text-decoration: underline;
}
a.normal:hover {
color: #FF0000;
text-decoration: underline;
}
a.normal:active {
color: #FF0000;
text-decoration: underline;
}
 
Dann hast du wohl etwas verkehrt gemacht, denn bei mir funktioniert alles einwandfrei, wie der angehängte Screenshot belegt.

Und hier der Quellcode meines Testdokuments:

Code: 
<html>
<head>
<title>Willkommen im LK der AS</title>

<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#aussen {
text-align: center;
}
#main {
width: 750px;
text-align: left;
margin: 0px auto;
}
#links {
height: 30px;
width: 750px;
background-image: url(pics/links.jpg);
background-repeat: no-repeat;
color: #FFFFFF;
margin: 0px auto;
text-align: left;
}
#links_table {
width: 200px;
height: 30px;
vertical-align: middle;
}
#loggout {
text-align: right;
}
#header {
width: 750px;
height: 200px;
text-align: left;
margin: 0px auto;
}
#logo {
float: right;
text-align: right;
}
#ausgabe_table {
font-size: 9px;
border: 1px;
border-color: #000000;
}
#footer {
text-align: right;
width: 750px;
margin: 0px auto;
}
#button_text {
font-size: 9px;
}
hr {
color: #000000;
background: #000000;
height: 1px;
border: none;
}
a.menu:link {
color: #FFFFFF;
text-decoration: none;
}
a.menu:visited {
color: #FFFFFF;
text-decoration: none;
}
a.menu:hover {
color: #FF0000;
text-decoration: none;
}
a.menu:active {
color: #FF0000;
text-decoration: none;
}
a.normal:link {
color: #000000;
text-decoration: underline;
}
a.normal:visited {
color: #000000;
text-decoration: underline;
}
a.normal:hover {
color: #FF0000;
text-decoration: underline;
}
a.normal:active {
color: #FF0000;
text-decoration: underline;
}


div.box {
            position:relative;
            margin:1em;
            width:400px;
            padding:0.5em 0 0 0;
            border:2px #000 solid;
            color:#000;
            background:#c0c0c0;
        }
div.box h1 {
            position:absolute;
            top:-0.5em;
            left:1em;
            margin:0;
            padding: 0;
            font-size:1em;
            font-weight:normal;
        }
div.box h1 span {
            margin: 0;
            padding:0 0.5em;
            color:#000;
            background:#c0c0c0;
            font-size:1em;
        }
</style>

</head>
<body>

<div id="aussen">
<h1>Loginbereich für das Lärmkataster</h1> <br/><br />

<!-- Ausgabe Loginformular mit Feldern: Benutzername,Kennwort -->
<form action="login.php" method="post">
    <div class="box">
       <h1><span>Anmeldeformular</span></h1>
       <table>
              <tr>
                  <td>Benutzername:</td>
                  <td><input type="text" name="name" size="20" /></td>
              </tr>
              <tr>
                  <td>Kennwort:</td>
                  <td><input type="password" name="pwd" size="20" /></td>
              </tr>
              <tr>
                  <td colspan="2"><input type="submit" value="Anmelden" /></td>
              </tr>
       </table>
    </div>
</form>

<!-- Allgemeiner Hinweis und Möglichkeit der Kontaktaufnahme -->
<p>Um sich am System anzumelden benötigen Sie einen Benutzernamen
und ein Passwort.<br />
Sollten Sie Fragen dazu haben wenden Sie Sich bitte an den
<a class="normal" href="mailto: subject=Lärmkataster">Administrator</a>.</p>
</div>

</body>
</html>
 

Anhänge

  • demo_Patematthes.jpg
    demo_Patematthes.jpg
    56,3 KB · Aufrufe: 53
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück