zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden <label>- und <input>-Formatierung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.11.2008, 12:44
Benutzerbild von Emilie Autumn
Son of Northern Darkness
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2008
Beiträge: 31
Emilie Autumn befindet sich auf einem aufstrebenden Ast
Frage <label>- und <input>-Formatierung

Hallo!
Nachdem ich es selbst schon lange erfolglos versucht habe, suche ich nun hier mal professionelle Hilfe:

Ich habe ein Formular und möchte (ohne unnötigem Markup) die einzelnen Elemente folgendermaßen mit CSS anordnen:

mehrere <input>-Elemente in einer Zeile, die zugehörigen <label>s sollen aber über dem jeweiligen <input> stehen. Hier kann man das Formular noch ohne Formatierung sehen.

mfg
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.11.2008, 12:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

display: block; stellt sie untereinander. Wenn's auch ohne CSS funktionieren soll, hilft das gute alte <br />
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.11.2008, 13:00
Benutzerbild von Emilie Autumn
Son of Northern Darkness
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2008
Beiträge: 31
Emilie Autumn befindet sich auf einem aufstrebenden Ast
Standard

Danke für die schnelle Antwort!
Zitat:
Zitat von heiko_rs Beitrag anzeigen
display: block; stellt sie untereinander.
hm, so weit war ich auch schon, aber dann habe ich alles untereinander.
es soll aber dieser Effekt entstehen:
HTML-Code:
<tr><td><label>lorem</label></td><td><label>ipsum</label></td></tr>
<tr><td><input /></td><td><input /></td></tr>
ich habe auch schon Beispiele gesehen, dort wird mit mit float und clear gearbeitet... allerdings bin ich noch nicht dahinter gestiegen.

mfg
Mit Zitat antworten
  #4 (permalink)  
Alt 09.11.2008, 13:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich persönlich mache das so: Ein <p> (kann auch ein div sein) enthält jeweils ein label und ein input, die beide (am besten mit width) links floaten, während das p cleart.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 09.11.2008, 13:44
Benutzerbild von Emilie Autumn
Son of Northern Darkness
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2008
Beiträge: 31
Emilie Autumn befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank heiko!
ich habs mal genau andersrum gemacht wie vorgeschlagen: Lösung mit <p>
HTML-Code:
<fieldset>
    <legend>Bauteil 1</legend>
    <p>
        <label for="Bauteil_1">Bauteil</label>
        <input id="Bauteil_1" name="Bauteil_1" />
    </p>
    <p>
        <label for="Wert_1">Wert</label>
        <input id="Wert_1" name="Wert_1" />
    </p>
    <p>
        <label for="Einheit_1">Einheit</label>
        <input id="Einheit_1" name="Einheit_1" />
    </p>
    <p>
        <label for="Best.-Nr._1">Best.-Nr.</label>
        <input id="Best.-Nr._1" name="Best.-Nr._1" />
    </p>
    <p>
        <label for="Kommentar_1">Kommentar</label>
        <input id="Kommentar_1" name="Kommentar_1" />
    </p>
</fieldset>
Code:
  fieldset { display: block; width: auto; margin: 0 0 3em 0; padding: 0 1em 1em 1em; }
  label { display: block; width: 8em}
  input { display: block; width: 13em;}
  fieldset p { float:left; display: inline; margin-right: 1em;}
so hatte ich mir das vorgestellt.... nur ist die Frage, wie ich das ohne <p> hinbekomme...

mfg
Mit Zitat antworten
  #6 (permalink)  
Alt 09.11.2008, 13:59
Benutzerbild von Timo
table-layout: none;
XHTMLforum-Kenner
 
Registriert seit: 11.11.2006
Beiträge: 5.354
Timo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein LichtblickTimo ist ein Lichtblick
Standard

Vielleicht so?
HTML-Code:
<fieldset class="teile">
	<legend>Bauteil 1</legend>

	<div>       
		<label for="Bauteil_1">Bauteil</label>
		<label for="Wert_1">Wert</label>
	        <label for="Einheit_1">Einheit</label>                        
	        <label for="Best.-Nr._1">Best.-Nr.</label>
	        <label for="Kommentar_1">Kommentar</label>
	</div>
	<div class="zwei">
		<input name="Bauteil_1" id="Bauteil_1"/>
	        <input name="Wert_1" id="Wert_1"/>
	        <input name="Einheit_1" id="Einheit_1"/>
	        <input name="Best.-Nr._1" id="Best.-Nr._1"/>
	        <input name="Kommentar_1" id="Kommentar_1"/>
	</div>
</fieldset>
Code:
lable {
	float: left;
	width: 15.4em;
}
.zwei {
	margin-top: 14px;
}
input {
	float: left;
	margin-right: 2em;
	width: 13em;
}
__________________
Um weitere Erklärungen eingeblendet zu bekommen, drücken Sie bitte die Tastenkombination Alt + F4
Mit Zitat antworten
  #7 (permalink)  
Alt 09.11.2008, 14:00
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.858
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Dann würde ich input in label schreiben (das for-Attribut ist dann überflüssig) und label floaten.

Edit: Timo, das ist unschön ohne CSS
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (09.11.2008 um 14:02 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 09.11.2008, 14:21
Benutzerbild von Emilie Autumn
Son of Northern Darkness
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2008
Beiträge: 31
Emilie Autumn befindet sich auf einem aufstrebenden Ast
Standard

@Timo: an diese Lösung hatte ich auch schon gedacht, ist mir aber nicht elegant genug (Accessibility und so...) Außerdem hätte ich da dann auch wieder unnötiges Markup.

@heiko_rs: Hey! super Idee Vielen Dank!

-> Problem erledigt!
Mit Zitat antworten
Antwort

Stichwörter
formular, input, label

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Rumgefloate <label> & <input>// IE Problem code_junkie CSS 3 01.11.2007 18:52
affili link nicht direkt ansprechbar wie formatierung? docki CSS 5 21.04.2007 13:11
CSS Formatierung von Überschriften deepblue CSS 3 09.03.2007 10:40
Formatierung von Curser bei <input> emil CSS 4 29.06.2006 18:05
Beschränken einer Formatierung auf eine Class/Id? Someday CSS 10 12.01.2005 21:30


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:49 Uhr.