I have a page where I divided things like this:
- a div for the header
- a div for the menu
- a div for the content
- a div for the logon
- a div for the sidebar
Here is a jsfiddle: http://jsfiddle.net/cambraca/f9eYx/3/
You noticed that the logon div is located inside of the content page. This is because I need the logon to be exactly on top of the content area. You noticed also that the sidebar can disappear with the Hide me hyperlink.
I don’t like the logon inside of the content area. Is there any other solution? Possible to have the logon div at the same level as other div? I’m not very good at css and I’m pretty sure there is a better alternative for the logon placement.
Thanks for your help.
Well, a few of things.
First I don’t have a problem with how you have the login button placed. I think it’s fine, and it’s probably where most people would look for it.
Secondly, you have a way to hide the sidebar, but no way to show it again. You should probably change that to a .toggle() function so you can see the side bar again at some point.
Third, I wouldn’t use the line breaks in your main nav. You should use an unordered list and create each menu item as a list item.
As Tim suggested in his comment, you could create a cool login modal window, or have a login form slide down from the top. That would be pretty sweet.
But overall, the answer to your question is “I think where you have it is fine.”
EDIT
One problem you’re going to have is that this content is going to stretch as far as the width of the browser window. IF you have a really big screen it’s going to look terrible. I would recommend wrapping your content in a “wrapper” div and give it a specific size, say 960px or 1000px.
If you used the wrapper div, you could put your login button inside the wrapper.
Ultimately, there are hundreds of ways to layout this code, and if you’re positioning everything absolutely (not always the best option) it doesn’t really matter where you place it in page, because they’ll almost always end up in the same spot (depending on if it’s parents are positioned absolute/relative.
EDIT
Ok, I set up this jsfiddle. It’s not really perfect, but this is how I would do it. Or something similar. It obviously needs a ton of work and it’s not very pretty, but it’s a start.
http://jsfiddle.net/GvSSb/1/
Do you have a photoshop mockup of what you’re trying to achieve? You should really go off of that, because if you just start typing in code it’s probably not going to be as well thought out as it would if you had a visual guide to go off.
Good luck.