Ergebnis 1 bis 10 von 10
  1. 19-05-2010, 20:57 #1
    bounded
    bounded ist offline Jungspund
    registriert
    13-05-2010
    Beiträge
    15

    <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Hallo,

    Folgende HTML:
    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Experimental</title>
		<style type="text/css">
			div#wrapper {
				background-color:#CCC;
				width:80%;
				margin-left:auto;
				margin-right:auto;
				height:1000px;
			}
			div#first {
				outline:1px solid yellow;
				margin:25px 25px 0 25px;
			}
			form {
				padding:15px;
			}
			div.form_wrapper {
				border:1px solid black;
				padding:25px;
			}
			label {
				outline:1px dotted red;
			}
			input {
				outline:1px dotted red;
			}
		</style>
    </head>
    <body>
    	<div id="wrapper">
    		<div id="first">
    			<form>
    				<div class="form_wrapper">
	    				<label>Hello</label>
						<input type="text"></input>
					</div>
    			</form>
    		</div>
    	</div>
    </body>
</html>
    Das Problem ist, dass sich das umschließende Div (form_wrapper) nicht der Breite des Inhalts (hier: label und input) anpasst. Im Browser kann man das durch die schwarze Umrandung des wrappers und die gepunktete rote der beiden Kindelemente beobachten.

    Warum ist das so? Was habe ich falsch gemacht?

    bounded

    EDIT: bitte entschuldigt die fehlerhafte Formatierung
    Zitieren Zitieren
  2. 19-05-2010, 23:22 #2
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Ein Div nimmt immer so viel Platz in der Breite an, wie zur Verfügung steht.
    kkapsner.de
    Zitieren Zitieren
  3. 19-05-2010, 23:45 #3
    bounded
    bounded ist offline Jungspund
    registriert
    13-05-2010
    Beiträge
    15

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ein Div nimmt immer so viel Platz in der Breite an, wie zur Verfügung steht.
    Habe ich mir auch schon gedacht. Wenn ich die Definition von form_wrapper mit display:inline; klappt es zwar mit der Breite, aber die Box verschiebt sich und sie lassen sich, falls ich mehrere Boxen habe, auch nicht mehr untereinander plazieren...
    Zitieren Zitieren
  4. 20-05-2010, 00:46 #4
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Und warum muss das DIV genau diese Breite haben? Ich verstehe dein Problem nicht.
    kkapsner.de
    Zitieren Zitieren
  5. 20-05-2010, 12:08 #5
    bounded
    bounded ist offline Jungspund
    registriert
    13-05-2010
    Beiträge
    15

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Danke für die Antwort.

    Ich möchte die border - Eigenschaft der .form_wrapper Klasse dazu nutzen, um einen visuellen Rahmen um eine bestimmte Eingabe zu erzeugen. Dieser Rahmen soll sich der Breite des Objekts anpassen. Außerdem möchte ich rechts von div.form_wrapper noch ein paar weitere Elemente anfügen, die sich aus Usability-Gründen in der Nähe der <input> Eingabezeile befinden müssen.
    Zitieren Zitieren
  6. 20-05-2010, 15:27 #6
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Dann leg' doch um deine Eingabe noch ein <span> un gib dem den Rahmen...
    kkapsner.de
    Zitieren Zitieren
  7. 20-05-2010, 18:09 #7
    bounded
    bounded ist offline Jungspund
    registriert
    13-05-2010
    Beiträge
    15

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Deine Anregung hat mir doch noch zum Ziel verholfen:

    HTML-Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Experimental</title>
		<style type="text/css">
			div#wrapper {
				background-color:#CCC;
				width:80%;
				margin-left:auto;
				margin-right:auto;
				height:1000px;
			}
			div#first {
				outline:1px solid yellow;
				margin:25px 25px 0 25px;
			}
			form {
				padding:15px;
			}
			span.form_wrapper {
				border:1px solid black;
				padding:25px;
				float:left;
			}
			div.div_wrap {
				outline:1px dotted black;
				width:100%;
				float:left;
				margin-bottom:10px;
			}
			label {
				outline:1px dotted red;
			}
			input {
				outline:1px dotted red;
			}
		</style>
    </head>
    <body>
    	<div id="wrapper">
    		<div id="first">
    			<form>
					<div class="div_wrap">
						<span class="form_wrapper">
							<label>Hello</label>
							<input type="text"></input>
						</span>
					</div>
					<div class="div_wrap" style="margin-bottom:0px;">
						<span class="form_wrapper">
							<label>Hello</label>
							<input type="text"></input>
						</span>
					</div>
					<div style="clear:left;"></div>
    			</form>
    		</div>
    	</div>
    </body>
</html>
    Es gibt jetzt eine div_wrap Klasse mit width:100% und float:left, um die Elemente untereinander darzustellen. Die Eingabemaske wird von einem weiteren span-Container umgeben, der mit float:left; definiert wurde. Hier lag der Knackpunkt: Erst mit dieser Definition wurden die span's nicht mehr aufeinander sondern untereinander plaziert, weil jetzt die echte Höhe (also border+padding+content) und nicht nur content berücksichtigt wurde. Dieses Verhalten bei inline-Elementen war mir bislang unbekannt.

    Bild: ohne float:left;

    Zitieren Zitieren
  8. 20-05-2010, 20:20 #8
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Die beiden floats und das width: 100% beim div sind unnötig: das span braucht nur ein display: inline-block;
    kkapsner.de
    Zitieren Zitieren
  9. 20-05-2010, 21:53 #9
    bounded
    bounded ist offline Jungspund
    registriert
    13-05-2010
    Beiträge
    15

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Zitat Zitat von kkapsner Beitrag anzeigen
    Die beiden floats und das width: 100% beim div sind unnötig: das span braucht nur ein display: inline-block;
    Für neuere Browser, ja.
    Zitieren Zitieren
  10. 20-05-2010, 22:13 #10
    Avatar von kkapsner
    kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: <div> in einer <form> passt sich nicht der Breite des Inhalts an

    Für welche alten, relevanten Browser nicht?
    kkapsner.de
    Zitieren Zitieren
« Vorheriges Thema | Nächstes Thema »

Ähnliche Themen

  1. Veränderung des Inhalts eines Browserfensters über ein anderes
    Von Klammi im Forum JavaScript
    Antworten: 7
    Letzter Beitrag: 05-02-2003, 19:19
  2. Breite des Films
    Von Urmel im Forum Flash
    Antworten: 15
    Letzter Beitrag: 20-08-2002, 11:31
  3. erste zahl des variablen inhalts in php auslesen
    Von Steini1980 im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 09-03-2002, 18:14
  4. Die 15 Regeln des Schlafzimmergolfs
    Von promillo im Forum Fun
    Antworten: 3
    Letzter Beitrag: 27-12-2001, 12:38
  5. Laden des Inhalts einer txt-Datei in einen Flash Film
    Von wagi im Forum Flash
    Antworten: 2
    Letzter Beitrag: 02-01-2001, 10:03

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  

Foren-Regeln