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.
Related
So when I scroll down from the landing page it sticks at the next section. I'm not sure whats happening. There's also a white bar at the bottom of my site that i can't get rid of. How do I fix a scrolling that seems to "stick" when it goes over a certain section and how do I fix white space at the bottom of my footer? Here's a link a github I created to show what I'm dealing with, too much code to copy and paste here to get a good answer
https://github.com/OakHarbor/mapletest
I checked the site, and the problem is you are using a BIG really BIG images in the background, images like "wood1.jpg" has a resolution of 6000x4000px this is a lot the other image "wood2.jpg" has almost 8200x5500px, just this image has 12mb this is like 4 times what a whole page should have of size, so when you're scrolling the page this images start to load so the "sticks" is the page suffering to load.
Your imagens should be something like 800x400 or even less and don't forget to optimize them there is tools in the web that remove all the unecessary meta information check here https://imagecompressor.com
And your "white bar" is that you set a id in your tag html "noScroll" and this css was apply to it, basicly this alow you to acess the content with scroll bars, if you don't need this feature just remove it that the white bar will disappear
#noScroll {
overflow: scroll;
}
For Stick Problem
Please keep the fixed background to scroll.
For Footer White bar
If you want to remove the white bar from the footer, please remove top: -50px from #footer id and use of margin-top: -50px instead of this and now It will be fixed.
I am working on ASP.NET MVC3 application using Twitter-bootstrap but I think that this problem is more likely to be solved with pure CSS still a bootstrap solution is also welcome.
I have a several links in my vertical menu (for the purpose of my example they are 3). Each menu has
width: 100%;
min-width: 40px;
The menu is within <p> and each paragraph is wrapped in div with:
width: 30%;
Here is my JsFiddle link. The problem is that as the screen get's smaller (smaller media, or just resizing) the menu is expanding towards the bottom but in my real design expanding is acceptable (desirable even) but I want this to happen towards the top of the page so the bottom line stays on the same level for all menus. How can I achieve that?
I think you might need to give it a height, since you only have width the browser only checks the X axis ! Try it out , height:xx%;
I have a navbar-fixed-top menu for my page and it works exactly as I want it to. The project I am working on requires flat design on one page. This means I need to go from the menu to specific parts of the page. Everythin works but since the navbar is fixed on top it covers parts of the "subpage". See this image for two browser windows next to eachother.
Question: What alternatives do I have to push the page 80px upwards (preferably without JS).
On the bootstrap page it actually tells you that you will have to add some padding to the top of the body so that it doesn't cover your other content.
Try adding this to your CSS:
body { padding-top: 70px; }
I'm trying to get a footer to stay at the bottom of the webpage and allow for different amounts of content on different pages. It works on my index.html page but when I go to the "about" page the footer floats to the middle of the page. Any advice? the website is up at http://www.concept82.com/DISupdate/index.html and the trouble page is http://www.concept82.com/DISupdate/about.html. Thanks!
For a start, you need to move your #bottom div outside of the #wrap div, so it's immediately following it. That'll get you most of the way there, but there still seems to be something on your index page that's keeping it from moving all the way to the bottom of the window.
Instead of -200px margin-top on #bottom, do 200px. That will fix it.
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; }