I have made a Horizontal Scrolling webpage.
But i have a problem with my navbar which is vertically.
When I am on the Home-Screen and then go to another view, everything seems to be perfect, but when I go back, for example from "kontakt" to "über mich" the content is under the navbar.
I have tried to put in a margin-right: -60px; and a padding-right: -60px; But that isn't working.
You can watch the project on jsfiddle:
https://jsfiddle.net/615b216e/1/
Is there a way to get these Pages in the right position.
The problem is your navigation. You have a navigation ID outside you're navigation class. I put them together in the div.
https://jsfiddle.net/615b216e/3/
<div class="nav" id="navigation">
Hope this helps you
Related
I have 2 bootstrap navbars immediately followed by 2 horizontally centered dropdown menus as follows...
<div class="bodyWrapper">
<!-- top navbar - doesn't change size-->
<div class="navbar navbar-fixed-top navbar-inverse nav-top">
...
</div>
<!-- bottom navbar - collapses and changes size-->
<nav class="navbar navbar-inverse navbar-static-top" >
...
</nav>
<!-- 2 dropdown menus, always centered, and underneath the navbars-->
<div style="width: 100%;">
<div style="position: relative; left: 50%; top: -20px;">
<nav id="menu" class="menu">
</nav>
<nav id="menu2" class="menu">
</nav>
</div>
</div>
</div>
With just this setup, a horizontal scroll bar appears on mobile devices allowing the user to scroll across to nothing but blank space, other than my top navbar (which for some reason continues to fill the whole screen). I don't know why this happens but to solve it, I can add this CSS...
.bodyWrapper {
position : relative;
overflow : hidden;
}
(I experimented first applying overflow/overflow-x:hidden properties to body/html but it didn't remove the scroll bar on my iPhone).
But the problem with this option is that since the dropdown menus are now inside a wrapper with overflow:hidden, when the user tries to expand them they're cut off.
The only solution I can come up with, it to take the dropdown menus outside of the bodyWrapper div and use absolute positioning on them - but this is a pretty bad option since I'd constantly have to readjust their positioning because the height of the navbars above them can grow.
Anyway, all that's a long way of asking whether anyone can see a better way to deal with this mobile-specific (at least iPhones) issue. Thanks for any thoughts at all!
EDIT
example as requested:
http://codepen.io/d3wannabe/pen/gaVXzO
(the last line of the css can be commented in/out to see what happens to the dropdown)
You can set display of dropdown class to inline-block and its parent to have text-align to center.
.dropdown{
display:inline-block;
}
Check out here : http://codepen.io/anon/pen/aveEoP
Sorry for the title, not sure how to describe my problem shortly.
I have a basic HTML structure like that:
<div id="container">
<div id="article">article</div>
<div id="menu">menu</div>
</div>
The
The article is on the left, and the menu on the right.
The both the article and the menu can have many innercontent, and both can be scrolled.
The menu should be fixed: scrolling the article at the very bottom should not make the menu disappear from the screen
The scrollbar to scroll the article should be at the very right of the screen (like a scrollbar on body, so basically the scrollbar should be on the container element and not on the article)
If the menu is not scrollable, or is "scrolled too much", scrolling on it should trigger the scrolling of the article.
In this JsFiddle attempt, you can see that when we scroll on the menu, once we reach the bottom and continue scrolling, it makes the article (actually the container) scroll: it is what I want. The problem is that when I scroll the article (ie the container), the menu is not fixed and will move out of the screen too.
Now check this JsFiddle of another attempt with a menu with position: absolute;. This time the menu does not scroll with the content (as wanted) but in this case when "scrolling too much" the menu, it does not start scrolling the article. Maybe it will be more clear in this JsFiddle with a menu not scrollable: we can't scroll the article when the mouse is on top of the menu.
Note I can't use pointer-events: none; on the menu, because obviously it contains buttons.
I have been using bootstrap's navbar css. Below this navbar I have a which I want to put below the navbar. However, why does it always start at the top and not below the navbar? I've looked at twitter bootstrap's example and they were able to have a positioned below the fixed navbar. Here's the link to my website. Any idea why this is?
Here's the html that I have now:
<div class="navbar navbar-fixed-top">
</div>
<section id="main">
</section>
The fixed navbar will overlay your other content, unless you add
padding to the top of the <body>. Try out your own values or use
our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
ref: http://getbootstrap.com/components/#navbar-fixed-top
I dont know why they dont put this note in bootstrap 2.3.2 but this is what you want. :)
Yesterday I fix my navbar and set the container as following
.maincontainer{ padding-top: 75px; }
75 pixel is enough and doesn't affect Bootstrap on Responsive design in Tablet and Mobile. Work perfect everywhere :)
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 this template I have been working with and I am really stuck on figuring out why the layout div is closed right away.
I looked at it with http://validator.w3.org and while there are many errors on the page, the main one is that there is some unbalance of closing and opening of divs. I am staring at it with firebug and nothing comes to mind as to why this is happening.
Any idea why the layout is so messed up here? http://www.problemio.com/problems/problem.php?problem_id=223 and why the footer is appearing on the right side of the page?
Thanks!
add </div> before <div class="footer"> , and add clear:both; to .footer{}
the footer is appearing on the right side of the page because it is in your right column div:
<div style="float: right; width: 240px;">
Your footer is inside the <div float=right> the contains the sidebar text. It cannot appear at the bottom of the page, only at the bottom of that div. If you want it to spread out at the very bottom of the, you'll have promote that footer div to be a direct child of the #layout div.