Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit DIV-Box Breite

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit DIV-Box Breite

    Hallo

    ich habe eine DIV-Box:

    Code:
    <DIV id="meine_div_box">Irgend ein Text</DIV>
    dazu der style:

    Code:
    #meine_div_box {
    	height: 20px;
    	width: 1px;
    	background: #ffffff;
    	padding-left: 0px;
    	padding-right: 3px;
    	padding-top: 0px;
    	padding-bottom: 0px;
    	margin: 0px;
    }

    Diese DIV-Box befindet sich in einem Table mit 3 x 3 TD's, also eine 3x3 Matrix. Es handelt sich um einen Table wo in den Ecken und Rändern Hintergründe drin sind, damit man einen schönen dünnen Rahmen mit abgerundeten Ecken hat. Wie bei Windows in den Dialogfenstern.

    Die DIV-Box befindet sich im oberen mittleren TD, wo im Hintergrund eine Linie durchgeht (als Bild). Der background color der DIV Box ist weiss, und in die DIV-Box kommt die Überschrift. So stört die Linie im Hintergrund an dieser Stelle nicht.

    Problem: Die DIV-Box geht im MSIE und FireFox über die gesamte Breite des TD's. Da die Länge des Textes immer variieren kann, will ich da keine Festangabe in pixeln machen. Die Box soll einfach immer so breit wie nötig sein, damit der Text rein passt.

    Mit width="*" erreiche ich da nichts... hat jemand eine Idee?

  • #2
    Achtung: mit width=1px im Style klappt es nur im IE...dort ist das DIV dann so breit wie der Inhalt. Der FF ignoriert das.

    Kommentar


    • #3
      Zitat von php_frage
      Achtung: mit width=1px im Style klappt es nur im IE...dort ist das DIV dann so breit wie der Inhalt. Der FF ignoriert das.
      niente

      das heisst nach CSS-standard width:1px nicht width=1px
      und width:100% also Prozentangaben sind die Lösung.

      firefox hat zwar auch die Möglichkeit mit max-width und min-width aber die IE-Krücke nicht.
      runde Ecken kann man beim firefox auch mit -moz-border-radius:
      http://www.webreference.com/dhtml/column70/3.html

      in CSS3 dann später ohne -moz-

      hier ein Beispiel nur in Prozentangaben, der Vorteil es sieht bei jeder Auflösung gleich aus (hier ein Filmstreifen):

      Code:
      .film{position:absolute;border:1px solid #fff;left:50%;width:25%;top:0px;margin-left:-5%;font-size:8px;height:14%;}
      #film1{left:10%;background-color:silver;z-index:245;cursor:pointer;}
      #film2{left:15%;background-color:slateblue;z-index:246;}
      #film3{left:20%;background-color:teal;z-index:244;}
      #film4{left:25%;background-color:rosybrown;z-index:243;}
      #film1a{left:10%;background-color:khaki;z-index:242;}
      #film2a{left:15%;background-color:tan;z-index:249;}
      #film3a{left:20%;background-color:lightcoral;z-index:241;}
      #film4a{left:25%;background-color:indianred;z-index:247;}
      [/code]

      Kommentar


      • #4
        100%? die div-box soll doch gerade nur so groß sein wie nötig, und NICHT über die volle breite gehen...

        Kommentar


        • #5
          nimm nen <span> statt <div> oder pack in den style: display: inline;
          Und selbstverständlich dann die Breitenangabe komplett raus.

          Näheres dazu:
          http://de.selfhtml.org/css/eigenscha...ng.htm#display

          Kommentar

          Lädt...
          X