Axel Richter: float:right und max-width

Beitrag lesen

SELF-Forum

float:right und max-width

Axel Richter
+2 Informationen zu den Bewertungsregeln

Hallo,

  1. Ja ich weiss: das viele Javascript-Geraffel ist unnötig, böse und in diesem Fall aber gewollt und nötig.
    Warum "in diesem Fall aber gewollt und nötig"? Mal davon abgesehen, dass Dein DIV mit display:none so gar nicht zu sehen wäre.

Gewollt und nötig, weil ich keine Ahnung habe, wie ich dieses "Fensterchen" anders realisieren sollte (ausser mit nem richtigen Fenster - aber das "darf" ich nicht :/)

Ja, mir ging es um Deine Frage hier. Dafür ist nur der HTML-Code relevant. Deine JSP-For-Schleife verwirrt nur.

Was ich aber eigentlich haben möchte, ist folgendes:

+--------------------------+
|                  +-----+ |
| [] Test1         |     | |
| [] Test2         +-----+ |
| [] Test3                 |
| [] TestMitSehrLangemText |
|                          |
|                          |
+--------------------------+

  1. Die 300px sollen _nicht_ komplett ausgefüllt werden .oO(wozu eigentlich die Angabe max-width dann?)
  2. Die Breite des divs soll sich an dem langen Text orientieren.
  3. Der Button soll so weit wie möglich auf die rechte Seite rutschen (abhängig wie lang der lange Text ist natürlich).
  4. Nach Möglichkeit soll der Button direkt in der ersten Zeile sitzen ;) Aber hier gebe ich mich auch mit Schumeleien zufrieden.

Deine vorherigen Darstellungen konnte ich nicht nachvollziehen. Dein Button ist im Quelltext hinter der ersten Checkbox. Ohne float:right steht er auch dort, nämlich auf der Grundlinie der Zeile in der die erste Checkbox steht. Er ragt nicht in die zweite Zeile hinein. Mit float:right tut er das, weil eben die Zeilen 2-n um ihn fließen können. Würde er _vor_ der ersten Checkbox stehen, könnte auch diese um ihn fließen.

Deine Breitenvorgaben lassen sich allerdings nicht mit float und einer absoluten Positionierung realisieren. Deshalb würde ich den Button auch noch absolut in dem DIV positionieren.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Titel</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
img.closebtn{  
 position:absolute;  
 width:40px;  
 height:32px;  
 top:0;  
 right:0;  
}  
div.multiselect{  
 position:absolute;  
 display:inline-box;  
 top:50px;  
 left:50px;  
 border-width:2px;  
 border-style:inset ;  
 background-color:white;  
 padding:3px;  
}  
</style>  
</head>  
<body>  
<div class="multiselect" name="multiselectdiv">  
  <img class="closebtn" src="duke.gif">  
  <input type="checkbox" class="checkbox" name="Test1" id="Test1">  
  <label for="Test1" class="check">  
      Test1  
  </label><br>  
  <input type="checkbox" class="checkbox" name="Test2" id="Test2">  
  <label for="Test2" class="check">  
      Test2  
  </label><br>  
  <input type="checkbox" class="checkbox" name="Test3" id="Test3">  
  <label for="Test3" class="check">  
      Test3  
  </label><br>  
  <input type="checkbox" class="checkbox" name="Test4" id="Test4">  
  <label for="Test4" class="check">  
      TestMitSehrLangemText  
  </label><br>  
</div>  
</body>  
</html>

Ich hab mal den HTML-Code etwas geändert, weil es mir logischer vorkommt, dass die Checkboxen zusammen gehören. Außerdem bietet sich zur Formularfeldbeschriftung das LABEL-Element an. So wie von mir eingesetzt (mit for="") kann man nun die Checkboxen auch per Klick auf die Beschriftung aus- und abwählen.

viele Grüße

Axel

Beitrag melden
+2
Informationen zu den Bewertungsregeln