Ergebnis 1 bis 10 von 10
  1. #1
    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

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    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.

  3. #3
    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...

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    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.

  5. #5
    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.

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    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...

  7. #7
    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;


  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    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;

  9. #9
    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.

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

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

    Für welche alten, relevanten Browser nicht?

Ähnliche Themen

  1. Antworten: 7
    Letzter Beitrag: 05-02-2003, 20:19
  2. Breite des Films
    Von Urmel im Forum Flash
    Antworten: 15
    Letzter Beitrag: 20-08-2002, 12:31
  3. erste zahl des variablen inhalts in php auslesen
    Von Steini1980 im Forum Serverseitige Programmierung
    Antworten: 3
    Letzter Beitrag: 09-03-2002, 19:14
  4. Die 15 Regeln des Schlafzimmergolfs
    Von promillo im Forum Fun
    Antworten: 3
    Letzter Beitrag: 27-12-2001, 13:38
  5. Antworten: 2
    Letzter Beitrag: 02-01-2001, 11:03

Lesezeichen

Berechtigungen

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