johnsmith153 Posted October 2, 2008 Share Posted October 2, 2008 This does a decent nav bar, but when the browser window is smaller, or for whatever reason the text in the left panel is too much, it doesn't scroll. What do I need to change? body{ margin:0; padding:50px 0 0 300px; background:#ffffff; } div#header{ position:absolute; z-index:1; top:0; left:300px; width:100%; height:50px; background:#cccccc; color: #000000; } div#left-sidebar{ position:absolute; top:0; left:0; width:300px; background:#ffffff; color: #000000; } div#content{ margin:0; padding:50px 0 0 300px; background:#ffffff; } body>div#header{ position:fixed; } body>div#left-sidebar{ position:fixed; } * html body{ overflow:hidden; } * html div#content{ height:100%; overflow:auto; } input { background: #FFFFFF !important; } Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 2, 2008 Share Posted October 2, 2008 add overflow:auto; to whatever div your nav bar is Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 3, 2008 Author Share Posted October 3, 2008 Thanks, but I have tried this. There is definitely something wrong with the code. if anyone has the time to quickly test it out. Just put lots of text in these 3 divs <div id="left-sidebar"> <div id="content"> <div id="header"> I can sort of get the left pane to show scrollbars - but they hardly move - still not showing the full text Quote Link to comment Share on other sites More sharing options...
nadeemshafi9 Posted October 3, 2008 Share Posted October 3, 2008 or u can float the text of the menu and clearboth underneath it Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 3, 2008 Author Share Posted October 3, 2008 Sorry, I dont get this. Obviously my CSS is not good. Could someone just say - replace the line where it says "xyx" with "hjhhh" etc. Thanks anyway. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 3, 2008 Share Posted October 3, 2008 im not sure what your trying to get for content but absolute pos is bad for this.. are you making it like this http://lawrenceguide.org/test.html or are you wanting the left nav | header header header header header left nav | header header header header header left nav | header header header header header left nav | ----------------------------------- left nav | ContentContentContentContentContent left nav |ContentContentContentContent left nav | ContentContentContentContent left nav |ContentContentContentContent Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 4, 2008 Author Share Posted October 4, 2008 I would like it like: left nav | header header header header header left nav | header header header header header left nav | header header header header header left nav | ----------------------------------- left nav | ContentContentContentContentContent left nav |ContentContentContentContent left nav | ContentContentContentContent left nav |ContentContentContentContent The left nav holds text/buttons etc so it fits perfectly for 1024x768 screen, so normally no probs, but if someone using 800x600 or the browser isnt fully open, then hopefully they would get the scrollber. At the moment, they just wont be able to see all the text - which is obviously not good. Content to just scroll as now, which it does using the main browser scrollbar (not a scrollbar generated by css/html) - this is perfect. Header not to move really (ie display an advertisement etc.) - this also works fine now. Thanks. Quote Link to comment Share on other sites More sharing options...
dropfaith Posted October 4, 2008 Share Posted October 4, 2008 you should just use percentages then the nav will resize better i added a container div to prevent the full screen then you set header and content to 70 percent and leftnav to 30 percent Something like below should work alot better then what you were trying.. <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><style> body{ margin:0; background:#ffffff; } div.contain {width:80%;margin:0 auto;} div#header{width:70%;overflow:auto;height:50px;background:#cccccc;color: #000000;float:right;} div#content {width:70%;float:right;overflow:auto;height:100%; background:#ffffff;} div#left-sidebar {border:1px solid #f00;width:29%;float:left;overflow:auto;background:#ffffff;color: #000000;} </style> </head><body> <div class="contain"> <div id="header"></div> <div id="left-sidebar">this is the left side<br> </div> <div id="content"></div> </div></body></html> Quote Link to comment Share on other sites More sharing options...
johnsmith153 Posted October 9, 2008 Author Share Posted October 9, 2008 I have found another solution. Add: height:100%; overflow:auto; within the div#left-sidebar{ style Thanks for your help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.