Schluck
Threadersteller
Dabei seit: 06.02.2007
Ort: -
Alter: 41
Geschlecht: 
|
Verfasst Fr 28.03.2008 19:28
Titel Formularfelder unetreinander |
  |
|
Hallo,
mein Problem:
ich habe neben einer links floatenden Sidebar Formularfelder. Denen muss ich, damit sie ordentlich untereinander angezeigt werden, folgende Attribute geben:
label{
float:left;
clear:left;
}
input{
float:left;
clear:right;
}
Leider rutschen sie wegem dem clear: left; unter die links floatende Sidebar. Aber nicht im IE.
Ich sehe keine ander Möglichkeit die Formularfelder anders zu formatiern, da diese sich sowieso sehr merkwürdig verhalten.
Meine Frage: Der Float der Sidebar dürfte sich doch nur auf das umliegende div (content) beziehen und nicht auf die Formatierung der divs innerhalb ?Weil die Formularfelder ja noch mal in das div content eingepackt sind. Versteht mich jemand. Kann mir jemand weiterhelfen?
| Code: | body{
overflow-y:scroll;
margin-top:0;
font-family:Arial, Helvetica, sans-serif;
background-color: #F9F9F9;
}
a{
text-decoration:none;
}
.link{
color:#6B988F;
}
.link img{
border:none;
align:middle;
}
.h2{
font-size:11px;
font-weight:bold;
color:#424242;
}
.container{
width:820px;
margin-top:0;
background-color:#FFFFFF;
background-image:url(bilder/vertikaler-schatten.png);
margin-left:auto;
margin-right:auto;
background-color: #CCCCCC;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
height: auto;
margin-bottom: 0px;
padding-bottom:30px;
}
.sidebar{
margin:0;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
float:left;
width:auto;
list-style:none;
color: #424242;
height:400px;
text-decoration:none;
}
.sidebar h2 {
padding-top:0px;
width:185px;
margin:0px;
margin-left:21px;
font-weight:bold;
font-size:11px;
line-height:22px;
margin-top:5px;
color:#424242;
text-indent:10px;
background-color: #F4F4F4;
}
.formularlinks{
font-weight:bold;
color:#6B988F;
text-indent:10px;
margin-left:21px;
line-height:22px;
}
.formularlinks a{
color:#6B988F;
}
.sidebar a{
display:block;
width:185px;
color:#424242;
}
.h2 a:hover{
text-decoration:none;
background-color: #D5EAEA;
}
.h2 a:link{
text-decoration:none;
width:185px;
color:#424242;
}
.h2 a:active{
text-decoration:none;
width:185px;
background-color: #D5EAEA;
}
.footer{
background-image:url(bilder/unterer-schatten.png);
width:820px;
height:10px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
background-repeat:no-repeat;
}
.header{
height:130px;
}
.header a{
color:#969696;
}
.header p{
margin-top:0px;
position:relative;
top:10px;
left:21px;
float:left;
font-size:10px;
color: #969696;
}
.logo{
float:right;
margin-right:53px;
margin-top:10px;
border:none;
}
.headerbar{
padding-left:14px;
padding-right:auto;
margin-bottom:30px;
}
.content{
padding-left:228px;
padding-right:33px;
padding-top:5px;
min-height:400px;
}
.content h1{
margin-bottom:5px;
margin-top:0px;
font-weight:bold;
font-size:18px;
color:#56361F;
}
.content h2{
font-size:14px;
margin-bottom:5px;
margin-top:20px;
color:#56361F;}
.content p{
font-size:12px;
line-height:22px;
margin-top:0px;
margin-bottom:0px;
border-color: #000000;
}
.content a{
color:#6B988F;
}
.footer{
}
.img{
background-color: #ECE9D8;
text-decoration:none;
border:none;
margin-top:15px;
margin-left:15px;
}
.img a{
display:none;
border:none;
text-decoration:none;
}
.content ul li{
margin: 0 0 0 -20px;
}
.begleittext{
margin-top:0px;
height:110px;
}
.begleittext box{
border-top:dotted #C0C0C0 1px;
width:407px;
padding-top:10px;
margin-bottom:15px;
}
.begleittext p{
font-size:11px;
line-height:16px;
color:#424242;
font-weight:200;
}
.begleittext h1{
font-size:95%;
font-weight:bold;
color:#56361F;
}
.bildtext{
margin-top:0px;
}
.begleittext h2{
font-size:11px;
font-weight:bold;
color:#6B988F;
margin-top:5px;
}
.begleittext a{
color:#6B988F;}
.content ul{
font-size:12px;
line-height:22px;
margin-top:0px;
margin-bottom:0px;
border-color: #000000;
}
.bilderrahmen{
margin-right:30px;
width:100px;
height:100px;
background-image: url(bilder/bilderschatten/Bilder/ganzer.gif);
float:left;
border:none;
text-decoration:none;
}
.bilderrahmengross{
width:278px;
height:186px;
float:right;
margin-top:0px;
background-image: url(bilder/bilderschatten/ganzergross.gif);
}
.veranstaltungen{
margin-left:0px;
padding:10px;
border: #EAEAEA solid 1px;
margin-top:20px;
background-color: #FBFBFB;
}
.veranstaltungen h1{
float:left;
font-size:95%;
color:#6C6C6C;
}
.veranstaltungen h2{
color:#6C6C6C;
margin-left:140px;
margin-top:0px;
}
.veranstaltungen p{
margin-left:140px;
color:#424242;
}
.formular{
margin-top:20px;
padding-top:0px;
height:600px;
padding-left:10px;
width:auto;
}
.content label{
font-size:12px;
float:left;
clear:left;
width:200px;
margin-bottom:20px}
.content input{
width:270px;
float:left;
clear:right;
}
#sendenfeld{
margin-top:30px;
width:130px;}
|
| Code: | ....
<div class="sidebar">
<ul class="sidebar h2">
<li><h2><a href="home.html">› Home </a></h2>
</li>
<li><h2><a href="arbeitsfeld.html">› Arbeitsfeld</a></h2>
</li>
<li><h2><a href="angebot.html">› Angebot</a></h2>
</li>
<li><h2><a href="beratung.html">› Beratung</a></h2>
</li>
<li><h2><a href="schulung.html">› Schulung</a></h2>
</li>
<li><h2><a href="ethikkomitee.html">› Ethikkomitee</a></h2>
</li>
<li><h2><a href="kurse&tagungen.html">› Kurse & Tagungen</a></h2>
</li>
<li><h2><a href="zurperson.html">› Zur Person</a></h2></li>
<li style="margin-top:10px;" class="formularlinks"><a href="kontaktformular.html" style="color:#6B988F;">› Kontaktformular</a></li>
<li class="formularlinks"><a href="anmeldeformular.html" style="color:#6B988F;">› Anmeldeformular</a></li>
</ul>
</div>
<div class="content">
<h1>Kurse und Tagungen </h1>
<p>Wenn Sie an einer der genanten Veranstaltungen telnehmen wollen, füllen Sie doch einfach das untenstehende Formular aus. Ich werde mich dann umgehend bei Ihnen melden</p>
<div class="content formular">
<form id="form1" name="form1" method="post" action="">
<label>Veranstaltung
<input type="text" name="textfield" id="textfield" />
</label>
<label>Name
<input type="text" name="textfield" id="textfield" />
</label>
<label>Vorname
<input type="text" name="textfield2" id="textfield2" />
</label>
<label>Strasse
<input type="text" name="textfield3" id="textfield3" />
</label>
<label>PLZ/Ort
<input type="text" name="textfield4" id="textfield4" />
</label>
<label>Telefon
<input type="text" name="textfield5" id="textfield5" />
</label>
<label>E-Mail
<input type="text" name="textfield6" id="textfield6" />
</label>
<label>Arbeitgeber
<input type="text" name="textfield7" id="textfield7" />
</label>
<label>
<input type="submit" name="sendenfeld" id="sendenfeld" value="Senden" />
</label>
</form>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
</html>
|
|
|
Willkommen auf dem Portal für Mediengestalter
