Bar not working when scrolling page horizontally
Hello,
I'm having problems coding a top "bar" on my site:
http://jsfiddle.net/XSamK/
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{margin:0;padding:0;} .main{width:1000px;margin:10px auto;} body{border-top:30px solid black;} </style> </head><body> <div class="main">Sample Text And of course HELLO WORLD!<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et urna gravida elit ultricies sagittis. Etiam quis bibendum magna. Sed id vehicula orci. Etiam lectus ante, laoreet gravida molestie id, volutpat nec nunc. Suspendisse accumsan est vitae dui interdum, et fringilla diam suscipit. Mauris interdum, quam ut tincidunt placerat, arcu tortor luctus sapien, et malesuada mi odio eget tellus. Pellentesque risus magna, gravida in est a, mollis porta justo. In pharetra justo dolor, ut ultricies arcu feugiat suscipit. Donec vel pretium ligula. Fusce convallis erat enim, sed pellentesque mauris facilisis eget. Cras pulvinar neque augue, vitae consequat augue adipiscing eu. Vivamus at convallis purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus commodo metus diam, nec sagittis magna lacinia ac. Praesent ante justo, mollis tincidunt rutrum quis, condimentum fermentum orci. Vestibulum adipiscing ante nulla, et dignissim justo mollis at. Pellentesque ac bibendum arcu. In convallis pellentesque ultricies. Nulla ullamcorper, odio vitae pulvinar tempus, nisl augue sodales sem, sit amet elementum mi quam a enim. In odio leo, cursus non volutpat quis, posuere quis mi. Aliquam eu mauris sit amet orci dictum egestas. Etiam non nisi arcu. In fringilla eros tellus, id ultricies risus iaculis a. In condimentum ultricies cursus. Integer rutrum, neque at facilisis vehicula, nunc leo ullamcorper metus, vitae scelerisque orci mauris quis tellus. Integer nec pellentesque felis. Integer dui mi, adipiscing et lorem a, accumsan molestie velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce molestie, ante in auctor iaculis, tortor sem cursus libero, et lacinia erat metus sit amet elit. Curabitur venenatis mauris nunc, eget dignissim arcu gravida et. Nam quis magna vel magna pharetra dapibus. Morbi risus eros, tristique non diam eget, malesuada placerat mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque ante turpis, porta sit amet justo vitae, scelerisque accumsan magna. Nulla ac nulla non magna euismod tempus quis vel dolor. Morbi elit ante, pretium eget dapibus quis, sollicitudin in metus. Vivamus vehicula rhoncus nibh vel commodo. Proin tincidunt orci eros, sit amet ultrices ante suscipit et. Nulla ullamcorper metus a dolor tincidunt malesuada. Cras sed nulla metus. Duis pellentesque lacus ut fermentum tristique. Etiam dignissim velit vel neque ultricies vulputate. Curabitur a felis vel mi facilisis ornare. Proin vehicula molestie sem non adipiscing. Vestibulum hendrerit bibendum mauris, eget semper arcu facilisis ultricies. Vivamus tincidunt, dolor at congue dictum, felis purus facilisis neque, quis cursus est mauris at enim. Phasellus tempor nibh ac fringilla semper. Nam tincidunt metus purus, vel dignissim tellus bibendum at. Integer vestibulum, nulla id viverra dignissim, mi felis viverra risus, eget pretium mi mi et metus. </div> </body></html>
As you can see it looks to be working just fine, but when you re-size your browser to a smaller width than 1000 px and move horizontally to the right this happens:
1. This is the normal view
http://netti-tv.net/uppi/sample1.png
2. And this one is when you re-size your browsers windows and scroll to the right
http://netti-tv.net/uppi/sample2.png
I would really appreciate if someone could help me out as this is making my head explode =/
Edit: The attached files were so small that I uploaded bigger images to my website.
CSS Codes
Reply With Quote
Bookmarks