I am having an issue which I just cannot seem to pinpoint with my code.
My page is located at seamonkeymedia.co.nz/secondary.php
The problem seems to only occur when the WINDOW HEIGHT is large, you can try it out by shrinking the height of the page and watching the gap below the navbar disappear.
Essentially I need that bottom bar to be fixed to the bottom of the window - almost like it would if this was an iPad app.
Any suggestions would be helpful. I have been playing around with paddings and margins on all container elements but that shouldn't really be the issue. I am all out of ideas here.
Because I am using boilerplate & respond - it is far easier to view my code in the Browser. Please forgive me if this is an issue.
You have a height of 15% set on the #footer element. That should be 88px since that's the size of your background image.
Related
I've made rock paper scrissor game using html,css and js.When window is resized to small, some left portion of the page disappears .Using horizontal scrollbar i can scroll to right but not left.
I've checked for absolute positionings and negative margin but none worked.
What should i try ?
I expect to get entire page without any portion getting clipped off.
Hard to answer this without the code, but I would use devtools first to see what margins are being applied. You can look at the box model for each element in your dom and see what is being applied. Also, how small are you resizing? Do you have any explicit widths? If you are sizing down to 200px, but you have a div that is 250px, it clearly is going to have overflow. Devtools can also help with analyzing different devices too. Use the tool to set a size and see how your page responds, you can change the width of elements in the devtools to see if it removes the overflow.
This will sound very "noob", but I'm new to HTML/javascript/php, and so far I've been having a blast discovering new stuff. Right now though, I'm having a minor problem.
I'm trying to make a UI with lots of buttons (it's a matrix of buttons, 5x24). When the browser is maximized, it's all good, the buttons are where they're supposed to be. But when the browser is adjusted so that it becomes narrower (width becomes smaller), the buttons try to remain visible by moving on top of each other.
I want to know how to make it so that a horizontal scroll bar automatically appears.
I've tried putting everything in a <body> tag and putting style="width:100%;overflow:scroll;" but the buttons still do what they do, and that is, ending up on top of each other when they're supposed to be side by side...
Thank you very much!!!
The problem is, width: 100% means the full width of the parent element. Give your container the necessary width (in px, not %) to accomodate all your buttons. Than put that in a div with overflow: auto, and it should work.
Been struggling with this for at least a couple hours now. Tried searching around but no solution seems to be working. So anyways, I have a template that I'm working on, and the issue that I'm having is that the sidebar on the left just will not stretch all the way down! If the window is maximized, it looks totally fine. Once you resize the window though it breaks, leaving a large gap between the sidebar and the footer. It also breaks if the content goes down the page any more than it currently does...
See for yourself here: http://bakedcraft.ca/laboratory/testsites/crock/template.html
and the css: http://bakedcraft.ca/laboratory/testsites/crock/css/default.css
Any ideas?
Add position:relative to your .main class
right now your side bar is 100% height of the window, not the main container. by adding position:relative to the sidebar's parent, when the sidebar is 100% height, it becomes 100% of the main div.
Sorry, this isn't really an answer but it's not letting me write a comment...
I looked at your code in firebug (firefox + web developer add-on) and it's showing a box constraint of 467px height I tried to quickly find where this 467px are coming from but can't see it with quick look (it's 4 AM). It's inheriting that height from somewhere, most likely from a combination of other size constraints of related elements. With all the positioning you have going on, in may be hard to locate.
One suggestion I have is if you plan on making a fluid layout you should work with em's rather than straight pixels. As I said, this isn't an answer but I did notice the size constraint of your sidebar. If this problem is still open in the morning I'll see if I can get a better look at it for you.
Alright I was running your problem through my head and I think I figured it out. Forgive me cuz I'm typing this on my phone and can't use firebug to verify if I'm right or not but the constraint I noticed earlier of 467px is n't inherited from another container it's being constained by the text in the sidebar div. If u were to add more text the box will grow with it. I believe what u may want to do is make a child conatiner within the side bar div. Your main sidebar div will only house your grey background color grey. Create a child div within the sidebar div and put your text and images into those. Make sure on the parent div you make it's height 100%. The height of the elements inside the child div shouldn't need height specifications since they will be inherited from the parent sidebar div. Hope this makes sense.
You can do the fix mentioned earlier with using jquery but remember if someone shuts of their JavaScript then your issue remains and your page will break. You should try to find and fix the root cause not use a bandaid that can be taken off.
I see many sites that suffer from this, and I've only been recently been immersed in backgrounds that stretch 100%...
Examples are
http://brassblogs.com/blog/sticky-footer
http://beanstalkapp.com/
if you constrain the width of the browser and scroll right, it looks visually off: the background doesn't carry over. How could you go about fixing this?
Edit: heh, as soon as I figured out the answer myself, I got the answer.... haha.
Your problem happens because the browser doesn't know when to stop scaling the webpage when you resize the window. You'll have to specify the smallest width that your design can tolerate:
html
{
min-width: 1050px;
}
The min-width is kind of large, but if you make it much smaller, your background will bleed through and cause layout issues.
Also, you'll have some issues with layout if you use percentages along with borders, margins, and padding (which is partially why your background images aren't sticking properly).
I have a layout of fixed-pixel width (960px) with a navigation bar that has five items in it. The width of the nav div is set to 100%, but its content ends up taking exactly 960px. The navigation is a bit complicated with a set of drop-downs and links. The problem is that zooming the page out at all causes the navigation bar to get clipped and move on to the next line.
Anyone have tips for how to avoid this?
Thanks a lot.
The only sure way I've found to do it is by defining all padding and widths using 'em'. This means everything will be relative to the font size and expand/contract smoothly as you change font sizes in the browser.
Here's a simple template I put together years ago that does the trick.
Since most browsers now zoom instead of only change font size, it's not as much of a concern, but older ones like IE6 still need a little help.