[CSS] CSS/HTML absolute positionierung in form fieldset table span

BladeFire · 1. Juni 2012

CSS/HTML absolute positionierung in form fieldset table span

Hallo. In google hab ich leider nichts gefunden. Das problem habe ich zwar auf andere weiße lösen können doch ich versteh einfach nicht warum es bei meinen ersten versuch nicht gelungen ist.

Das wesentliche ist in form fieldset table.

Die Fett gedruckten wörter sind die wichtigen.

Nun zu meiner Frage nr1: Als ich bei dem CSS code für die tabele einen absoluten zellenbezug verwendet habe ist das fieldset auf die min-height gegangen und die tabelle ist dahinter verschwunden. mit einer relativen positionierung funktioniert es aber. warum?

so würde es auschauen wenn ich eine absolute position hernehmen würde

Das sind die Korregierten Codes wo ich es durch einen anderen weg geschafft habe:

Hier der CSS Code

a
{
color: blue
}
a:link
{
text-decoration: none;
}
a:visited
{
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

body
{
background: repeat-x url(body.gif) #115676 scroll;
font-size: 16px;
font-family:Trebuchet MS,sans-serif;
}

div#all
{
background: #FFFFFF;
margin: 0 auto;
width: 1000px;
height:2000px;
position:relative;
left: 0;
right: 0;
bottom:0;
top:

}

div#header
{
height: 130px;
background-image: url(headerb1.png);
border-bottom: solid 5px black
}
span#titel
{
font-family: Blackadder ITC,Baskerville Old Face;
font-size: 50px;
font-weight: 700;
display: block;
text-align: center;
color: white;
visibility: hidden;

}
#nbar
{
text-align: center;
background: none;
padding: 5px 0px;
position: relative;
top: 35px
}
.nlink
{
background-color: #6666FF;
margin-right: 0px;
padding: 5px 35px;
color: black;
text-decoration: underline;
border-right: solid black 1px;
border-left: solid black 1px;
border-top: solid black 1px;
}

.nlink:hover
{
background-color: transparent;
text-decoration: none;
color: red;
}

#vollständigesrechtesmenü
{
position:absolute;
left: 780px;
height: 100%;
float: right !important;
background-color: yellow;
}
.Rmenu
{
width: 200px;
height: 450px;
background: url(grafik1.gif) repeat-x;
background-color: white;
float: right;
margin: 0px 5px 5px 5px;
border: solid 4px #145676;
}
#kommentar
{position: absolute;
top:180px;
}
#partner
{
position: absolute;
top: 717px;
}
#werbung123
{
position: absolute;
top: 1317px;

}

.ÜRmenu
{
display: block;
text-align: center;
color: #115676;
font-weight: 700;
font-family: Verdana;
}

fieldset
{
background-color: #E4E4E4;
color: black;
border: solid 3px green;
min-height:50px;
margin: 10px 0 0 5px;
line-height:30px;
}
legend
{
background: white;
border-top: solid black 2px ;
border-left: solid black 2px ;
border-right: solid black 2px;
color: sienna;
padding: 3px;
}
fieldset label
{
line-height: 30px;
}
.input
{
position:absolute;
left:140px;
}
#button1
{
position:absolute;
left:200px;
}
select
{
position:absolute;
left:140px;
}
.kritik
{
display: inline;
margin-left:100px;

}
form table
{
margin-right: auto;
margin-left: auto;
}

form td
{
width: 180px;
}
#text
{
position:relative;
left: 290px;
font-weight:700;
}
#textareÜ
{
vertical-align:-200%;

}

#hauptseite
{
width:775px;
float: left;
}
#zweitseite
{
position:absolute;
left: 780px;
float: right;
background: white;
height: 1865px;
width: 219px;
}

Hier der HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title> Dokus4us - Deutschland beliebtestes Doku Portal </title>

<link rel="stylesheet" type="text/css" href="css-allgemein.css" />

<link rel="icon" type="image/x-icon" href="icon12.png" />

</head>
<body>
<div id="all">


<div id="header" >
<span id="titel">Dokus 4 Us - Again... Under Construction</span>


<div id="nbar">

<a href="index.htm" id="test1"class="nlink">Home</a><a href="" id="test2"class="nlink">Alle Dokus</a><a href="" id="test3"class="nlink">Memberbereich</a><a href="" id="test4"class="nlink">Forum</a><a href="" id="test5"class="nlink">Kontakt</a><a href="" id="test6"class="nlink">FAQ</a><a href="" id="test7"class="nlink">Impressum</a>
</div>
</div>

<div id="hauptseite">


<form method="post" action="index.htm">

<fieldset>
<legend> Persönliche Daten </legend>

<label>Vorname:</label>
<input class="input"type="text" name="Name:" maxlength="100" /> <br />

<label>Land:</label>
<input class="input"type="text" name="Land:": maxlength="100" /><br />

<label>E-mail:</label>
<input class="input"type="text" name="E-mail Adresse:": maxlength="100" /><br /><br />

<label>Premiumcode:</label>
<input class="input"type="password" name="Premiumcode:": maxlength="11" /><br />

</fieldset>

<fieldset>
<legend> Ihr Anliegen </legend>

<label id="textareÜ">Beschreibung</label>

<textarea rows="5" cols="50" class="input" name="Beschreibung" > </textarea></br></br></br>

<input type="radio"id="button1" name="button1" value="Beschwerde" /> Beschwerde <br />
<input type="radio"id="button1" name="button1"value="Kommentar" /> Kommentar <br />
<input type="radio"id="button1" name="button1"value="Verbesserungsvorschlag" /> Verbesserungsvorschlag <br />
<input type="radio"id="button1" name="button1"value="Hilfe" /> Hilfe <br />
<input type="radio"id="button1" name="button1"value="Sonstiges"checked="checked" /> Sonstiges <br />
<label>Inhalt:</label>
<select name="inhalt" size="1" >
<option value="Dokus" label="Dokus">Dokus</option>
<option value="Style" label="Style">Style</option>
<option value="HTML" label="HTML">HTML</option>
<option selected="selected" value="Sonstiges" label="Sonstiges">Sonstiges</option>
</select>
</fieldset>

<fieldset>
<legend> Anregungen </legend>
<span id="text">Das Gefällt mir nicht:</span>
<table>
<tr>
<td> <input type="checkbox" name="Kritik" value="Navigationsleiste"></input>Navigationsleiste </td>
<td> <input type="checkbox" name="Kritik" value="Bilder und Grafiken"></input> Bilder und Grafiken</td>
<td> <input type="checkbox" name="Kritik" value="Dokumentationen"></input>Dokumentationen </td>
</tr>
<tr>
<td> <input type="checkbox" name="Kritik" value="Werbung"></input>Werbung</td>
<td> <input type="checkbox" name="Kritik" value="Stylsheets"></input>Stylsheets </td>
<td> <input type="checkbox" name="Kritik" value="Hintergrund"></input>Hintergrund </td>
</tr>
<tr>
<td> <input type="checkbox" name="Kritik" value="Seitenkopf"></input>Seitenkopf</td>
<td> <input type="checkbox" name="Kritik" value="Farben"></input>Farben</td>
<td> <input type="checkbox" name="Kritik" value="x-image"></input>x-image</td>
</tr>
</table>
</fieldset>

<fieldset>
<legend> Sonstiges</legend>
</fieldset>
</form>



</div>

<div id="zweitseite">

<div id="werbung123" class="Rmenu">
<span class="ÜRmenu">
Werbung
<hr size="1px" />
</span>
</div>

<div class="Rmenu" id="kommentar">
<span class="ÜRmenu">
Kommentare
<hr size="1px" />
</span>

</div>

<div id="partner"class="Rmenu">
<span class="ÜRmenu">
Partner
<hr size="1px" />
</span>
</div>

</div>

</div>

</body>

</html>

Frage nr2: ich habe bei meiner auswahl im formular select und option ein label attribut darinn. was nützt einen das? Als ich es mal entfernt habe konnte ich keine veränderung feststellen (ich hab mal was gehört das man es für php dann braucht. aber hat es auch nutzen für css/html?)

Das gleiche gillt fürs label TAG. da weiß ich auch nicht wofür es gut ist (ich nehms einfach weill ich es so leichter mit css formatieren kann)

(in meinen tuturial hab ich das nicht so gut verstanden.)

Daaaannkeee

Anzeige

leex · 5. Juni 2012

AW: CSS/HTML absolute positionierung in form fieldset table span

zu 1: also bei mir ändert sich da gar nix wenn ich irgendwas bei table, text oder td ändere ... sehe auch gar keine table in deinem html code (zumindest nich auf deiner homepage)... mach da doch die table da nochmal rein, das man es mit firebug analysieren kann ...

zu 2:wenn du das label angibst kannst du auch auf den danebenliegen text klicken um die checkbox oder radios zu aktivieren. wenn du es weglässt gehts nur mit nem direkten klick auf die checkbox/ den radio button.

BladeFire · 5. Juni 2012

AW: CSS/HTML absolute positionierung in form fieldset table span

Danke für deine Antwort

Also der Table ist(war schon immer^^) eig. schon da. Er ist im 3 ten Fieldset.

Das mit den Label von dir ist toll erklärt entlich weiß ich was sich das bringt DAAANKKE ))

Könntest du dir den Quellcode pls nochmal ansehn. Die checkboxen sind in der tabelle.

achja und kannst du mir auch noch sagen was sich das label TAG bring?

Nützliche Suchen

[CSS] CSS/HTML absolute positionierung in form fieldset table span

Videos zum Themenbereich