Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2012
    Location
    Eastleigh, UK
    Posts
    18
    Thanks
    1
    Thanked 2 Times in 2 Posts

    position: fixed; - not quite........

    I have applied "position: fixed;" to the menu on this template. This gives the desired effect that it stays put when you scroll the page, however, in different browsers the menu varies in position side to side. I am unsure why the addition of "position: fixed;" would alter this?

    Here is the template before the addition of "position: fixed;" with the menu central in the browsers I have tested.

    CSS
    Code:
    #main-nav {
      text-align: center;
     }
    
    #main-nav a:hover {
      text-decoration: underline;
      color: #001194;
    }
    
    #main-nav ul {
    	background: rgba(212, 212, 212, 0.9);
            font: normal 120% 'News Cycle', arial;
            font-weight:bold;
    	float: right;
    	list-style: none;
    	margin-top: 0em;
    	padding: 0;
            width: 100%;
            position: fixed;
    	-moz-box-shadow: rgba(0, 0, 0, 0.5)  0px 3px 5px;
    	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 5px;
    	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 5px;
    }
    
    #main-nav ul li {
    	display: inline-block;
    	margin: 0 0.5em 0 0.5em;
    	padding: 0.35em 0em 0.35em 0em;
    	border-radius: 0.5em;
    }
    
    #main-nav ul li.active {
    }
    
    #main-nav ul li a.active {
    	color: #000E75;
    	text-decoration: none;
    }
    and the html
    Code:
    <div id="header_container">
    		    <div class="container">
    			<!-- Header -->
    				<div id="header" class="row">
    					<nav id="main-nav" class="12u">
    						<ul>
    							<li><a class="active" href="index.html">Home</a></li>
    							<li><a href="examples.html">Examples</a></li>
    							<li><a href="apage.html">A Page</a></li>
    							<li><a href="anotherpage.html">Another Page</a></li>
    							<li><a href="examples.html">Examples</a></li>
    							<li><a href="apage.html">A Page</a></li>
    							<li><a href="anotherpage.html">Another Page</a></li>
    							<li>
    								<a href="">Example Drop Down</a>
    									<ul>
    										<li><a href="">Drop Down 1</a></li>
    										<li><a href="examples.html">Drop Down 2</a></li>
    										<li>
    											<a href="">Drop Down 3</a>
    												<ul>
    													<li><a href="examples.html">Sub Drop Down One</a></li>
    													<li><a href="examples.html">Sub Drop Down Two</a></li>
    													<li><a href="examples.html">Sub Drop Down Three</a></li>
    													<li><a href="examples.html">Sub Drop Down Four</a></li>
    													<li><a href="examples.html">Sub Drop Down Five</a></li>
    												</ul>
    										</li>
    									</ul>
    							</li>
    							<li><a href="contact.php">Contact</a></li>
    						</ul>
    					</nav>
    				</div>
    			</div>
        </div>
    Any help much appreciated.

    Mark
    Last edited by duke666; 03-22-2014 at 08:06 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello duke666,
    It seems odd to me that you would apply position: fixed; to the ul when it is nested 4 elements deep. I think you should probably put that on #header_container instead.

    To illustrate what I mean, before you change anything try add a background color like this and then try scrolling your page -
    Code:
    #header_container {
        background: #f00;
        height: 3em;
        margin-top: 0;
    }
    I looked at your site in FF29 and IE 11 and they both appear to place the menu in the same spot.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    WTF? Are you adding CSS with JavaScript?? Are we back in 1995 when JS was used extensively to style websites?

    Anyway, if you apply a position value of “fixed” or “absolute” the element is taken out of the natural flow of elements in the document, and if no coordinates (top/bottom/left/right properties) are specified the element stays at the original position. In your case the element is floated right and has a set width of 100% so it’s as wide as the container by default. Now, by applying position: fixed the element’s position and dimensions are becoming relative to the viewport, so 100% width means 100% of the viewport. Since no position is specified it stays at its original position, and therefore goes outside of the viewport (the float property is ignored on positioned elements).

    Your .container is 960px wide. So, if you want the navigation to be the same width, and centered horizontally while being fixed, you need to get a little creative: Assign an absolute width of 960px instead of 100%, position it 50% to the left and drag it back half of its width (480px) with a negative left margin. That would look something like this:
    Code:
    #main-nav ul {
        background: rgba(212, 212, 212, 0.9);
        font: normal 120% 'News Cycle', arial;
        font-weight:bold;
        list-style: none;
        margin-top: 0em;
        padding: 0;
        width: 960px;
        position: fixed;
        left: 50%;
        margin-left: -480px;
        -moz-box-shadow: rgba(0, 0, 0, 0.5)  0px 3px 5px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 5px;
        box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 5px;
    }

  • #4
    New Coder
    Join Date
    Sep 2012
    Location
    Eastleigh, UK
    Posts
    18
    Thanks
    1
    Thanked 2 Times in 2 Posts
    @excavator, I did originally apply it there but had the same results. Applying a background colour to #header_container resolves the left / right problem as the color is then the complete width of the screen but the menu text also moves left / right as well.

    FF displays corrrectly for me but IE11, CHrome and Safari all display the menu in a different position (when fixed).

    @VIPStephen, I'll try your example in just a minute.

    You might have gathered I'm not too experienced at this so could you explain your 'WTF' CSS/JavaScript comment please?
    Last edited by duke666; 03-22-2014 at 09:01 PM.

  • #5
    New Coder
    Join Date
    Sep 2012
    Location
    Eastleigh, UK
    Posts
    18
    Thanks
    1
    Thanked 2 Times in 2 Posts
    VIPStephen, are you talking about the script 'skel.min.js' that is used to make the template 'responsive' and load the required style sheets? If so I was under the impresion this is a 'modern' method for a 'responsive' template. May be I am wrong???

  • #6
    New Coder
    Join Date
    Sep 2012
    Location
    Eastleigh, UK
    Posts
    18
    Thanks
    1
    Thanked 2 Times in 2 Posts
    @VIPStephen, I am still interested and intrigued by your previous comments. Could you elaborate and possibly comment on the 'skel.min.js' script I am using?

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    First of all, when I looked at your example (which doesn’t seem to be online anymore) there was nothing responsive about the layout. And secondly, responsiveness has nothing to do with JavaScript, or to say it vice-versa: JS isn’t required to make a site responsive. All you need is CSS media queries, and possibly (but not necessarily) some simple detection scripts to serve different content (e. g. smaller/lower-resolution images for mobile connections).

    From a short glimpse at the skelJS website and documentation I get the strong impression that this must be the worst implementation of a prefabricated web framework I’ve ever encountered. When I read this from their website:
    Quote Originally Posted by http://skeljs.org/docs#usage-noscript
    skelJS, as you might have already guessed, needs JS to work. Users with JS disabled will therefore be greeted with something reminiscent of the WWW circa 1993. To fix this:

    […]

    Add a <noscript> block to your <head> element that adds the noscript stylesheet, your global stylesheet, and all stylesheets that apply to your breakpoint.

    […]

    And there you go. Users with JS disabled will now have an experience almost identical to that of their JS-enabled counterparts (minus the responsiveness).
    … I’m getting the impression the developer(s) of that framework haven’t understood the web at all. There is just no reason whatsoever why non-JS users shouldn’t be able to have a responsive website, too. And if you do it right it’s not even substantially more work. Obviously they have never even heard of progressive enhancement (or “mobile first”, for that matter).

    If you ask me then – if you insist in using a framework at all – go with anything other than this one.

  • #8
    New Coder
    Join Date
    Sep 2012
    Location
    Eastleigh, UK
    Posts
    18
    Thanks
    1
    Thanked 2 Times in 2 Posts
    Thank you Stephen for your explanation. I have now started work on a 'CSS' only responsive template.

    How ever, I am curious what percentage of users have 'JS' disabled?

  • #9
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Replied

    add this class class="skel-panels-fixed" in the panel you want to fix. I did for mine and worked fine.

    Regards,
    Amit

    Quote Originally Posted by duke666 View Post
    I have applied "position: fixed;" to the menu on this template. This gives the desired effect that it stays put when you scroll the page, however, in different browsers the menu varies in position side to side. I am unsure why the addition of "position: fixed;" would alter this?

    Here is the template before the addition of "position: fixed;" with the menu central in the browsers I have tested.

    CSS
    Code:
    #main-nav {
      text-align: center;
     }
    
    #main-nav a:hover {
      text-decoration: underline;
      color: #001194;
    }
    
    #main-nav ul {
    	background: rgba(212, 212, 212, 0.9);
            font: normal 120% 'News Cycle', arial;
            font-weight:bold;
    	float: right;
    	list-style: none;
    	margin-top: 0em;
    	padding: 0;
            width: 100%;
            position: fixed;
    	-moz-box-shadow: rgba(0, 0, 0, 0.5)  0px 3px 5px;
    	-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 5px;
    	box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 5px;
    }
    
    #main-nav ul li {
    	display: inline-block;
    	margin: 0 0.5em 0 0.5em;
    	padding: 0.35em 0em 0.35em 0em;
    	border-radius: 0.5em;
    }
    
    #main-nav ul li.active {
    }
    
    #main-nav ul li a.active {
    	color: #000E75;
    	text-decoration: none;
    }
    and the html
    Code:
    <div id="header_container">
    		    <div class="container">
    			<!-- Header -->
    				<div id="header" class="row">
    					<nav id="main-nav" class="12u">
    						<ul>
    							<li><a class="active" href="index.html">Home</a></li>
    							<li><a href="examples.html">Examples</a></li>
    							<li><a href="apage.html">A Page</a></li>
    							<li><a href="anotherpage.html">Another Page</a></li>
    							<li><a href="examples.html">Examples</a></li>
    							<li><a href="apage.html">A Page</a></li>
    							<li><a href="anotherpage.html">Another Page</a></li>
    							<li>
    								<a href="">Example Drop Down</a>
    									<ul>
    										<li><a href="">Drop Down 1</a></li>
    										<li><a href="examples.html">Drop Down 2</a></li>
    										<li>
    											<a href="">Drop Down 3</a>
    												<ul>
    													<li><a href="examples.html">Sub Drop Down One</a></li>
    													<li><a href="examples.html">Sub Drop Down Two</a></li>
    													<li><a href="examples.html">Sub Drop Down Three</a></li>
    													<li><a href="examples.html">Sub Drop Down Four</a></li>
    													<li><a href="examples.html">Sub Drop Down Five</a></li>
    												</ul>
    										</li>
    									</ul>
    							</li>
    							<li><a href="contact.php">Contact</a></li>
    						</ul>
    					</nav>
    				</div>
    			</div>
        </div>
    Any help much appreciated.

    Mark


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •