Tweet
Hallo zusammen,
ich erzeuge in folgendem Script eine blaue Fläche und einen Text darin.
Wenn ich das Browserfenster in der Breite verkleinere, entsteht ein Scrollbalken, sobald die blaue Fläche den linken Fensterrand berührt.
Der Scrollbalken soll jedoch erst entstehen, wenn der Text den Fensterrand berührt. Der Teil der blauen Fläche, der sich links vom Text befindet, soll beim Verkleinern des Fensters einfach links aus dem Fenster hinaus geschoben werden (ohne Scrollbalken). Ich habe nun schon mit einigen Einstellungen (Overflow, etc.) herumprobiert, aber ich bekomme es einfach nicht hin.
Kann mir jemand sagen, wie ich das zustande bringe?
Vielen Dank im Voraus
ich erzeuge in folgendem Script eine blaue Fläche und einen Text darin.
Wenn ich das Browserfenster in der Breite verkleinere, entsteht ein Scrollbalken, sobald die blaue Fläche den linken Fensterrand berührt.
Der Scrollbalken soll jedoch erst entstehen, wenn der Text den Fensterrand berührt. Der Teil der blauen Fläche, der sich links vom Text befindet, soll beim Verkleinern des Fensters einfach links aus dem Fenster hinaus geschoben werden (ohne Scrollbalken). Ich habe nun schon mit einigen Einstellungen (Overflow, etc.) herumprobiert, aber ich bekomme es einfach nicht hin.
Kann mir jemand sagen, wie ich das zustande bringe?
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="robots" content="" /><!-- change into index, follow --> <style type="text/css"> /* ### GENERAL ### */ * { margin: 0px; padding: 0px; } body { background:url(../pix/body_bg.jpg) top repeat-x #fff; font:12px Arial, Helvetica, sans-serif; color:#343333; padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;} /* ### MAIN CONTAINER ### */ #mainCntr {width:100%; margin: 0 auto; } /* ### CONTENT CONTAINER ### */ #contentCntr {overflow: hidden; width: 980px; margin: 0 auto;} #NavHG {overflow: hidden; width: 1010px; margin: 0 auto; background-color:#06C; } /* ### TEXT BOX ### */ .textBox{ padding:46px 0px 27px 0px; width:600px; overflow:hidden; } </style> </head> <body> <div id="mainCntr"> <div id="NavHG"> <div id="contentCntr"> <div class="textBox"> <h2>Inhalt</h2> </div> </div> </div> </div> </body> </html>
Kommentar