lina-: float:right und max-width

SELF-Forum

float:right und max-width

lina- Homepage des Autors
– Informationen zu den Bewertungsregeln

moin liebes Forum :)

Ich steh grad ein wenig aufm Schlauch (und erschwerend kommt hinzu, dass CSS noch nie meine Stärke war).

Ich habe ein div, in dem sich checkboxen, texte und ein Button befindet:

  
<div class="multiselect" style="display:none;" name="multiselectdiv">  
  <bean:define id="values" name="user" property="inputFolderQuery"  type="java.util.Vector"/>  
  <input type="checkbox" class="checkbox" onclick="isAllSelected(this)" name="<%=values.get(0)%>"/>  
  <span class="check" onclick="isAllSelected(this)"> <%=values.get(0)%> </span>  
  <img class="closebtn" onclick="copyValuesByClose(this,true)" src="<%=request.getContextPath()%>/img/close.gif" /><br/>  
  <%for(int i=1;i<values.size();i++){%>  
    <input type="checkbox"  class="checkbox" onclick="checkAllSelected(this)" name="<%=values.get(i)%>"/>  
    <span class="check"  onclick="checkAllSelected(this)">  
      <%=values.get(i)%>  
    </span><br/>  
  <%}%>  
</div>

1. Ja ich weiss: das viele Javascript-Geraffel ist unnötig, böse und in diesem Fall aber gewollt und nötig.
2. Ja - das ist böses HTML-Struts-Gemisch. Das Fine-Tuning kommt noch.
3. Worauf es mir ankommt: Das div soll seine Breite dynamisch bestimmen bis zu einem gewissen Grenzwert der über max-width bestimmt wird. (Ja - ich weiss: kann der IE nicht. Passt schon) Der Button im Div (closebtn) soll aber rechts stehen. Darum habe ich ihm das CSS float:right; verpasst. Dummerweise wird nun aber immer der Grenzwert als Breite für das div verwendet.

Das CSS zur ERgänzung:

  
img.closebtn{  
 float:right;  
}  
div.multiselect{  
 position:absolute;  
 top:0px;  
 max-height:90%;  
 max-width:300px;  
 overflow:auto;  
 border-width:2px;  
 border-style:inset ;  
 background-color:white;  
 padding:3px;  
}

Weiss da jemand einen Ausweg?

liebe Grüße aus Berlin
lina-

--
Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. float:right und max-width

    Axel Richter
    +1 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.

    1. Worauf es mir ankommt: Das div soll seine Breite dynamisch bestimmen bis zu einem gewissen Grenzwert der über max-width bestimmt wird. (Ja - ich weiss: kann der IE nicht. Passt schon) Der Button im Div (closebtn) soll aber rechts stehen. Darum habe ich ihm das CSS float:right; verpasst. Dummerweise wird nun aber immer der Grenzwert als Breite für das div verwendet.

    Das kann ich nicht bestätigen. Folgendes:

      
<!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{  
 float:right;  
}  
div.multiselect{  
 position:absolute;  
 top:0px;  
 max-height:90%;  
 max-width:300px;  
 overflow:auto;  
 border-width:2px;  
 border-style:inset ;  
 background-color:white;  
 padding:3px;  
}  
</style>  
</head>  
<body>  
<div class="multiselect" name="multiselectdiv">  
  <input type="checkbox" class="checkbox" name="Test1">  
  <span class="check"> Test1 </span>  
  <img class="closebtn" src="duke.gif"><br>  
    <input type="checkbox"  class="checkbox" name="Test2">  
    <span class="check">  
      Test2  
    </span><br>  
    <input type="checkbox"  class="checkbox" name="Test3">  
    <span class="check">  
      Test3  
    </span><br>  
    <input type="checkbox"  class="checkbox" name="Test4">  
    <span class="check">  
      Test4  
    </span><br>  
</div>  
</body>  
</html>

    verhält sich bei mir wie vorgesehen. Das DIV wird nie breiter als 300px, bei entsprechend schmalem Viewport wird es aber schmaler und sieht dann so aus:
    +----------+
    |          |
    | [] Test1 |
    |   +-----+|
    |   |     ||
    |   +-----+|
    | [] Test2 |
    | [] Test3 |
    | [] Test4 |
    |          |
    +----------+

    viele Grüße

    Axel

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. float:right und max-width

      Axel Richter
      – Informationen zu den Bewertungsregeln

      Hallo,

      Das kann ich nicht bestätigen. Folgendes:
      verhält sich bei mir wie vorgesehen. Das DIV wird nie breiter als 300px, bei entsprechend schmalem Viewport wird es aber schmaler und sieht dann so aus:
      +----------+
      |          |
      | [] Test1 |
      |   +-----+|
      |   |     ||
      |   +-----+|
      | [] Test2 |
      | [] Test3 |
      | [] Test4 |
      |          |
      +----------+

      Kommando zurück! Das gesagte gilt für FireFox unter Windows. Diverse andere Browser (Opera, Mozilla/Linux, Konqueror) haben Probleme mit der Gleichzeitigkeit von position:absolute, als "absolut unabhängig vom Elementsfluss" einerseits und den anderen Angaben, wie max-height, max-width und overflow:auto, die ja wieder Begrenzungen durch den Elementfluss implizieren andererseits. Wobei ich hier FireFox Recht geben möchte, weil position:absolute sich ja nicht unbedingt _immer_ am Viewport orientieren muss.

      Mozilla/Linux stellt das DIV mit height:0 und width=Breite der Inhaltselemente dar, so dass man außer einer horizontalen Scrollbar nichts sieht. Opera und Konqueror ziehen wenigstens die Höhe so hoch, dass alle Elemente zu sehen sind, interpretieren aber das float:right etwas unterschiedlich.

      Ohne position:absolute verhalten sich alle meine Browser so, wie oben beschrieben.

      viele Grüße

      Axel

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. float:right und max-width

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        Wobei ich hier FireFox Recht geben möchte, weil position:absolute sich ja nicht unbedingt _immer_ am Viewport orientieren muss.

        Na und? Aus dem Fluss ist aus dem Fluss, egal um welchen Fluss es sich handelt.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. float:right und max-width

          Gunther
          – Informationen zu den Bewertungsregeln

          hi,

          Wobei ich hier FireFox Recht geben möchte, weil position:absolute sich ja nicht unbedingt _immer_ am Viewport orientieren muss.

          Na und? Aus dem Fluss ist aus dem Fluss, egal um welchen Fluss es sich handelt.

          Na und? Blocklevel Element ist Blocklevel Element, egal wie positioniert.
          Aber ganz ernsthaft:
          1.) Habe ich die Ausgangsfrage/ das Ausgangsproblem von lina nicht so ganz verstanden, und
          2.) müsste bei Axels Beispiel das DIV doch eigentlich die volle Breite des Viewports (also von <html>) einnehmen wollen - eingebremst durch das max-width, oder?
          Opera 9 Win macht das also zumindest imho schon mal verkehrt, da er/sie/es das DIV wie ein Inline Element behandelt.
          3.) Durch die absolute Positionierung eröffnet das DIV einen neuen Block Formatting Context zu dem dann wiederum das gefloatete Image gehört, oder?

          Also für etwas Erleuchtung/ Klarheit wäre ich sehr dankbar.

          Gruß Gunther

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. float:right und max-width

            Axel Richter
            – Informationen zu den Bewertungsregeln

            Hallo,

            2.) müsste bei Axels Beispiel das DIV doch eigentlich die volle Breite des Viewports (also von <html>) einnehmen wollen - eingebremst durch das max-width, oder?
            Opera 9 Win macht das also zumindest imho schon mal verkehrt, da er/sie/es das DIV wie ein Inline Element behandelt.

            Nein, Opera hat doch Recht. Es gilt die Breite zu berechnen und zwar von einem absolut positionierten Element, welches nicht von sich aus eine definierte Breite mitbringt. Hierbei gilt:
            ...
            3. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit. Then solve for 'right'.
            ...
            Opera macht das genau so.

            Left ist not auto, weil wir uns in einer rtl-Umgebung befinden, wo left, wenn nicht angegeben, gleich 0 ist.

            3.) Durch die absolute Positionierung eröffnet das DIV einen neuen Block Formatting Context zu dem dann wiederum das gefloatete Image gehört, oder?

            Richtig, und dieser Block ist eben so breit wie sein breitester Inhalt (shrink-to-fit).

            viele Grüße

            Axel

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. float:right und max-width

              Axel Richter
              – Informationen zu den Bewertungsregeln

              Hallo,

              Left ist not auto, weil wir uns in einer rtl-Umgebung befinden, wo left, wenn nicht angegeben, gleich 0 ist.

              Unsinn, wir befinden uns natürlich in einer ltr (left to right) - Umgebung, in welcher der Anfang trotzdem immer links ist ;-).

              viele Grüße

              Axel

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

            2. float:right und max-width

              Gunther
              – Informationen zu den Bewertungsregeln

              Hallo Axel,

              2.) müsste bei Axels Beispiel das DIV doch eigentlich die volle Breite des Viewports (also von <html>) einnehmen wollen - eingebremst durch das max-width, oder?
              Opera 9 Win macht das also zumindest imho schon mal verkehrt, da er/sie/es das DIV wie ein Inline Element behandelt.
              Nein, Opera hat doch Recht. Es gilt die Breite zu berechnen und zwar von einem absolut positionierten Element, welches nicht von sich aus eine definierte Breite mitbringt. Hierbei gilt:
              ...

              1. 'width' and 'right' are 'auto' and 'left' is not 'auto', then the width is shrink-to-fit. Then solve for 'right'.
                ...
                Opera macht das genau so.

              Left ist not auto, weil wir uns in einer ltr-Umgebung befinden, wo left, wenn nicht angegeben, gleich 0 ist.

              danke für den Hinweis. War ich wohl noch nicht ganz up to date, denn nach CSS 2.1 macht Opera es tatsächlich wohl richtig. Der aktuelle (1.5.0.4) Firefox richtet sich wohl noch nach der CSS 2.0 Definition, die ich persönlich wesentlich "logischer" fand. Wenn ich eine "shrink to fit" Eigenschaft für ein Blocklevelelement haben will, kann ich normalerweise ja die Display-Eigenschaft auf inline setzen.
              Für mich mal wieder ein klarer Fall von Verschlechterung (und noch mehr Kuddelmuddel im Browserverhalten) durch neue Definitionen seitens des W3Cs - schönen Dank auch!

              3.) Durch die absolute Positionierung eröffnet das DIV einen neuen Block Formatting Context zu dem dann wiederum das gefloatete Image gehört, oder?
              Richtig, und dieser Block ist eben so breit wie sein breitester Inhalt (shrink-to-fit).

              jo - s.o.

              viele Grüße Axel

              Gruß zurück
              Gunther

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

    2. float:right und max-width

      lina- Homepage des Autors
      – Informationen zu den Bewertungsregeln

      moin Axel :)

      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 :/) Zudem ist sichergestellt, dass die Leute, die sich das ansehen Javascript aktiviert haben.

      Du wirst es kaum glauben, aber an anderer Stelle wird bei onclick, die Sichtbarkeit wieder hergestellt ;)

      Leider scheine ich mich nicht richtig ausgedrückt zu haben (mein Fehler). Wenn der Viewport verkleinert wird, rutscht auch bei mir der Button nach links. Aber wenn der Viewport größer ist dann sieht dein Beispiel folgendermaßen aus:

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

      Es werden die 300 px komplett ausgefüllt. Ich kriege es jetzt nicht so dargestellt, aber der Button ist auf einer Linie mit der Checkbox2.
      Nehme ich jetzt das float:right raus, dann sieht das ganze so aus:

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

      Zwei Dinge fallen hier auf.
      1. Die 300px werden nicht komplett ausgefüllt sondern richten sich nach dem langen Text.
      2. Der Button rutscht wieder in die erste Zeile (wo er auch hingehört).
      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.

      liebe Grüße aus Berlin
      lina-

      --
      Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        1. float:right und max-width

          lina- Homepage des Autors
          – Informationen zu den Bewertungsregeln

          moin Axel :)

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

          Deine vorherigen Darstellungen konnte ich nicht nachvollziehen. [...]

          Ich sollte daran arbeiten, mich ordentlich auszudrücken ;)

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

          Ahhh.. da lag also mein Denkfehler. Vielen Dank für diese elegante Lösung.
          .oO(Ja - ich verstehe sie sogar, dank der netten Erklärung zu meinem floating-Denkfehler)

          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.

          Das mit dem Labels ist eine hervorragende Idee :) Die löst gleich noch ein anderes "Schönheitsproblem", das ich hatte. Freilich sollte mein User auch auf den Text klicken können, um die checkbox zu aktivieren. Das hatte ich umständlich mit Javascript gelöst und war damit nicht sehr glücklich. Wieder was gelernt - vielen Dank :)
          Was ich nicht verstehe ist, was du mit dem "zusammengehören" meinst. Hast du in diesem Zusammenhang auch was am html-code geändert? Wenn ja: was und warum?

          liebe Grüße und nochmal herzlichsten Dank aus Berlin
          lina-

          --
          Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. float:right und max-width

            Axel Richter
            +2 Informationen zu den Bewertungsregeln

            Hallo,

            Was ich nicht verstehe ist, was du mit dem "zusammengehören" meinst. Hast du in diesem Zusammenhang auch was am html-code geändert? Wenn ja: was und warum?

            Du hattest das Button-IMG zwischen der ersten und den restlichen Checkboxen. Das habe ich verändert und das IMG vor alle Ceckboxen gesetzt. Wenn das aber so sein soll, kannst Du das auch so lassen, weil der Button ja sowieso absolut positioniert wird. Es ändert sich halt nur das Bild für Browser (Textbrowser), die nur HTML darstellen können.

            viele Grüße

            Axel

            Beitrag melden
            +2
            Informationen zu den Bewertungsregeln

            1. float:right und max-width

              lina- Homepage des Autors
              – Informationen zu den Bewertungsregeln

              moin Axel :)

              Du hattest das Button-IMG zwischen der ersten und den restlichen Checkboxen. Das habe ich verändert und das IMG vor alle Ceckboxen gesetzt. Wenn das aber so sein soll, kannst Du das auch so lassen, weil der Button ja sowieso absolut positioniert wird. Es ändert sich halt nur das Bild für Browser (Textbrowser), die nur HTML darstellen können.

              Ok... Das habe ich glatt übersehen. Ist wahrscheinlich auch logischer so. Werd ich auf jeden Fall übernehmen - auch wenn Textbrowser für dieses Projekt nicht relevant sind. Aber fürs nächste Mal bin ich schlauer :)
              Danke!

              liebe Grüße aus Berlin
              lina-

              --
              Self-Code: ie:% fl:( br:^ va:) ls:/ fo:| rl:( ss:) de:] js:| mo:)
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln