I have a sample of the new version of my non profits website up at http://www.blazingoctopuss.com
Using the top nav bar, when you go between index and about us or between index and donate, the entire page shifts about 5 pixels to the side.
However, when you go from index to services the page stays put. Also when you go between about us and donate, the page stays in one place.
So there is something about about us, and donate that is different than index and services but I cannot see what it is. They are all using the same style sheet and I can't see anything different in the way I've called the pages.
Can anyone tell me what I'm doing wrong? Thanks in advance for giving it a look!
It shifts the exact amount required to add a vertical scroll-bar (a lot more than 5 pixels, but different in every browser) whenever content exceeds the height of the window. This is normal and expected behavior, there is nothing wrong with your design in this regard.
just as Sparky 672 said. This is normal.
However, if the transition bothers you, add a (disabled) scroll-bar to the pages that don't need one by adding this line to the css:
body { overflow: auto }
now there will no page "jumps" when navigating the site.
Related
I am using wordpress and I can only add Custom CSS to it. I want to push it a bit more on the right side so that my text (article) width can increase.
Here is my website, http://www.defensionem.com/schwellenpflug/
http://www.defensionem.com.
Notice the side-bar on the right, which has a link for Facebook. I want my content to appear in the "middle" of the screen hence I added a bit of padding on the left. But I find I am unable to increase the width of the text.
How do I move the side-bar a bit to the right?
Yes I did try, but nothing worked.
Also, how do I hide the the paragraph tags?
http://www.defensionem.com/profile/Renaud-Mayers/
I typed that info in the Wordpress column. (I cannot make a new post for 90mins so I added it here. Sorry)
The easiest way is just to do lower the margin-right value:
.content-wrapper__inside.sidebar--true.sidebar--right .main-content__inside
{
margin-right: 180px;
}
Be aware that the styles are for a responsive site. So you might have to change it for other screen sizes as well.
it looks like you put your paragraph tags inside of the quotes:
"<p>Currently working on behalf of the Belgian Ministry of Defence, thanks to my high knowledge in WWII and other areas. Working in two WWII era fortresses still belonging to the Army.</p>"
just move them to the outside, or perhaps get rid of them altogether.
So I apologize in advance if this question has been answered before- I tried searching but couldn't find much on it.
A designer and I are working to create this website- www.zeinal-jundi.com
This is predominantly a one-page layout using a scroll effect to navigate to different sections, although the site's Discography section does link to a separate page for each album. We also have a fixed header that allows the navigation to be visible the whole time. Originally, I had added a margin to each section of the page to accommodate the height of the fixed header. This however made the space between each section far too large, so my designer requested I find a way around this. I was able to fix it by instead adding a value to the scroll animation script that brings the section around 250px from the top, rather than to the overall top of the page (where it would then be covered by the fixed header)
So now, I've of course encountered the issue of linking to these sections from off another page- using code like the following:
Biography
This of course links back to the front page, but brings the section up to the very top, where it is hidden by our header. I'm wondering if anyone knows of a way I can link to this section from another page but add an action similar to the one I have on the scrolling function that will bring it up to 250px down from the top of the page rather than the very top without me having to add margins to each div.
Another option of course it to just make that pesky fixed header a lot shorter, or possibly hide the site title after the page scrolls to a certain point, but our client seems pretty adamant about having the entire header visible throughout, so I of course am trying to find a work around so we won't have to rethink the entire element (if such a solution even exists).
I hope I explained this well enough! Let me know if you need to see any additional code- would love to hear your thoughts on how to achieve such a thing! :)
If you're placing the block through CSS, you can use the CSS3 :target pseudo selector to position whatever section the link pointed to, e.g.:
:target {
/* ... example:
top: 250px;
*/
}
I'm doing a website that needs to have layout such as the one here:
http://newsmartwave.net/wordpress/trego/home/homepage-1/#featured_products
I've spent 2 days researching how to do proper 2 column layout and tried different options, but none seem to work just right.
Right now I have 2 versions - http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html
The problem with the first one is that if you reduce the height of the browser's window considerably I end up with some white space bellow the sidebar and some of my text ends up outside the border (see screenshot).
The problem with eh second one is that I don't can't place a full-screen background image behind both columns.
In addition, unlike on the sample website ( http://aspenwebsites.com/mpwebsite/index.html and http://aspenwebsites.com/mpwebsite/index_alt.html) that I'm trying to duplicate, I'd like to have a vertical scroll bar appear if browser's window reaches certain minimum height.
I know people sometimes get annoyed with types of questions, but I really just can't figure this out and I did read numerous articles and examples.
I'm not asking to write code for me, although any code samples would be most appreciated. Minimally, I was hoping for directions for some good tutorial, as I really would like to master this layout. It comes up a lot in my work and I'd like to have my own code that I have 100% understanding of rather than using Wordpress.
For the 1st one, add overflow: scroll; to the #sidebar > .row rule.
You do have a fullscreen background image in the second one. It's just that #maincontent, which is in front of it, has a background:white; rule, so you can't see it.
Edit: I did not get annoyed by the way..
I'm sure some of you have seen it before, but it happened twice to me before and just now another time. Sometimes when I navigate on my site, the entire body shifts like 2 or 3 pixels to the left or the right. Although the CSS and code isn't changing...
Has anyone an idea where this behavior comes from? Or how to solve this? (I can't paste code, since it's a very large and complex website, and pasting this mass here would bother most of you guys :)
Bet it's the scrollbar either being there or not.
To get round that, force it always to show one by adding overflow-y:scroll; to your html tag.
(Edit: my brain broke)
this usually occurs when the body height is less then the window height. so you can do it by adding overflow:scroll; in css
I'm experiencing some strange behavior with a project i'm working on:
http://daft.net76.net/yah/
When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.
The lower div structure looks like the following:
<div id="lowercontent">
<div id="rulesDiv" >
<h1>Rules</h1>
<p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
Submit a combination of dice by clicking an option and clicking Score Roll.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.</p>
</div>
<div id="scoresDiv">
<h1>Scores</h1>
<p>1</p>
</div>
<p id="closeTest"><span id="close">close</span></p>
</div>
I'm using jquery functions to swap between the scores and rules.
lowercontent is a fixed width div. The inner rules and scores divs have no width.
Any ideas? Let me know if more detailed css on the divs is needed.
When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.
If it really bothers you, add this to your CSS:
html { height: 100% }
body { height: 101% }
This will force a scrollbar to always be present so the layout won't shift.
My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.
A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.
On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.
This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.
Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.
Here, at least, it's because the scrollbar on the window pops up.
There are a few ways to fix this but all are pretty hacky or imperfect:
Use a left-aligned design.
On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!
Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.
You can put the content into tabs that the user has to switch between.
Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.
Edit: See this for more tips on modal windows.