mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 03:16 Benutzername: Passwort: Auto-Login

Thema: Formularfelder unetreinander vom 28.03.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Formularfelder unetreinander
Autor Nachricht
Schluck
Threadersteller

Dabei seit: 06.02.2007
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Fr 28.03.2008 18:28
Titel

Formularfelder unetreinander

Antworten mit Zitat Zum Seitenanfang

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&amp;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>
  View user's profile Private Nachricht senden
Impigra

Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht: Männlich
Verfasst Fr 28.03.2008 21:23
Titel

Antworten mit Zitat Zum Seitenanfang

Ich bin mir jetzt nicht ganz sicher was Du meinst...

Aber wenn Du mal diese beiden Floats entfernst... weil ja nix floaten soll... sondern eben untereinander dargestellt..
Und das "Label" Element als "Block" definierst passiert genau das..

Also "display:block" für das label... ohne Floats..
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
 
Ähnliche Themen Formularfelder pdf
Mit C# Formularfelder ausfüllen
Formularfelder in Opera
PDF mit Interaktivität? (Formularfelder ausfüllen)
Formularfelder ein-/ausblenden limitiert?
frage über formularfelder
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.