Stefan: Problem bei DIV

Hallo, ich stehe vor einem Problem,

Wenn ich ein Div mit einer bestimmten Breite habe, und das Div aber dann zwangsmäßig durch aufeinanderfolgende Zeichen ohne Leerzeichen breiter wird, wie kann ich dann erreichen, das der Hintergrund des Divs trotzdem angezeigt wird ?

  1. Hi Stefan,

    wie kann ich dann erreichen, das der Hintergrund des Divs trotzdem angezeigt wird ?

    Suchst du vielleicht background-repeat?

    Grüße,
    Engin
     GYRO

    1. Hallo,

      Suchst du vielleicht background-repeat?

      Ich glaube er meint, dass ein <div> mit 100px Breite nicht größer wird, wenn ein Wort breiter als 100px ist. Das Wort hängt dann aus dem <div> heraus und der Hintergrund hört dann natürlich auch nach 100 Pixeln auf. Das einzige wäre noch overflow:visible, nutzt aber auch nur bei einem einzigen Hintergrundbild ohne Wiederholung (siehe Beispiel unten).

      Alex

      1. Hi Alex,

        Ich glaube er meint, dass ein <div> mit 100px Breite nicht größer wird, wenn ein Wort breiter als 100px ist. Das Wort hängt dann aus dem <div> heraus und der Hintergrund hört dann natürlich auch nach 100 Pixeln auf.

        Ja, stimmt, zu meiner verteidigung muss ich aber sagen, das ich das erste ergebnis, das
        mir meine Glaskugel rausgehauen hat, nicht mehr in frage gestellt habe. ;-) Oder so...

        Das einzige wäre noch overflow:visible, nutzt aber auch nur bei einem einzigen Hintergrundbild ohne Wiederholung (siehe Beispiel unten).

        Ich würde es eher so wie schon von cpw vorgeschlagen wurde, das ganze aus dem Fluss nehmen und mit min-width arbeiten,
        allerdings würde ich ein float bevorzugen.

        Grüße,
        Engin
         GYRO

  2. Hallo,

    min-width sollte helfen. Funktioniert aber scheinbar nur bei position absolute oder fixed.

    Beispiel:

      
      
    <div style="position:absolute; top:10px; left:10px; min-width:50px; background-color:green;">  
    blablablablablablablablablablablablablablablablablablablablablablablabla  
    </div>  
      
    
    

    Gruß, Christian

    1. Ganz vergessen:

      Der Internet Explorer (zumindest Version 6) unterstützt min-width nicht. Dem kann man das per Conditional Comment unterjubeln - der IE streckt die Breite eines divs nebst Hintergrund automatisch:

        
        
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
        
      <html xmlns="http://www.w3.org/1999/xhtml">  
        
      <head>  
        
       <title>  
       Test  
       </title>  
        
      <style type="text/css">  
      #meindiv  
      {  
       position:absolute;  
       top:10px;  
       left:10px;  
       min-width:50px;  
       background-color:green;  
      }  
        
      </style>  
        
      <!--[if IE 6]>  
      <style type="text/css">  
      #meindiv  
      {  
       width:50px;  
      }  
      </style>  
      <![endif]-->  
      </style>  
        
      </head>  
      <body>  
        
        
      <div id="meindiv">  
      blablablablablablablablablablablabla  
      </div>  
        
      </body>  
      </html>