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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS - Navigation Bar

    Hi Everyone

    I would be really grateful for you help, I currently have a site which is in frames and its starting to look very dated. I have alot of content on there and I'm trying to move to CSS, I still want the site to work the same way, for example, Links down the left hand side which open in content part of the webpage.

    I've only ever used HTML so CSS is all new to me! Any help or a no if its impossible would be great!

    Thank you

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Hey there,

    It is most certainly possible! We do all the time. But you're looking at a whole new way of coding, that will most certainly take serious training as well. I would suggest to start with http://w3schools.com, after which the tutorials I wrote for the intermediate student should really get you going - see my signature page.

    This may look like a lot of work, and it is, but do keep in mind that with CSS you can do really wonderful things! :-)

    And to make it so that you will only have to change one navigation bar in case you add a page, you should learn the basics of PHP, i.e. the include function, as well. You will love that, too.
    Last edited by Frankie; 01-26-2012 at 11:51 AM.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    Regular Coder
    Join Date
    Dec 2011
    Location
    NW England
    Posts
    194
    Thanks
    8
    Thanked 15 Times in 15 Posts
    if you changed all the links in your navbar so they are in a list like this:
    Code:
    <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact Us</a></li>
    </ul>
    you could add divs around it like this:
    Code:
    <div id="navbar">
           <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">Menu</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">Contact Us</a></li>
          </ul>
    </div>
    Then using CSS, you can style it like this:
    Code:
    #navbar{
        width: 140px;
        height: 200px;
    }
    #navbar ul{
        list-style: none;
        padding:0;
        margin: 0;
        width: 140px;
        text-align: center;
        font-size: 1.2em;
    }
    
    #navbar ul li{
    }
    
    #navbar ul li a{
        display: block;
        width: 140px;
        text-decoration: none;
        color: #5F5E93;
    }
    
    #navbar ul li a:hover {
        color: #0000ff;
    }
    Just edit it to how you would like it
    Last edited by melloorr; 01-26-2012 at 04:03 PM.


  •  

    Posting Permissions

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