Fixed navigation bar, fixed the sidebar, scroll the main content

Can someone direct me to a good documentation to learn how to design a page to have a fixed, fixed navigation bar side and essential bar that scrolls?

My goal is to have the nav bar sidebar visible at all times when the user is scrolling the main content.

Thank you.

On line 135, you have this:

 

How It Started

images/dean.jpg" alt="Dean" width="138" height="141" hspace="15" vspace="5" border="1" align="left" />

Try this:

  

How It Started

images/dean.jpg" alt="Dean" width="138" height="141" hspace="15" vspace="5" border="1" />

Be sure to close the division right before the closing of the cell.

Nancy O.
ALT-Web Design & Publishing
Web | Graphics | Print | Media specialists
http://ALT-Web.com/
http://Twitter.com/ALTWEB
http://ALT-Web.blogspot.com

Tags: Dreamweaver

Similar Questions

  • How can I target the navigation bar at the exact location?

    Hello!

    I made a bar navigation scrolles fixed to a div when clicking on links (home, hoe het works?, France @ VINDDIT)

    Now the view work, but it will on the content rather than above it.

    I used someone else's javascript, so I have no idea how to solve this problem.

    you can also check it out on: http://vinddit.nl/

    (Please note I also have an odd empty space above my navigation bar (you notice when scrolling down)? no idea where that came from!)

    Pictured from fist below how this works now:

    Schermafbeelding 2014-03-01 om 15.12.59.png

    And this it is how should work:

    Schermafbeelding 2014-03-01 om 15.13.13.png

    pls find below my javascript code:

    /**

    * SmoothScroll

    * This script to help created by DWUser.com.  Copyright 2012 DWUser.com.

    * Double-under license GPL and MIT.

    * All the individual scripts remain property of their copyrighters.

    * Date: 10-Sep-2012

    * Version: 1.0.1

    */

    If (! window ['jQuery']) alert (' the jQuery library must appear before the smoothscroll.js file.)  The plugin will not work property. ") ;

    /**

    * jQuery.ScrollTo - only simple scrolling using jQuery.

    * Copyright (c) 2007-2012 Ariel Flesler - aflesler (at) gmail (dot) com: http://flesler.blogspot.com

    * Double licensed MIT and GPL.

    * @author Ariel Flesler

    * @version 1.4.3.1

    */

    ; (function ($) {var h = $.scrollTo = function (a, b, c) {$(window) .scrollTo (a, b, c)}, h.defaults = {axis: 'xy', duration: pa rseFloat($.fn.jquery) > = 1.3? 0:1, limit:true}; h.window = function (a) {return $(window) ._scrollable ()};$.fn._scrollable=function() {return this.map (function () {var a = this, isWin =! a.nodeName | $.inArray (a.nodeName.toLowerCase (), ['iframe', '#document', 'html', 'body'])! = - 1; if(!isWin) return a; var b = (a.contentWindow | .document has) | a.ownerDocument | a;})}}) (Return/WebKit/i.test (navigator.userAg ent) | b.compatMode == 'BackCompat'? b.body:b.documentElement})}; $.fn.scrollTo = function (e, f, g) {if (typeof f == 'object') {g = f; f = 0} if (typeof g == 'function') g = {onAfter:g}; if (e == 'max') e = 9e9; g = $.extend ({}, h.defaults, g); f = f | g.Duration; g.queue = g.queue & & g.axis.length > 1; if (g.queue) f / = 2; g.offset = both (g.offset); g.over = both (g.ov er); this._scrollable () .each (function () return {if(e==null) return; var d = this)} , $elem = $(d), targ = e, toff, attr = {}, win = $elem.is ('html, body'); switch (typeof targ){case'number':case'string':if(/^([+-]=)?\d+(\.\d+)? (PX) | %) ? ($/ .test (targ)) {targ = the two (t arg); break} targ = $(targ,this); if(!targ.length) return; case 'object': if (targ.is |) {Targ.style) to ff = (targ = $(targ)) .offset ()} $.each (g.axis.split (»), function(i,a) {var b = a == 'x'?'}) (Left) ': 'Top', pos is b.toLowerCase, key = "scroll" + b, old = d [key], max = h.max (d, a); If (tof f) {attr [key] = toff [pos] + (win? 0:old-$elem.offset () [pos]); if (g.margin) {attr [key]-= parseInt (your rg.css ('margin' + b)) | 0; parseInt (targ.css ('border' + b + 'Width')) = attr [key] | 0} attr [Key] += g.o ffset [pos] | 0; if (g.over [pos]) attr [key] += targ [a == 'x'?' width ': 'height'] () * g.over [pos]} else {v ar c = targ [pos]; attr [key] = c.slice & & c.slice(-1) == '%'? parseFloat (c) / 100 * max} {: c} if (g.limit & & / ^ \d+ $/ .test (attr [key])) attr [key] = attr [key] < = 0? 0:Math.min (attr [key], max); ({if (! I & & g.queue) {if (old! = attr [key]) animate (g.onAfterFirst); delete attr [key]}}); animate (g.onAfter); {({function animate (a) {$elem.animate (attr f, g.easing, & & function() {a.call (this, e, g)})}}) .end ()}; = function(a,b) h.max {var c = b == 'x'?'} (Width) ':'Height',Scroll='scroll'+c;if(!$(a).is('html,body')) has [scroll]-$(a) [() return c.toLowerCase]; {var d = 'client' + c, html is a.ownerDocument.documentElement, body = a.ownerDocument.body; return Math.max (html [scroll], [scroll] body) - Math.min ([d] html, body [d])}; ({int both (a) {return typeof == 'object'? a: {top: a, left:a}}}) (jQuery);

    /**

    * jQuery.LocalScroll

    * Copyright (c) 2007-2010 Ariel Flesler - aflesler (at) gmail (dot) com: http://flesler.blogspot.com

    * Double licensed MIT and GPL.

    * Date: 05/31/2010

    * @author Ariel Flesler

    * @version 1.2.8b

    **/

    ; (function (b) {function g (a, e, d) {var h = e.hash.slice (1), f = document.getElementById (h) | document.getElementsByName (h) [0]; if (f) {a & & a.preventDefault (); var c = b (d.target); if (!)}}}) (d.Lock) & & c.is(":animated") | d.onBefore & &! 1 = d.onBefore (a, f, c))) {d.stop & & c._scrollable ().stop(!0); if (d.hash) {var a = f.id == h?}} ' ' ID ': 'name', g = b("<a>_</a>").attr (a, h) .css ({position: 'absolute', top: b (window) .scrollTop (), left: b (window) .scroll Left()}); p [a] = " » ; location = e.hash; g.Remove (); p [a], b("body").prepend (g) = h} igger c.scrollTo(f,d).tr ("notify.serialScroll",

    {([f])}}} var i=location.href.replace(/#.*/,""),c=b.localScroll=function(a){b("body").localScroll(a)}; defaults = {duration: 1E3, axis: "y", event: "click", stop:! 0, target: window, reset:! 0}; c.hash = func c tion (a) {if (location.hash) {a = b.extend ({}, c.defaults, a); a.hash =! 1; if (a.reset) {var e = a.duration; delete a.duration;b(a.target).scrollTo(0,a);a.duration=e}g(0,location,a)}};}}} b.fn.localScroll = func tion (a) {function e() {return! This.href & &! {This.hash & & this.href.replace (this.hash,"" ") == I & &(!a.filter||_b_(thi_s).is (a.filter))}

    a = b.extend ({}, c.defaults, a); ({{return a.lazy? this.bind (a.event, function (d) {var c; c = b([d.target,d.target.parentNode]).filter (e) [0] & & g(d,c,a)}): this filter .find ("one, ' area') (e) .bind (a.event, function (b) {g(b,this,a)}) () () .end .end}}) (jQuery);

    Initialize all .smoothScroll links

    jQuery (function ($) {$.localScroll({filter:'.smoothScroll'});});)})

    var menu = $('#banner'),

    POS = menu.offset ();

    and my html code:

    < div id = "banner" class = "menudefault" >

    < h2 >

    < a href = "index.html" > < img src = "images/Schermafbeelding 2014 - 02 - 25 om 10.09.52.png" width = "220" height = "76" alt = "logo" / > < /a >

    < a href = "#container" class = "smoothScroll" > HOME < /a > |

    < a href = "#leftcollum" class = "smoothScroll" > HOE HET WORKS? < /a > |  < a href = "#leftcollum2" class = "smoothScroll" > d @ VINDDIT < /a > |

    < a href = "#mainbox2" class = "smoothScroll" > PRICES < /a > |   < a href = "over_ons.html" > ON < /a > ONS |     < a href = "contact.html" > CONTACT < /a > |

    < / h2 >

    < / div >


    lisavs12686 wrote:

    I copied this .js file full of a person on the internet.

    Is it not true?

    the addition of ofset as mentioned above does not work

    No, it isn't, I tested it myself. Try the smooth roll on the next page. You can add the offset to it:

    http://CSS-tricks.com/snippets/jQuery/smooth-scrolling/

    http://CSS-tricks.com/examples/SmoothPageScroll/

  • How can I combine the navigation bar and the menu bar on the same line to save space?

    V29 Firefox seems to be a huge not backward in customization. I need to save room for the content so already I disabled the tabs and combined in the menu bar and the navigation bar on the same line. The url space is too long anyway. Now with v29 all my customization is gone and I can't get it back. I can move me is more points on the navigation bar to combine it with the menu bar. Why this was done? It limits only my ability to customize my browser? I'm very frustrated that you had a great browser and ruined.

    You should see Classic theme restaurateur, it contains many parameters. This module applies to customize Firefox 29. https://addons.Mozilla.org/en-us/Firefox/addon/classicthemerestorer/

  • How to fix the main button to paste constantly

    How to fix the main button to paste constantly

    Short of getting a replacement from Apple or risk a repair third shop there is nothing you can do. How about a button on the home screen? Go to settings > general > accessibility > assistive touch > on.

  • Toolbar - address bar: I can shorten? I've moved all the stuff of navigation bar in the menu bar (to save space), but I need to shorten the address bar, so it does not cover the Wolf/Moon icon. How can I do this?

    I just started using firefox (yesterday). I moved stuff navigation bar on the menu bar to make room for gameing toolbars, I want to add. Problem, the location bar covers, which is now part of the Wolf/moon picture that I would like to know. Can I set the length of the address bar not decide on his nose?

    today is... I'm exploring firefox... well! can do most of what I need to.

    Hello Cassandra.

    I'm not sure that I understand very well what is your problem, but have you tried to add the spaces of the view > toolbars > customize... screen?

    I hope that makes sense and it helps you to solve the problem.

  • Info on the Navigation bar blocks the app

    I am in the process on porting my app to android for BB. It does not work as expected to a certain extent. On the navigation bar at the bottom of the screen by pressing the information icon blocks the app. Logcat don't don't give it to any output, after pressing the force close button logcat said that gc released an amount of memory. No work around for this question please. Thank you

    If I remember correctly, this is a bug in the Simulator. If it's nothing you should worry, because on the device itself, it will work as expected.

  • How to put a small icon in the title bar of the main screen

    Hi all, I'm new to the BlackBerry Forum.

    I can display a small icon in the title bar in the main Blackberry screen to warn users when my application is received something and it is reduced?

    Thanks in advance!

    Yes you can do this by using the following code.

    ApplicationIndicatorRegistry reg = ApplicationIndicatorRegistry.getInstance();                EncodedImage image = EncodedImage.getEncodedImageResource("Indicator.png");            ApplicationIcon icon = new ApplicationIcon( image );            indicator = reg.register( icon, false, true);            indicator.setIcon(icon);            indicator.setVisible(true);
    
  • Alignment of the links in the sidebar to the main content sections

    In firefox I can line up the links in the sidebar to the topics in the category so that during playback of the main content of the reader is able to see the related links in the sidebar... This isn't Karmen in internet explore... also in internet explore the indent of links I don't want them too... can someone please help

    http://www.informationrequested.com/SystemsTrading.html

    Thanks for the help

    the view in browser preview shows new text and watch sidelinks page are not aligned with h2 two sections to the main content

    Why would they?  You don't design a print document.  You design a web page. As soon as someone increases the size of the text in their browser, all changes anyway.

    DOCTYPE HTML PUBLIC "-//w3c//DTD HTML 4.01 / / IN" http://www.w3.org/TR/html4/strict.dtd "> "

    my old code says

    I changed the type of document HTML 4.1 strict better cross browser. It is also much more forgiving of coding errors and easier to validate as XHTML.  Use any type of document matches your skills as a coder.

    In my view, that the problem with the links in the list behind has been resolved. At least they appear correctly for me on Win XP in 3 major browsers.

    Firefox 3

    Internet Explorer 6

    Safari 3.0

    Nancy O.
    ALT-Web Design & Publishing
    Web | Graphics | Print | Media specialists
    www.Alt-Web.com/
    www.Twitter.com/ALTWEB

  • With the help of an external file for the main content

    Hello

    I wish that the content key to a file (most likely a Word) that can be created in word and then placed in the main content of the home page. Then when my client modifies the Word document it can replace it by it FTP'ing in a folder of documents on the hosted server.

    In the end, I would have preferred that it connect to the Web site hosted, connect you to the space where it wants to make changes, and then save. (I'll ask another thread)

    Thank you

    Steve

    Hi Steve,.

    I remember this thread: http://forums.adobe.com/message/3049247#3049247 with this trick:

    Re: Connect to the remote server and edit content on a web page
    You can also try some of the free solutions out there like

    http://www.CushyCMS.com/

    Hans G.

  • Feedly and Gmail Notifier icons repositioning in the navigation bar after the browser is refreshed.

    Are there steps I can take to keep the fixed add-on icons in the navigation bar?

    Another option besides the extensions behaving badly. Sometimes, the file that stores the toolbar customizations is damaged and fails to update correctly at the end of your session (as causing many other strange symptoms).

    The file is not editable, but you can rename it and customize your toolbars from scratch.

    Open your current Firefox settings (AKA Firefox profile) folder using

    Help > troubleshooting information > "view file" button.

    Leave this window open, switch back to Firefox and output

    Pause while Firefox finishing its cleanup, then rename localstore.rdf to something like localstore.old

    Restart Firefox. I hope that now your preferred icon positions will be remembered.

  • What is a good practice to put the menu/navigation bar in the master page?

    My navigation bar is placed in the header of my a master page, and it seems to work, except on pages more long where scrolling is necessary... because the items eventually pass my navigation bar.  Can I use the the scroll tool to have the items disappear or slide off the screen when they hit the bar of navigation... but this technique does not work on big items... I really need the scrollbar elements appear like they are disappearing under the navigation bar. I come from a background of After Effects, and within the EA it would be treated by a matte. Is there a similar function in Muse? The only other alternative I see manually put my navigation bar on each page. Yikes! I hope that there is another solution that I forget. Thank you!

    Use the layers panel to resolve this problem.

    Go to the page master, create a new layer, you put menu on this layer and you're done.

  • How to change color of the navigation bar in the black with black letters for a more easy to see color

    My Navigation bar is black with black letters on dark gray background makes it difficult to read. Can I change the background color to tell blue light to improve appearance?
    A retired no tech would appreciate the help

    Looks like you have a theme that hasn't is either not updated or is bad for you. If you are familiar with the styling code, you can see what to update if you can read the code of
    and the according the description of style, there are additional lines to be added to the style.

  • Transparent or semi-transparent navigation bar all THE apps in Lollipop

    Hello community,

    I want the report to the screen, a bad feature of our Sony with press.

    The navigation bar that contains the soft keys touch remains black in all applications (exception Album and other Sony apps). It smells very bad to see, so there is a solution, a mod, an app WITHOUT ROOT to have a transparent or semi-transparent navigation bar?

    For example, in Chrome, will be perfect to have transparent navigation bar to see full web page complete!

    Thank you!

    Hi Alexdon,

    I read the thread, but does not answer my question; It talks about the immersive mode, but not on the transparent navigation bar.

    But, indeed, the immersive mode is better than the transparent bar, so I searched the web on and I found an interesting application, requiring no root, which allows the user hide the navigation bar in ALL the apps and home screens.

    So, I don't know how Sony has not implemented this feature HIGH on his Xperia devices wih the latest firmware, because it is a feature that enhance value, functionality and beauty of its features...

    The app is named on game of Google as a store GMD Immersive Mode full screen and his works fine (tested personally). The only bug is the keyboard, a bug of Android, where the navigation bar must be required to type and should not used with the camera app (but app inventory also have similar immersive mod).

    I hope that this thread can help other users and, especially, can be read by employees of Sony to natively implement this update functionality in the future or when comes out the new home screens.

  • How can I get the navigation bar on the Page under NavigationPane

    How can I get a sort of Navigationbar thing like in the application settings (attached screenshot) on a page without making a sheet?

    If you mean the thing that you framed in red, it's a title bar, not a navigation bar... it isn't really you can navigate anywhere but a few labels on the page.

    https://developer.BlackBerry.com/Cascades/reference/bb__cascades__titlebar.html

  • display the text in the navigation bar when the user connects

    Hi all

    I'm (still ) on Apex 4.2.6.

    Currently, I have in my page templates, the following code snippet:

          <div class="logoBar">

              <img src="#IMAGE_PREFIX#themes/theme_125/images/logo_.png" />

              <h1><a href="#HOME_LINK#" id="uLogo">#LOGO#</a></h1>

            <div class="userBlock">

              <span>Username: &APP_USER.</span>

              #NAVIGATION_BAR#

            </div>

          </div>

    I have an obligation to display the user name (APP_USER) and of the company the user works for point Application AI_COMPANY, only when the user is connected. When the user is not connected; instead of these elements, I must show a connection link. Well, I know how to display a link to the login page, only when the user is not authenticated, using the navigation bar. Currently, when a user is not authenticated; the page shows: username: person. It's because he's in my page template. How can I show only the user name when the user connects? And then only display the name of the company?

    My first thought was to add an item in the navigation bar. But these elements comes in the form of links. Is it possible to add a navigation bar element and let it display as text? Of course, I could write a dynamic action on page 0 to remove the link, but I'm looking for a nicer sollution or better.

    I have apreciate your help!

    I take it, you use the same model of your home page and login page.

    You could use 2 different models or get out your elements in your model and put them in page 0.

    You can then make them conditional based on the number of page

    Gus

Maybe you are looking for