hopefully this is an easy one. I've got scrollbars appearing on my web page when viewed in chrome. I think it's a padding or margin issue but I haven't been able to get it sorted. Can someone take a look please?
My css:
.sub-news {width: 750px; margin: 0 0 20px 0px; padding: 0 0 0 10px; clear: both; overflow: auto; }
.sub-news h3 {font-size: 1em; margin: 5px 0 0 0;}
.sub-news a {background-color: #f39200; padding: 5px; margin: 0 0 10px 0; color: #fff; text-decoration: none;}
.sub-news img {width: 220px; height: 127px;}
.sub-news p {width: 220px;}
.first-sub-news, .second-sub-news, .third-sub-news {width: 240px; float: left; overflow: auto;}
Fiddle.
Remove the overflow: auto; CSS property from the .first-sub-news class.
Also on the .sub-news class if you don't want that to scroll either.
Note: overflow: auto; will automatically add scroll bars if the content within is greater than the defined height or width.
The CSS property overflow determines what happens to the text that doesn't fit inside the default area. Having it set to auto means that if it goes out of the boundaries, it will have a scrollbar, otherwise it will not. The other possible settings for this are:
overflow: visible; /* Appears over the top of other elements on the page */
overflow: hidden; /* Anything outside gets cut off */
overflow: auto; /* Scroll bars appear if needed */
overflow: scroll /* Scrollbar will always be present, even if there is nothing to scroll */
overflow: inherit; /* Same as parent */
remove your overflow:autos from .sub-news and .first-sub-news
http://jsfiddle.net/YeVXm/1/
Related
I'm currently working on my photography webpage. When resizing the browser down, all the html disappears from 960px downwards and shows nothing but a grey background.
Can anyone explain why this is happening?
Copied the code the best I could from adobe muse.
CSS.
#outer_wrapper {
width: auto;
height: 560px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
margin: 0 auto;}
#outer_wrapper #inner_wrapper {
width:15000px;}
#outer_wrapper #inner_wrapper.box {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border:0.0px white solid;}
#outer_wrapper #inner_wrapper.boxV {
width: auto;
height: 560px;
float: left;
margin: 0 15px 0 0;
border:0.0px white solid;}
My guess is that when you make the innerwrapper have a width of 15000px, and then proceed to turn off white-space wrapping that the content is just being pushed way off to one side and is unable to be seen. Try getting rid of the overflow-x: hidden; and overflow-y: hidden; and see what happens if you scroll all the way through the containers to see the content. Also, using overflow: hidden prevents the user from scrolling at all, which probably isn't the best solution.
My page is set at 100% width, so that my navigation bar goes across the entire screen. However, the page contents as well as the links in the nav bar are only 1000px wide and centered.
How can I add 10px on each side of the 1000px page so that when viewed in an iPhone, the text is not all the way to the edge of the screen?
ie.
html, body {
width: 100%;
}
.nav-bar {
background-color: #000;
}
.nav-bar-links {
margin: 0 auto;
width: 1000px;
}
page {
margin: 0 auto;
width: 1000px;
}
You can use the padding property like this:
.page {
padding-left: 10px;
padding-right: 10px;
}
page {
...
padding: 0 10px;
box-sizing: border-box; /* keeps it at 1000px wide *with* padding */
}
It's not clear whether you'd actually like the space outside the page element. In that case, use padding on the body.
Side note: Did you mean .page?
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?
Bear with me as I try to describe my problem.
I have auto-aligned the content of a web page so that it appears in the center using the following code:
/* Universal Rules -------------------------------------------------- */
body {
margin: 0;
padding: 0;
background: #fff;
color: #333;
/* font sizing in ems, baby. if you want to change anything, just change this.*/
font: 75%/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.ahem, hr { display: none !important; }
img { border: none; }
form { margin: 0; }
.floatleft, .alignleft { float: left; margin: 0 1em 1em 0; }
.floatright, .alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.clearboth { clear: both; }
All of my content is also wrapped in a div called "page" that has the following parameters:
#page {
width: 960px;
margin: 0 auto;
}
I don't understand why then, when you open up the page in a browser window that is clearly wider then the 960px width of the content, does the scroll bar on the bottom appear (as if there is more content to be seen on the edges).
Here is the website so you can play with it and see what I'm talking about. I hope my question is clear. Please don't hesitate for clarification. I'm hoping to solve this without changing my code too much.
Thanks
In your table, you set a min-width of 180px for the 'contact'. To make room, the page gets pushed to the right. Remove that if you can to fix this.
btw, you put a div inside the h2 element. This is not allowed and is invalid.
Alternatively, you can add the css overflow: hidden ; to the first table inside the div with id header.
What is happening is that the "Contact" table cell is wider than the table and is expanding the width of the page.
I have a div in which I need a permanent vertical scrollbar. Sometimes the scrollbar will be needed because the div will contain excess content and other times it will not be needed but I want the appearance to be consistent - even when there is not excess content in the div I want it to contain a scrollbar. I tried this but it doesn't add a scrollbar when there is no excess content:
div#collection
{
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
float: right;
width: 200px;
height: 100%;
background: white;
overflow:scroll;
}
I also tried increasing the height to 200% (html and body are set to 100%) but then the whole page scrolls - which is not what I want - I want the div alone to scroll while the rest of the page remains where it is.
Any suggestions?
Try to put a wrapper container within the div, and set it to height:101%.
Most newer browsers support CSS3's overflow-x and overflow-y:
div.verticalscroll {
overflow: auto; /* For browsers that can't do overflow-y */
overflow-y: scroll; /* Controls overflow on the y-axis */
}
See http://www.brunildo.org/test/Overflowxy2.html
Give the top container a height and an overflow-y: scroll, then have a sub container for the rest of the content that has a min-height set to be a couple pixels taller than the height of the container.
div#collection
{
margin: 0 0 0 0;
padding: 0 0 0 0;
border: 0 0 0 0;
float: right;
width: 200px;
height: 400px;
background: white;
overflow:scroll;
}
div#sub {
min-height: 402px;
}
<div id="collection">
<div id="sub">
Content goes here.
</div>
</div>
Use overflow:auto it will do what you want
Try overflow-y:scroll ... that would do the trick!
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
this can help you