http://louisehall.clanteam.com/ is the website in question.
I designed this homepage to be horizontal scrolling only, which works on certain size monitors. However obviously on small browser windows the vertical scroll bar appears meaning the layout is ruined when the user scrolls down i.e. the 'Louise Hall' image and the navigation bar appear over the images.
I have done some research, however the answers I have found haven't really helped. It may be my amateur CSS knowledge but you catch my drift.
If you look at this website for example: http://www.banksy.co.uk/outdoors/outusa/horizontal_1.htm
The navigation area is fixed no matter what size the browser window.
Is there anyway I can fix the 'Louise Hall' and navigation bar horizontally (as it is now) but then make it scroll vertically.
Thanks
Josh
That fixed is achieved using position: fixed.
However, in the example you linked to, they are using frames. I wouldn't recommend using frames.
Related
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
I have a div area that contains pagination, but for mobile devices to access the later pages the horizontal scrollbars do not show and the visitor has to use their finger.
I'm looking for a pretty simple solution, so I thought if I can detect if overflow has occurred a little image suggesting scroll with finger should be made visible.
Is this possible and does anyone have an example of how to write this?
I'm having trouble finding some good resources or even an example of the kind of site I'm trying to build.
Essentially it is a one page, horizontally scrolling site with a fixed header and footer at the top and bottom. Rather than scroll using buttons or a scroll bar, clicking on the links in the nav menu would move the page across, most likely using jQuery, to the respective section.
In other words, just for clarity, the header, footer and background always remain in place and it is the main content section which moves left and right. So there would be half a dozen or so floated divs stacked in a single row.
I have that basic framework laid out, but I can't figure out how to allow the main content section to extend past the window size, allowing for all these divs to float in a line.
Here is a crude/minimalist demo of what I have: http://jsfiddle.net/U8ZYT/
I would appreciate any links to tutorials, examples of similar websites or any direct suggestions.
Try using jcarousel..its pretty easy to make it do exactly what your loking for and theyve got some pretty good examples to get you started
http://sorgalla.com/jcarousel/
I cannot figure out why, but on certain pages like:
http://www.serif.cz/folio.htm
the menu shifts just a bit to the left of where it appears on the rest of the site:
http://www.serif.cz/
I have compared the HTML and it looks exactly the same.
Any ideas?
Its the scroll bars. Firefox and Chrome do not display scroll bars unless the content actually needs to scroll. IE will display a disabled scroll bar if the content does not scroll.
You can add a disabled scroll bar to pages that do not have content long enough for a scroll by using the following CSS:
body{overflow-y:scroll;}
Or you can just kind of accept the fact that it's going to do it on those pages. It's just one of those things where it makes sense why it's happening, it's just annoying. :)
I suspect my question may be too general, but I hope someone with expertly knowledge of CSS could help me work out a solution.
My site looks acceptable (to me) in high-resolution monitors (1920X1080) – but on smaller-resolution screens the left site doesn't fit - and even though the horizontal scrolling appears eventually of you make the window smaller, but it appears "too late" and doesn't include anything left of the main content panel.
That's the particularly I'm particularly concerned about. There are other resolution-related problems, too.
Here's the site:
http://www.cybart.com/bscg/
I would appreciate it if you could take a look – and would be grateful for suggestions / recommendations / advice from CSS masters!
Here's how I understand your problem:
If someone goes to your website on a smaller screen, maybe 1024x768 or something, there's no scroll bar's appearing.
You need to set up a minimum width / height for a div container for the page content. Then if the browser is narrower than that you'll get the scroll bar.
I suggest instead that you make one div tag that won't be wider than say, 950 and put a nice background behind it instead. No one wants to scroll left or right in the browser.
Use width and height css tags on a div containing the page content.
I have a lower resolution screen... and I see the issue.
You might consider shrinking the size of the main content section and then shifting over the nav.
Or -- better -- auto center your main section using margin:0 auto; and then position the left nav accordingly.
The scrolling bars issue has to do with page overflow. You might be using overflow:hidden and when the page doesn't fit the browser doesn't show the scrollbars.