On my website, I have created a menu bar at the bottom. it is made from a div, with it's position:fixed. It auto expands in case of viewing on a mobile device, but my problem is that it covers up the content if it's height expands. My code looks something like the following, and I have a js-fiddle of my front website page so you can see exactly what I'm talking about.
div.navigation
{
position:fixed;
width:100%;
min-height:100px;
}
http://jsfiddle.net/dWU9P/
I would put this in a comment, but I need 50 rep :(
Play around with:
max-height:10%;
It will stop it from expanding too high, you'll have to get your menu items to accommodate less menu space in some situations.
Related
Days ago I made a simple splash screen that is currently fixed and sets a cookie when the user clicks the button (to never appear again).
Basically, It is just a div that appears in front of the main content of the page.
My problem is that even though the splash screen uses all the width and height, the scrollbar keeps appearing. I did not care about this at the first time, as it was position:fixed'd and the content was always there, impossible to move with scroll up or down.
Today I saw that on mobiles, when you scroll, sometimes you can see the content behind the splash screen.
So the main problem is the scroll bar. Therefore I decided to hide the scroll bar at all costs.
But overflow:hidden does not work.
It does not work also if I put position: relative to the parent of the splash.
How can I disable the scroll? Is there anyway I can do it with CSS? Should I use javascript to solve the problem?
Here is a fiddle of my splash and my home page:
http://jsfiddle.net/tomas2387/G8M4D/
As you can see, the splash screen is in front, but the scrolling is there, even though I use overflow:hidden.
Thanks
Adding:
html,body{
overflow:hidden;
}
Works for me
Alternatively- depending what you're specifically after, you may want to add:
html,body{
padding:0;
margin:0;
}
Then wrap everything after the modal--mobile-splashpage part within another element and hide this when the splash is being shown. You can then toggle the two (splash and content) as you see fit. See demo here
html,body{
overflow:hidden;
}
And when you hide splash screen just use jquery to get back scroll
$('html,body').css('overflow','auto');
Try this one:
body {
overflow-y: scroll;
position: fixed;
width: 100%;
}
I am using twitter bootstrap navbar and list items are shown out of navbar when I minimise my browser to some small size and scroll to the end list item.
This is what looks as below.
Navbar when browser is maximised:
Navbar when browser is minimised:
I would like to have the items stick fixed to the navbar even though the browser is minimised.
Define min-width to your Navbar. For example write like this:
.Navbar{
min-width:1000px;
}
http://davidwalsh.name/demo/css-fixed-position.php
something like this? (the yellow box saying "Wherever you go, I will find you!")
if yes, then change position to fixed for NAVIGATION.
position:fixed;
(css)
I am using a fixed width layout for a website (1000px), with the layout being centered in the screen by auto margins. However, I find that on some pages on the website, the layout is positioned slightly different than other pages for some reason. This is surprising to me, because I use Django and serve the same base template and stylesheet to each page, so I would expect them to look the same.
For example, take a look at http://crh.vkuzo.com/. If you load the "home" and "suggest" pages, the layout stays exactly the same. However, if you load the "about" page, you can see the layout move slightly to the left.
What is causing this slight movement, and how can I get rid of it?
P.S. here is the relevant CSS for the container div (at least what I think is relevant):
#wholepage {
width:1000px;
clear:left;
margin-top:10px;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
}
It is the browser's scroll bar. See: How to prevent scrollbar from repositioning web page?
Add this style:
body {
...
overflow-y: scroll;
}
For centered pages, you want the scroll-bar to be always visible (even when it's not needed). That way the page won't shift horizontally depending on whether the scroll-bar is visible or not.
The scroll bar is adjusting the layout. When the scroll bar appears on the browser window, it minimizes the width by a certain amount of pixels (the width of the scroll bar itself).
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }
I've been trying to fix a problem with my nav bar on my website. If I move from the home page to the gallery page, the nav bar changes slightly (the navigation links move up by 2 pixels), and the bar seems to shift to the right, though I'm not sure why. The same happens when you move from the gallery page to the about page, only it doesn't shift to the right.
the URL is www.peach-designs.com. The code is really too big to post, but perhaps somebody could help me by looking using Firebug or Web Developer tool.
you can also change the class id wrapper in index.php
this will make index page to be same as the other pages
enter code here
#wrapper {
margin: auto;
width: 990px;
}
I'm assuming you want the navigation on each page to be in the same place it is on your home page (it's properly centered on that page). Also, I've only tested in Firefox (because you suggested using Firebug), where your site seems to work - in Chrome there are no images.
First, remove this from galleryStyle.css:
#wrapper {
height: 599px;
margin: auto;
width: 990px;
}
Then do this on gallery.html, news.html, about.html, and contact.php:
Move <div id="main"> to outside and before <div id="wrapper">, so it ends up like this:
Doing this centres your white overlay properly. At the moment, it's a bit too far to the right.
Your wrapper div on your gallery page is narrower than your home page (only 990px). Because it's occupying less space and being centered, your nav div is nudging to the right on the gallery page to occupy the smaller space of its parent div (wrapper) than the wider space of the home page. Try using consistent sizes and you'll run into these problems less.