Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).
If you look here: http://gomysites.com and scroll down to the twitter section you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).
Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.
I've tried setting the css for the divider exactly opposite as i did for the titter panel:
.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}
But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.
Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?
Thanks in advance.
Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?
Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.
Edit:
You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.
I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.
Related
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
I have a website which contains a large (and wide) table. The table is placed inside jquery UI tabs.
It looks something like this: http://jsfiddle.net/Tq3Rg/
For the user this can be somewhat annoying since he has to go all the way to the bottom of the table and page to scroll right.
Is it possible to make the scrollbar always appear fixed on the bottom of the page?
Set a fixed height (and don't use inline-styles):
Your altered Demo
the code:
.top{
height:10%;
}
.center{
overflow:scroll;
height:80%;
}
.bottom{
height:10%;
}
If you really want to have the scrollbars at the very bottom of your page, you could check this answer on how to achieve this without needing custom scrollbars and such stuff.
Just set some fixed height to your middle div
like
<div style="background:white;overflow-y:scroll;height:400px;">
You need a custom scrollbar to do this, have a look http://baijs.nl/tinyscrollbar/ or http://www.jquery4u.com/plugins/10-jquery-custom-scrollbar-plugins/#.T_RSYxEe4hU.
I am building a photo gallery viewer using javascript and css, but i cant center the elements. I have a back arrow photo, the photo itself, and the next arrow. these 3 photos are one next to each other, and I need to center all three of them.
Any help is appreciated, and also, I am kind of new to css/javascript/html, so dont be so hard on me.
Thank you,
Guy Z.
(you can go to guyzyl.org, enter any gallery and click on a photo to see what I mean, and what I am trying to center)
This style should help:
#viewer {
text-align: center;
white-space: nowrap;
}
Also, use a DOCTYPE.
Just looked at your site. Try adding the CSS below to the styles for your Viewer div
margin: auto;
That 'should' center the div on screen. Assuming there is enough space in the browser window.
You need to give
<div id="viewer"></div>
a fixed width and set it's left and right margins to auto.
The CSS looks like this:
#viewer{
width:500px;
margin-left:auto;
margin-right:auto;
}
To prevent the arrows from wrapping around you need to resize your photos to fit within the width of the viewer minus the width of the arrows and any padding, margins, or borders on them.
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.
I have been trying to add another button to my navigation bar at http://hawaiiislandpreservationsociety.org/ ,but the layout messes up. What do I need to tweak to get it inline with the rest of the buttons?
Much Appreciated,
Azeem
#header ul
change the width to 802px;
(then download Firebug)
adding 2px (making it 802px) to the #header ul makes it display correctly for me in firefox.
You mean the problem that "Blog" ends up on its own line? It seems like #go_learn has a padding defined which, combined with the width definition of 200px, ends up making the element actually 202px wide.