Navigation bar in CSS so fixed on page (always accesible)

Discussion in 'Web Design and Development' started by Dal123, Jul 26, 2009.

  1. macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #1
    I've just ordered a big book on css from america; 2 weeks till it gets here, so; I am trying to create a webpage where my logo is always at the top of the page. With this I want my navigation bar so it is always fixed at the top of the page. So when you scroll down you can always navigate through the site :D.

    Obviously I would set this in the external style sheet, I have the background image sorted I think, thanks to the help of 'Senior Web Developer' (cheers buddy). I assume I just have to incorporate the navigation links into this.

    Code:
    <style type="text/css">
    body
    { 
    background-image: url("Images/images/Logo-.gif");
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: 50% 2%;
    background-color:#000000 
    }
    </style>
    Any help much appreciated!
     
  2. macrumors 6502

    Joined:
    Aug 15, 2007
    #2
    To set something to a fixed position on the page, put the following CSS in it's class:

    .class {
    position: fixed
    /* Any positioning that you want to do using top: ; bottom: ; etc.*/
    }
     
  3. macrumors newbie

    Joined:
    Jul 26, 2009
    Location:
    Ukraine
  4. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #4
    Wow thanks, I could've been in trouble there. IE is 70% of the market, I could've really come unstuck there.
     
  5. macrumors 68020

    michael.lauden

    Joined:
    Dec 25, 2008
    #5
    just do an absolute position with units px

    pretty simple
     
  6. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #6
    If an absolute positon is used will it still centre the image to a % of the page. Or will it remain at the set position in px :confused:?
    After looking into the matter I notice that most navigation bars use pictures, is it possible just to use text. I found this code for a nav bar but uses pictures. How could I modify this to use text?
     
  7. macrumors regular

    Joined:
    May 1, 2008
    #7
    The pictures used in nav bars that are declared in CSS are usually just decoration on top of text links. The code you pasted is used to add more visual style to the navigation. They're using a rather complicated setup to achieve the effects they used. The most basic navigation is this:

    HTML:
    <ul id="navigation">
    	<li><a href="url">Home</a></li>
    	<li><a href="url">Page 2</a></li>
    	<li>a href="onemore/url">So on...</a><li>
    </ul>
    
    Using this as a base, you can now use #navigation in your CSS file to set up the fixed positioning. You can also add other rules to your CSS file to do things like make the navigation run horizontally instead of vertically, change the colors, add rollovers etc.

    People (as in your example) usually add an extra div around the whole thing to give more control over the styling. In this case, it looks like they have two containers and are also using some spans inside the a tags for even more styling. My guess is it looks something like this:

    HTML:
    <div id="navbar">
    	<div class="inbar">
    		<ul>
    			<li><a href="#"><span>Link1</span></a></li>
    			<li><a href="#"><span>Link2</span></a></li>
    		</ul>
    	</div>
    </div>
    
    As you can see, same basic list, just more markup.
     
  8. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #8
    Thanks Memco.

    Much appreciated, just couldn't get my head around it. Hopefully when the book comes I can really start to understand this. At the moment I am at the very beginning and still really don't properly understand HTML let alone XHTML and CSS :eek:.
    I have also tried copy and pasting
    but no luck. I have removed 'onemore line' obviously and modifed 'url''s to my file locations. How could you edit the text, text colours hover colours and things without doing it on each link?What am I doing wrong, should I be struggling with this, it seems very basic yet I am falling at the first hurdles it seems.
    Thanks again.
     
  9. macrumors 6502

    Joined:
    Aug 15, 2007
    #9
    http://w3schools.org

    Read up, that site alone can teach you much of HTML and CSS.

    I'll give you the basic basics. HTML is for structure, for example, headers are <h1> <h2> etc. CSS is for styling that structure. So to define the style for all <h1> tags you would put this in your CSS:

    Code:
    h1 {
       font-size: 24px;
       and whatever else you would want
    }
    You can add classes to things in HTML to define a certain style for them:

    <p class="underline">This would be underlined</p>

    In CSS, classes are defined with a period before them:

    Code:
    .underline {
       text-decoration: underline;
    }
    Now anything with class="underline" will follow the style rules set in .underline{}

    IDs are the exact same thing but for when something only occurs once, like a demo video on one page: <div id="demovideo"></div>

    IDs are preceded by a # in CSS:

    Code:
    #demovideo {
       styling for the demo video div
    }
    There's a lot more detail, but that is really pretty much all there is to it.


    EDIT: Oh, and the basic Syntax for HTML: <tag></tag> attributes can be put in the first tag area, as in <a href="http://macrumors.com"></a>

    for CSS:

    Code:
    selector {
        property: value;
    }
    
     
  10. macrumors regular

    Joined:
    May 1, 2008
    #10
    CSS takes some getting used to. Don't worry if you're not understanding something, just ask and we'll do our best to help.

    The list is the HTML. In there, you can change where the links go and what the link text says. I think you've got that. To change the way those look, that's where CSS comes in. You can change the appearance of different parts depending on the "selectors" you use. Selectors are the things like "#navigation" that specify what attributes you want to give a certain item.

    Let's begin with the whole list. You can target the list in CSS using the selector "#navigation":
    HTML:
    #navigation {
     /* Give the menu a background image that repeats horizontally and a gray color for anything not covered by the background image*/
     background : #c9c9c9 url('menu/background.img') repeat-x;
     border : 1px solid #111; /*dark gray border*/
     float : left; /* This is so that the ul will contain all the floated lis for our horizontal menu remove for vertical */
    }
    
    to target the <li>s as a group, use #navigation li:
    HTML:
    #navigation li {
     float : left; /* Changes lis to display horizontally remove for vertical */
    
    For doing hover effects we now have to target the a tag using #navigation a:
    HTML:
    #navigation a {
     color : #001314;
     text-decoration : none; /* Removes the underline from links */
     padding : .5em; /* Give a little white space around each link */
     display : block; /* force the links to take up all of the space in the li */
    }
    
    #navigation a:hover { /* The :hover pseudo-class is used to change properties when the links are hovered over.  */
     color : #116b14; 
     text-decoration : underline; /* Show underline on hovered links */
     background : url('url/of/rollover-background.img') repeat-x; /* Change background of the link on hover */
    }
    
    These are just some ideas, and there's much more you could do. Play with some of these settings on the menu to see how the styles work.

    Check out these CSS references to learn a little more about specific options for various tags:
    If you're interested in dropdown or flyout menus look at son of suckerfish as a starting point. There are some improvements that can be made to this design, but I think it should give you some more insight into how CSS works and can be used practically.
     
  11. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #11
    Thanks.

    Cheers guys, I've already printed out every single tutorial on www.w3schools.com. I've been reading them for a month or two now (probably about 6 weeks) and I've highlighted all bits especially relevant.

    I read it and think I understand, then problems trying to put it all together. I understand certain parts of it, but when it comes to putting it together I get lost. :eek: I just wish w3schools had a little more in depth examples.
    Thanks again.:)
     
  12. macrumors 6502

    Joined:
    Aug 15, 2007
    #12
    Always a good way to learn is to copy the code of a website you like and messing with it to see what happens. That's really the only way you'll "understand" what's going on.
     
  13. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #13
    Lightbox

    Yeah I've done that with a few sites, seems there are so many different ways to do the same thing. Very confusing:confused: but so interesting.
    There was one here that baby jennifer did and I liked it, so had a look at the code and was very complex. It used something called lightbox; which looked like a preformatted text. There were comments on it from the original designer
    I've just noticed when entering this quote there is another tab on the "php". I thought php was 'personal home page' and some sort of code, don't understand it at all:confused:
    Cheers
     
  14. macrumors 6502

    Joined:
    Aug 15, 2007
    #14
    Well what you could try is making your own very simple page and playing with the css. Something like this:

    Code:
    <html>
    
    <head>
    <title>Title of the Webpage</title>
    
    
    <style type="text/css" media="screen">
    	@import url( style.css );
    <!--The above tells the browser to look for the css file "style.css" to style the page with. "style.css" should be in the same folder as this HTML file-->
    </style>
    
    </head>
    <body>
    
    <h1>This is the header for the page</h1>
    <h2>Here's the first subheader</h2>
    <p>Here's a paragraph of text. Isn't it nice to write paragraphs?</p>
    <a href="http://www.google.com">This links to Google</a>
    <p class="special">This paragraph can look different because of it's different class.</p>
    
    </body>
    </html>
    
    
    
    Make that into an HTML file, and open it in a browser. Then create the style.css file and start messing with stuff and see what happens to things. Here's a basic style.css:

    Code:
    
    body {
    background-color: green;
    font-face: Helvetica, Arial, sans-serif;
    /*The above line tells the browser to use Helvetica as the body font, or if Helvetica isn't installed, Arial, and as a last resort any sans-serif font.*/
    }
    
    p {
    color: white;
    }
    
    .special {
    text-decoration: underline;
    }
    
    /*add in selectors for H1, H2, and any other tags you add*/
    
    Also curious, what are you using for your web development? I'd recommend something like Espresso for you as you seem to be confused by the multitude of options; Espresso will suggest tags and attributes and makes it overall a very enjoyable experience to code.
     
  15. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #15
    Dreamweaver mx 2004

    That's what I'm using, I have been constructing a basic page in dreamweaver and constantly checking it in a browser. For some reason I keep struggling with simple things like file location. Thank god dreamweaver has a tool for locating the file I need. I don't get it, I put in the code as dreamweaver lists it on other files but I still struggle. :confused:
    Thanks for input, much appreciated.
    Just realised I've tried writing a simple paragraph and nothing appears. Is this what happens in a css file?
    And should I save my files as .xhtml as opposed to .htm?
    Here is the code of what I have been trying so far:
     
  16. thread starter macrumors 6502a

    Dal123

    Joined:
    Oct 23, 2008
    Location:
    England
    #16
    I'm trying to format 'contact us' as a different class/id so there is no padding on the right, I have tried reducing it's width in css no luck, tried floating right, no joy. I would like it to be flush on the right.
    Just realised also that here I am sizing it all in pixels, but if the user has not the same font as I'm using, their substitute will not align correctly and look crap. EM's wouldn't solve this problem I don't think as that's just another scaled measurement.:eek:
    CSS:
    HTML:
    }
    #no_pad li {
    padding-right:0px;
    text-align:right;
    width:150px;
    }
    #navbar {
    padding:15px 0px 8px 0px;
    }
    
    #navbar ul{
    list-style:none;
    margin:0px;
    padding:0px;
    padding:0px:
    float:left;
    }
    #navbar li{
    font-family: "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
    font-size: 1.8em;
    display:inline;
    width:225px;
    padding:0px 30px 0px 0px;
    margin:0px;
    line-height:0px;
    }
    HTML:
    <div id="navbar">
    <ul id="nav_list">
    <li><a href="index.htm">home</a></li>
    <li>services</li>
    <li><a href="gallery.htm">previous jobs</a></li>
    <li>guarantee</li>
    <li id="no_pad">contact us</li>
    </ul>
    </div>
     

    Attached Files:

  17. macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #17
    Ok, lets do this one at a time.

    First up, your style tags are not closed.

    Second, what goes into your style tags is just that. Style. Presentation. It should not contain content. I don't know what your trying to achieve here (maybe a typo mistake?)

    Code:
    <ul id="navigation">
    <li><a href="Website/Practice Page.htm">Home</a></li>
    <li><a href="Website/Gallery.htm">Gallery</a></li>
    </ul>
    
    This belongs in your body content tag, not in your head.

    Third, your closing paragraph tag should have the slash before the p, not after. </p> , instead of <p/>

    The slash only comes at the end of childless elements, such as image tags, input tags.

    Keep experimenting with it...
     
  18. macrumors member

    Joined:
    Sep 17, 2012
    Location:
    Johannesburg
    #18
    You should try this code
    strip{
    position: fixed;
    z-index:1;
    width:100%;
    }
     
  19. macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #19
  20. macrumors 6502

    Joined:
    Jun 8, 2009
    #20
    wow you guys are digging up some really old stuff - this was from 2009. o_O
     
  21. macrumors 65816

    Joined:
    Jun 18, 2010
    #21
    The OP might have been struggling through the w3shcools docs for the last several years. :rolleyes:
     

Share This Page