I am working on this page here for a client of mine http://sw6.us/scott/index.html
Notice the site is all based within a div, the problem is the scroll bar that is produced because the text is to long. I have edited my CSS and changed "overflow" to hidden instead of auto but this just makes the text run off the screen and you can not scroll at all.
Here is my refined HTML code
<div class="main">
<div class="blk">
....
</div>
<div class="navbar">
....
</div>
<div class="programs">
.....
</div>
<div class="blk2">
...
</div>
</div>
</body>
</html>
The site is built out of the .main div
How can I make that scroll bar appear at the far right of the browser and scroll the .main div?
If this is not possible how can I achieve this exact look with a set up that will place the scrollbar on the right edge of the browser? The reason I am doing it like this is because the client want's the site looking exactly like his .pdf mock up.
Thanks!
If you want to scroll the main div change the CSS as follows...
html, body { overflow: hidden; }
div.main { overflow: auto; }
You should also set some bottom margin to leave some space for the shadow at the bottom...
Maybe posting the PDF would help better understand for me...
try this:
<div style="height:250px; width:550px; overflow-x:scroll ; overflow-y: scroll;></div>
And if you want to hide horizontal scroll: overflow-x:hidden ;
Related
I have this page with a fixed nabber on top (using default bootstrap navbar).
The page holds a menu that includes links to different parts of the page using html anchors. The point is: the scrolling position is not perfect because I have this navbar occupying the first 50px of the page, so after clicking on the html link to anchor, the content is 50px hidden by the navbar.
What I want to do is: that the anchor link consider the first 50px to scroll it perfectly to the content.
Does anyone have an idea of how to fix it?
With Twitter Bootstrap there is a necessity to provide additional spacing when the navbar is fixed.
Underneath(or after, you might say) you'll want to provide the additional spacing required to unsheath the covered content out of mystery and into usefulness.
further reading: http://getbootstrap.com/components/#navbar-fixed-top (they actually recommend a padding-top of 70px to the body element)
You can either place a div that is 50px high over the content you want to scroll to, then anchor to that:
Link
<div id="link" style="height:50px;"></div>
<div class="content">
Content Here...
</div>
JSFiddle Demo
Or, give the content div a padding-top, or margin-top of the height of the nav bar:
Link
<div id="link" class="content">
Content Here...
</div>
CSS:
.content{
padding-top:50px;
}
JSFiddle Demo
before I ask the question here are my two constraints:
should work in IE 7+
I can only change the CSS, I can not change the HTML/JS
So, I've got two div's:
<div id="content"></div>
<div id="footer"></div>
"#content" is the content.
"#footer" is a footer which only contains a background image and nothing that is really of value.
Now, how can I hide part of the footer when the page is so long that it scrolls, but display it completely when the page doesn't scroll?
(So far, I have tried stuff like:
#footer {height: 30px; margin-bottom: -20px;}
but that doesn't seem to work...)
here you have a solution only with HTML and CSS:
Source:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
Example:
http://www.cssstickyfooter.com/
Good Luck
A horizontal scroll bar appeared on my website and the page is now wider than it was. The last thing I remember doing was adding a widget (to link a pic to another website) to the right sidebar of my page. I removed the widget but the horizontal bar still remained at the bottom of the page and the webpage is still too wide. Can you please help me in getting the page back to normal horizontal dimensions and without a horizontal scroll bar. thanks
here is the website
www.runningnurse.com
In your footer you have a div with inline CSS:
position:relative;left: 119px;
That's exactly how much the site is scrolling. An alternate style for that effect which would remove the scroll bar is this:
padding-left:119px; overflow:hidden;
The problem is in the footer, it's too wide because the div child element of the ul (ul elements are only supposed to have li as their child elements!) is positioned to the left.
You have this HTML at the bottom of the page:
<div id="footer">
<ul class="footer-links">
<div style="position:relative;left: 119px; "></div>
</ul>
Use this instead:
<div id="footer">
<ul class="footer-links" style="margin-left: 133px;">
<div>...</div>
</ul>
Also the fact that the HTML contains a lot of errors might give implications when viewing in in different browsers.
The problem has to do with your footer:
add #footer{width:947px} and it gets rid of the horizontal scrollbar for me.
As #j08691 Suggested, Use overflow:hidden and your problem would be solved.
One easy way would be to hide the overflow on the body tag.
body {
overflow-x: hidden;
}
Use overflow-x
I have been working on a website for my self recently and ran into an odd problem. Whenever I would move a to the left the page would expand by the amount of pixels I had moved it left from the center. It doesn't hinder functionality but it's really annoying to have this 300-400 pixel space that you can scroll off to the side with. Maybe I'm doing something wrong but any help would be appreciated.
This is an example of what I am doing:
<html>
<body style="background-image: url('Background-Large.jpg'); text-align: center">
<div style="position:relative;top: -605px; left: 295px;"></div>
</body>
</html>
I'm not quite sure what you're trying to achieve here but if you put an 'overflow:hidden' on the body, it should allow you to position your div off the page without adding a scroll bar.
It's because your DIV is set:
left: 295px;
If you want a DIV to be in the center the first thing you should do is make a "main container":
<style type="text/css">
.wrapper {width:500px;margin:0 auto -1.5em;}
</style>
<div class="wrapper">
</div>
Then from there you can add elements inside that container thats now centered:
<div class="wrapper">
<div style="float:left;margin-left:-295px;">
</div>
</div>
The problem: I have a layout of the following:
<div class="container">
<div class="filters1">
</div>
<div class="filters1">
</div>
<div class="stream">
<div class="item"/>
<div class="item"/>
<div class="item"/>.......
</div>
</div>
I want the page to have the standard browser scroller but that it would scroll the stream div only
I tried defining the filter1 div's as position:fixed. but this causes some cross-browser problems and resizing issues. (needed chrome css hacks not to talk about IE7)
Is there a standard solution I can use, various searches did not help...
Thanks
By 'fixed' you mean 'position:fixed' or that you gave it a fixed width and lenght? (I don't why this latter option may have such difficult rendering issues).
Try
.stream {
width: XXpx; /*put your width here*/
height: XXpx; /*put height here*/
overflow:scroll;
}
EDIT: sorry misread the question, do you want the WHOLE page having scroll bars or just the DIV .stream?