diff options
| author | Lucas Jenss <lucas@x3ro.de> | 2012-04-05 15:31:17 +0200 |
|---|---|---|
| committer | Lucas Jenss <lucas@x3ro.de> | 2012-04-05 15:31:17 +0200 |
| commit | 459f92f4956c793650dd582a68243899b2fc4b1f (patch) | |
| tree | 46905b77a78b79f583cfb6708aada536f9ffe494 | |
| parent | c0a6a23c954176e73572ff54cd6031a48aed0507 (diff) | |
| download | pycco-459f92f4956c793650dd582a68243899b2fc4b1f.tar.gz | |
Fix background not staying behind the code when scrolling horizontally
This commit fixes a bug introduced in e2032e19b05 which changed the
previous table layout to a pure CSS-based layout. Because the new layout
used a "position: fixed" background, the background would not scroll
when code lines were more wide than the browser window. This has been
fixed by making the background "position: absolute" and moving it into
the container DIV. Because the container DIV does not expand if its
content is wider than the browser window though, I had to set the body
background color to the same color than the code background and the
container background to white, so that the left (comment) part stays
white.
| -rw-r--r-- | pycco_resources/__init__.py | 10 |
1 files changed, 7 insertions, 3 deletions
diff --git a/pycco_resources/__init__.py b/pycco_resources/__init__.py index 71456b1..a052967 100644 --- a/pycco_resources/__init__.py +++ b/pycco_resources/__init__.py @@ -6,6 +6,7 @@ body { line-height: 24px; color: #252519; margin: 0; padding: 0; + background: #f5f5ff; } a { color: #261a3b; @@ -22,15 +23,18 @@ h1, h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 { margin-top: 0; } +#container { + background: white; + } #container, div.section { position: relative; } #background { - position: fixed; + position: absolute; top: 0; left: 580px; right: 0; bottom: 0; background: #f5f5ff; border-left: 1px solid #e5e5ee; - z-index: -1; + z-index: 0; } #jump_to, #jump_page { background: white; @@ -196,8 +200,8 @@ html = """\ <link rel="stylesheet" href="{{ stylesheet }}"> </head> <body> -<div id="background"></div> <div id='container'> + <div id="background"></div> {{#sources?}} <div id="jump_to"> Jump To … |