I'm wondering what are the benefits of having your top row of 'important' links/buttons on a web page duplicated at the bottom?
Traditionally the bottom of forms or pages has been for boring stuff like site maps and privacy information; but; in pages where you scroll down many pages (that wrote funny) it is a pain to have to return to the top to click a link such as "Questions" or "Ask Question". I'd like the bottom to duplicate the top of a page.
Navigation in multiple places seems fine to me. I've seen plenty of pages where the main navigation items are repeated at the bottom. I think it's very handy.
It's worth investigating CSS alternatives like the stuck-in-place navigation on a site like www.anncoulter.com. This method places a navigation block to one side that stays in one place relative to the scroll position; that is, it never moves. I mention the Ann Coulter site only because it's the smoothest execution of the concept I've seen.
It doesn't seem to work in IE7, though. FF, Opera, Chrome, and Safari for Windows all work properly; in IE7 the navigation block scrolls out of sight with the top of the page.
Steve Erbach
Neenah, WI
This is quite subjective and would really depend on the web page in question. If, as you implied, the page is quite long and involves a lot of scrolling then having the links duplicated at the bottom would probably be a good idea in terms of usability. However, very long pages would possibly suggest that the web site design could do with some looking at as this is not gererally perceived as good design (again subjective as this depends on the content and function of the site.)
'Don't make me think' is generally regarded as a definitive source on web page design so would be a good place to start in getting answers to these types of issues.
Bottom line is you're free to design your page however you want and if you think it will be more user friendly to repeat your navigation at the bottom of the page then go ahead.
My webdesign is quite rusty, but 6-8 years ago it was considered good practice to repeat your navigation at the bottom of a page, as well as adding a 'back to top' link:
Home | News | Contact | Links | (Back to top)
But my personal favourite was to have the navigation div fixed, so that it stayed visible all the time, no matter how far you scrolled, as serbach suggests. But IE6 gave me quite some headaches, which is why I abandoned the idea. I believe that IE8 has an improved css implementation, so you might want to look into this.
Related
So my problem is that for some reason on one page of a website I've been fiddling with, the two navigation bars that I have (Top and Sidebar Navigation) are for no apparent reason scaled down in the Google Chrome browser, their behavior is entirely normal in both iE and Firefox. The bar's remain completely functional, but are simply scaled down perhaps to 66% of the intended size.
Here is the code for the page in question: http://pastebin.com/uvrPR1JW
Here is the code for a similar, but functioning page for reference: http://pastebin.com/5dAMREfC
They're running off the same style sheet so the issue is likely in the HTML, however the style sheet is linked in the comment section for reference. If anyone spots any reason why it would be doing anything like this it'd be great to know. And I apologize for the messy code, as I said I'm just playing around with it.
Update:
You may notice that my code includes at least one flexbox, here is question posted by another user that may be related but I can't make heads or tails of it: Chrome shrinks figure elements as they are added to a flexbox
Update: Doesn't seem to be a problem with the flexbox, the issue still exists even when I remove all content except the top header.
I'd say it's the setup of your navbar, how you have an image and you just change the position of it on hover. Chrome has a weird feature where it moves things around when there is images so I would suggest looking up how to make a proper navigation bar (It's pretty easy).
I have an issue on my company's ecommerce site. On non-widescreen monitors, if you one of our pages while the browser is zoomed to 110% or higher, the layout gets messed up (specifically, the right side Div, which comprises 80% of the page (roughly) gets pushed below the left side div).
The site is built with the Smarty templating engine and uses pinnacle cart, but both have been heavily modified by the previous developer and myself. What can be done to improve the site's versatility with browser zoom? It wouldn't be an issue, except my boss alway has her browser zoomed to 110%.
Example page: http://www.buynowornever.com/handbags/ (but any page with the filters on the left side will do it).
There's obviously something wrong with the spacing on the page, such that when the browser attempts to reformat it in the zoom, the right div gets too large and overflows. I've tried correcting this with various overflow tricks, but have been unsuccessful.
I've looked through several answers here (including How to prevent the floating layout wrapping when firefox zoom is reduced) and on other sites and have not been able to make them work for my situation. My CSS and Web Design skills are not very strong.
The issue was bad data. Some of the category headers that I was using had close divs hidden in them. This caused layout issues on some pages, but because of the hierarchy, was not utterly fatal (and chrome handles some of these problems pretty gracefully). I cleared up the data issue and the pages all work as intended.....
I really should remember GIGO in these situations.
I've been reading other posts about having horizontal scroll, but I haven't been able to do it. I took a web design class a very long time ago at my local community college, and all that was taught was basic HTML. I haven't been up to date with the latest web technology, which is why I'm considering to stop working for a singer in Los Angeles. I have tried reading tutorials, and looking at websites and looking/importing the code into Dreamweaver to see if I can understand it, but it's been hard.
Right now I was asked to have the news as just a thumbnail, but with horizontal scrolling. Right now I have the news appear in an iframe, but scrolling with a mouse is not even possible. It's also very hard to use the finger on a mobile device. What would be the best way to have something like apple.com in a simple html page? Something like just having the dots, and moving to the next page?
This is the news page of the page I work in: http://www.maria-del-pilar.com/main.html and this is the the page that loads within the iframe: http://www.maria-del-pilar.com/news.html
What do you guys recommend I should do? What would be the easiest way to scroll horizontally?
You will probably not want to hear this, but you will not make horizontal scrolling any better than what you have now without adding some javascript.
Great things can be achieved with jQuery - you will probably have to learn something new in order to use it, but hey - life is about learning, isn't it?
Also, after you learn just basics of jQuery, you will be able to use solution of somebody else and not necessarily write all code by yourself. Like this - http://www.jquery4u.com/plugins/10-jquery-horizonal-scroll-demos-plugins/
You can also abandon idea of horizontal scrolling whatsoever - I don't think it is anything special in terms of usability or design anyway. But I understand that you want to achieve what you were asked for.
Good luck
Tyler Perry has a web site, www.tylerperry.com, that as you scroll down different pages appear. Each page has links to other info within his website. My question is how is this done. Not quite sure how to re-create this. It is almost in a since like the web pages become the navigation bar and when you get to the page you want you can click the links to go deeper in to the website. I would love to do this on my web page. Any ideas would be great.
It's done with HTML5 using the <section> element. That's how the pages are defined. The styling is rather straight forward, you can keep your text in a relative format em or % to make sure they size according to browser. For the images there are css 3 ways of handling those as well.
Basically they have used HTML5 and CSS3, view it in an older browser and the site will be very different.
Could you please show me a website (preferably, a forum) that has perfect liquid layout (that does not break at all if the browser window gets resized)? Would be nice to see...
Once again, where on the web can I see a website that doesn't become a mess when squeezed down and doesn't cap its own width when enlarged?
Have you ever been concerned about that? Or a fat lot you care? 'Cause I see that popular websites (even portals, I am not going to name any) have this problem (as I consider it to be).
Well, I'd like to see what your code would be for an avatar on the left and some user's info on the right. Please see this picture to figure out what I mean: savepic.ru/780576.png
The main reason why this is broken in many places is that it's broken at the fundamental level: CSS doesn't really support fluid layouts, there are still corner cases even when you start using tables for layout. On top of that, every browser and every version of every browser does CSS a little bit different.
The net result is that even highly paid web designers can't get it right (or someone would have come up with a solution by now and every would be using that).
The only hope is that browser developers finally agree to make their products compliant to the Acid3 test. But as I write this, my Firefox 3.5.1 gets only 92%. WebKit (Safari and Google Chrome) and Opera go the full 100% (see this article).
I personally have given up on this and I won't revisit this topic until IE 7 drops below 5% in the popular usage charts which will probably take five to ten years (IE 6 is dead as a log but still gets 12%).
Smashing Magazine have a couple of posts on fluid layouts. Try searching around there to find good examples and explanations.
One of my favourite from their examples is Vivabit.
Personally I haven't been to concerned about it yet, but I probably should, with the rise of netbooks and mobile browsers. I still believe you should serve a different layout to mobile browsers, though, but it's interesting to look at possibilities of serving the same to all browsers.
Well, Slashdot has a completely fluid middle column (down to some minimum which is pretty small) with fixed-width columns to left and right. As far as I can see it doesn't cap its width (tested on my 1900x1200 monitor).
It's not a forum on the main page, but the comments to articles are kind of like it. It doesn't have the avatar example you're looking for though :(