nicht angemeldet
Größenanpassung für «Div»s von NN 4.x
Hi Forum,
ich habe ein Verständnisproblem mit dem Einbetten von Elementen in einen <Div>-Bereich. Dazu zur Verdeutlichung beispielsweise folgendes Programmstück.
<div id="D1" style="position:absolute; top:100; left:100; layer-background-color:red">
<form>
<input type="button" value="Button"></input>
</form>
</div>
Also ich möchte den Bereich absolut positionieren und die Hintergrundfarbe dient nur zur Veranschaulichung. Ich hätte es gerne so, dass sich der <Div>-Bereich exakt der Größe des Buttons anpasst. Im Browser (nur NN4.x) werden um den Button rote Ränder dargestellt, die zu dem <Div>-Bereich gehören. Der <Div>-Bereich ist also größer als der Button.
Meine Fragen:
1. Warum passt der Browser die Größe nicht exakt der Größe des Buttons an? Unter dem Button ist der Rand größer als 20px. Ich seh' da keine Logik. Durch Veränderung der margin-, border- und padding-Werte konnte ich dies auch nicht beheben.
2. Wie könnte man dieses Problem am einfachsten beheben? (Eigentlich möchte ich nur die exakten Maße des Buttons bzw. eines beliebigen anderen Elementes ermitteln, die ich dann mit D1.clip.right abfragen wollte).
Also besten Dank für jeden Hinweis.
Viele Grüße
Ronald
-
Hallo Ronald
Versuch mal eine höhe und breite für den DIV anzugeben, die kleiner oder gleich der des Buttons ist.
Tschüs
Daniel
-
Hallo Ronald
Versuch mal eine höhe und breite für den DIV anzugeben, die kleiner oder gleich der des Buttons ist.
Tschüs
Daniel
Hallo Daniel,
also Dein Vorschlag klappt nur zum Teil. Bei dem Button hab ich einen rechten Rand (ca. 4px) und einen unteren (über 20px). Der rechte Rand geht weg, aber der untere nicht.
Wenn ich andere Elemente einbetten möchte, bspw. <select> hab' ich manchmal (abhängig von der Größe)auch einen oberen Rand, der geht auch nicht weg.
Viele Gruße
Ronald-
Hallo Ronald
Wenn es so nicht geht, dann mußt du es mit clip:rect(0px 100px 100px 0px); machen.
Größenangaben entsprechend anpassen.Tschüs
Daniel
-
Hallo Ronald
Wenn es so nicht geht, dann mußt du es mit clip:rect(0px 100px 100px 0px); machen.
Größenangaben entsprechend anpassen.Tschüs
Daniel
Hallo Daniel,
also das mit dem clip-Bereich werde ich wohl so machen, aber das löst noch nicht das eigentliche Problem. Ich weiß nämlich nicht wie groß der Button ist. Das hängt nämlich von der Schriftgrößeneinstellung des Browsers ab. Eigentlich geht's mir gar nicht um Buttons, sondern um <select>-Listen. Da hab' ich dann noch das weitere Problem, das die Größe der <select>-Liste auch noch von dem "size"-Wert abhängig ist, d.h. wieviele Elemente in dem scrollbaren Bereich sichtbar sind. Und den size Wert möchte ich noch von Benutzereingaben abhängig machen, d.h. ich weiß den vorher gar nicht.
Meine Grundidee war eigentlich folgende:
Egal um welches Element es geht (Button oder Liste oder ....), ich schreib' das einfach in einen neuen Layer und ermittle die Größe des Layers mit clip.right und clip.bottom. Dann dachte ich, dass ich die Größe des Elements hätte. Klappt aber eben nicht.Ich sende unten mal was zum ausprobieren mit. Wenn Du in den Browsern (IE oder NN 4.x) die Schriftgröße änderst verändern sich eben auch die Ränder auf für mich nicht nachvollziehbare Weise. Mal ist ein oberer Rand da, mal nicht. Mal ist der untere Rand kleiner, mal größer. Der rechte Rand ist nicht das Problem, den bekommt man mit "width:0" für den <Div> weg, bzw. er ist im IE gar nicht vorhanden.
Na ja, ich werde wohl einfach genügend Platz für meine <select>-Listen vorsehen. Ich versteh' die Logik dieser Größenanpassung nur einfach nicht und das nervt mich.
Erstmal vielen Dank für Deine Hinweise und falls Dir noch irgendetwas einfällt, was mir weiterhilft...
Viele Grüße
Ronald<html>
<head>
<title></title>
</head>
<body bgcolor="#FFFFFF"><div id="Div1" style="position:absolute; top:100; left:100; ;background-color:red; layer-background-color:red">
<form>
<input type="button" value="Button"></input>
</form>
</div><div id="Div2" style="position:absolute; top:200; left:200 ;background-color:red ;layer-background-color:red">
<form name="Form1">
<select>
<option>Auswahl1
<option>Auswahl2
<option>Auswahl3
<option>Auswahl4
</select>
</form>
</div><div id="Div3" style="position:absolute; top:300; left:300; background-color:red; layer-background-color:red">
<form name="Form2">
<select size=3>
<option>Auswahl1
<option>Auswahl2
<option>Auswahl3
<option>Auswahl4
</select>
</form>
</div></body>
</html>
-
-
-