nicht angemeldet
Größe eines übergeordneten Divs
Hallo!
Wie kann ich sicherstellen, dass sich ein übergeordnetes Div1 nach der Größe eines enthaltenen Div2 richtet, das Div2 also nicht über den Rand des Div1 hinausgeht?
Danke
Gruß
nance
-
Hi!
Solange du das innere div nicht anders als static positionierst oder per float oder ähnlichem aus dem Fluss nimmst und auch für das äussere div keine feste Höhe angibst, kann dir nix passieren.
Da du aber fragst, wirst du wohl ein Problem damit haben, also zeige mal ein wenig relevanten Code (oder ncoh besser eine Live-Demo)(.
Gruß
Martin
-
Hi Martin!
Hier der relevante Code:
<div class="hauptinfodiv">
<div class="linkespalte">
<p>Name</p>
</div>
<div class="rechtespalte">
<input value="" size="40" maxlength="32" type="text" name="Name">
</div>
</div>zugehörige CSS:
div {
position: absolute;
margin: 0em;
padding: 0em;
border: 0px none #000000;
}
.hauptinfodiv {
position: relative;
padding: .5em;
border: 1px solid #000000;
}
.linkespalte, .rechtespalte {
posittion: relative;
border: 1px solid #000077;
}
.linkespalte {
width: 45%;
text-align: right;
}
.rechtespalte {
width: 50%;
text-align: left;
left: 0px;
margin-left: 47%;
}Danke schon mal für deine Mühen
nance
-
Hi!
Bevor ich jetzt groß anfange, von float und CSS-Layouts zu faseln:
Das scheint doch ein Formular zu werden - warum nimmst du dafür keine Tabelle (ist IMHO eine der wenigen Situationen, in denen eine Layout-Tabelle sinnvoll ist).
Übrigens: schau dir mal das HTML-Element label an.
Gruß
Martin
-
Hi Martin!
warum nimmst du dafür keine Tabelle (ist IMHO eine der wenigen Situationen, in denen eine Layout-Tabelle sinnvoll ist).
Ich war der Meinung, dass man auf Tabellen ganz verzichten soll, es sei denn, man will eine Tabelle darstellen. Da ich die Sachen, die ins Formular kommen, per XSL bekomme, müsste ich für jeden Fakt eine Tabelle aufbauen, da ich ja nicht weiß, wie viel abgefragt werden soll.
Nach ein bisschen rumprobieren, habe ich festgestellt, dass das position:absolute im CSS-div für mein Problem verantwortlich ist. Kann ich das nicht später wieder neutralisieren?
Gruß
nance-
Hi nance!
Ich war der Meinung, dass man auf Tabellen ganz verzichten soll, es sei denn, man will eine Tabelle darstellen.
M.M.n. beinhaltet ein Formular tabellarische Daten. Vor allem sehen Formulare in Tabellenform einfach am "saubersten" aus.
Da ich die Sachen, die ins Formular kommen, per XSL bekomme, müsste ich für jeden Fakt eine Tabelle aufbauen, da ich ja nicht weiß, wie viel abgefragt werden soll.
Das ist deine Sache, es so zu programmieren, dass da was vernünftiges rauskommt. Hierbei kommt es nciht auf die Datenquelle an.
Nach ein bisschen rumprobieren, habe ich festgestellt, dass das position:absolute im CSS-div für mein Problem verantwortlich ist. Kann ich das nicht später wieder neutralisieren?
Kannst du. Mit
position:static;Allerdings ist mir an deinem Code eben was böses aufgefallen:
Ich schätze mal, du willst das wie folgt machen:
<div class="hauptinfodiv">
<div class="linkespalte">
<p>Name</p>
<p>Vorname</p>
<p>ganz viele weitere Infos</p>
</div>
<div class="rechtespalte">
<input value="" size="40" maxlength="32" type="text" name="Name">
<input value="" size="40" maxlength="32" type="text" name="Vorname">
<input value="" size="40" maxlength="32" type="text" name="weiteres">
</div>
</div>Was ist aber nun, wenn im linken Bereich ein Zeilenumbruch zu viel ist oder ein Browser die Abstände anders rendert? Dann hat du z.B. neben dem Feld für weitere Infos dann "Vorname" stehen. Das versteht dann kein Mensch mehr...
Deshalb entweder ne Tabelle oder per float (wobei ich da gerade verdammte Probleme habe, das hinzukriegen...)
Gruß
Martin
-
Hi!
Deshalb entweder ne Tabelle oder per float (wobei ich da gerade verdammte Probleme habe, das hinzukriegen...)
per float hab ich es doch noch hingekriegt (Tabellen dürftest du selbst hinkriegen)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="DE"> <head> <title>TESTSEITE</title> <style type="text/css"> [code lang=css]label {display:block; clear:left; float:left; width:15em; border:1px solid black;} input {display:block;}</style>
</head>
<body>
<label for="nachname">Nachname</label>
<input type="text" name="nachname" id="nachname" size="40" maxlength="32" value="1">
<label for="vorname">Vorname</label>
<input type="text" name="vorname" id="vorname" size="40" maxlength="32" value="2">
<label for="sonstiges">sonstiges</label>
<input type="text" name="sonstiges" id="sonstiges" size="40" maxlength="32" value="3">
</body>
</html>[/code]Gruß
Martin
-
Hallo Martin!
Hatte bisher auch Tabellen, da hat es gut funktioniert.
Kannst du. Mit
position:static;Werde ich gleich mal ausprobieren.
Ich schätze mal, du willst das wie folgt machen:
<div class="hauptinfodiv">
<div class="linkespalte">
<p>Name</p>
<p>Vorname</p>
<p>ganz viele weitere Infos</p>
</div>
<div class="rechtespalte">
...
</div>
</div>
Was ist aber nun, wenn im linken Bereich ein Zeilenumbruch zu viel ist oder ein Browser die Abstände anders rendert? Dann hat du z.B. neben dem Feld für weitere Infos dann "Vorname" stehen. Das versteht dann kein Mensch mehr...Genau das meinte ich mit "meine Daten kommen per XSL.
Da ich aber nicht genau weiß, was alles kommt und in welcher Reihenfolge und zum Teil auch in anderem Format kann ich immer nur einen Fakt auswerten. Also sieht es bei mir dann etwa so aus:<div class="hauptinfodiv">
<div class="linkespalte">
<p>Name</p>
</div>
<div class="rechtespalte">
<input value="" size="40" maxlength="32" type="text" name="Name">
</div>
</div><div class="hauptinfodiv">
<div class="linkespalte">
<p>Vorname</p>
</div>
<div class="rechtespalte">
<input value="" size="40" maxlength="32" type="text" name="Vorname">
</div>
</div>
etc.
Damit habe ich die von dir beschriebenen Probleme dann nichtliebe Grüße
nance-
Hi!
Also sieht es bei mir dann etwa so aus:
<div class="hauptinfodiv">
<div class="linkespalte">
<p>Name</p>
</div>
<div class="rechtespalte">
<input value="" size="40" maxlength="32" type="text" name="Name">
</div>
</div><div class="hauptinfodiv">
<div class="linkespalte">
<p>Vorname</p>
</div>
<div class="rechtespalte">
<input value="" size="40" maxlength="32" type="text" name="Vorname">
</div>
</div>
etc.
Damit habe ich die von dir beschriebenen Probleme dann nichtDas nicht, aber dafür eine unnötige div-Suppe. Schau dir einmal mein anderes Posting an, oder bau wenigstens sowas draus:
<div class="hauptinfodiv"> <label for="nachname">Nachname</label> <input value="" size="40" maxlength="32" type="text" name="nachname" id="nachname"> </div>Foramtierungen kriegst du dann auch mit
div.hauptinfodiv {/*Formatierung fürs div*/} div.hauptinfodiv label{/*Formatierung fürs Label*/} div.hauptinfodiv input{/*Formatierung fürs Eingabefeld*/}hin
-
Hi!
<div class="hauptinfodiv">
<label for="nachname">Nachname</label>
<input value="" size="40" maxlength="32" type="text" name="nachname" id="nachname">
</div>schaut auf jeden Fall besser aus als meine "Div-Suppe". Werde ich gleich mal austauschen. Ich habe jetzt auch mitbekommen, warum er meine Positionierungen für linke und rechte spalte einfach nicht übernommen hat: Ich hatte posittion geschrieben - irgendwie ein t zuviel. Naja: Problem erkannt - Problem gebannt. Vielen Dank nochmal für dein Hilfe nance
-
-
-
-
-
-
-