PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr (https://www.php-resource.de/forum/)
-   HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/)
-   -   DIV über Bildschirmrand hinaus schieben (https://www.php-resource.de/forum/html-javascript-ajax-jquery-css-bootstrap-less/104440-div-ueber-bildschirmrand-hinaus-schieben.html)

danibert 09-01-2014 17:12

DIV über Bildschirmrand hinaus schieben
 
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?

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>

Vielen Dank im Voraus

Kropff 09-01-2014 20:30

Verpass dem #mainCntr ein overflow:hidden.

Peter


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:12 Uhr.

Powered by vBulletin® Version 3.8.2 (Deutsch)
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.3.0
[c] ebiz-consult GmbH & Co. KG