Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
So here is the layout that I'm having a bit of trouble with. The main problem I am having is that the very top black bar needs to appear if the user is logged into the site. If the user is not logged in I don't want them to see the bar at all. Which would look like this.
Since the header area is needed to stretch 100% of the browser window, I applied the header bars as a background repeated on the x-axis for the body tag. Only thing is with this is now I have no control over that top black bar b/c its not a div. So I tried thinking of a way to add the 3 bars (black, search, and navigation) individually as divs. I managed to get them to look correctly in the wrapper, but of course as soon as I put in the container for the site, they immediately were the width of the site not the width of the browser. Only other option I can think of is to use style switching with cookies. So when the user is logged in it pulls one style sheet with the top black bar area. When there not logged in it pulls the other style sheet that is without the black bar at the top. If there is a easier way to do this I'm all ears. I'm still fairly new to complete CSS layouts. Any help from you guys would be greatly appreciated. -
If you are happy using JavaScript you could try turning off (or on) the display of the chosen elements using a little conditional write statement.
The general idea would be as follows...
<script>
(function(){if(loggedin){document.write("<style>#navbar,#blackbar{display:none}</style>")})();
</script>
The default behaviour would be display:block so this script would hide the element(s) depending on the truth value of the variable "loggedin".
I don't know if that is quite what you want but happy to correspond via http://www.w3a2z.net/ -
I mean the easiest thing to do would be to just not include that markup on the page. So assuming that you are using a Cookie or Session to see if the user if not logged in, just add in a simple if statement (not sure which programming language you are using):
if(!userIsLoggedIn) {
//Display the markup for the top bar
}
1 to 3 of 3