Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member Overlord's Avatar
    Join Date
    May 2011
    Location
    Prijedor
    Posts
    86
    Member #
    27819
    Liked
    2 times
    Is there any tutorial on how to create navigation like this?That it has ribbons at the end...
    Owner of Visual Studio

  2.  

  3. #2
    Member christopher_b's Avatar
    Join Date
    Aug 2011
    Location
    Pretoria, South Africa
    Posts
    69
    Member #
    29042
    Liked
    7 times
    Yes that is easy to do. the old browser safe way, is to have 3 divs,

    Div 1: Left hand ribbon piece.
    Div 2: Middle ribbon content. (the links will be going in this div)
    Div3: Right hand ribbon piece.

    Let the div float left, and it's really easy. Just remember to clear the left on Div 3.

    with something like this.

    HTML Code:
    <style type="text/css">
    div1, div2, div3 {
      float: left;
    }
    
    div1, div2 { width: 100px;}
    div3 { width:900px;}
    
    a { padding: 5px; background: none; color: white; margin: 5px 5px; text-shadow: 0 0 5px #000;}
    
    a.active { background: #000;}
    
    </style>
    
    <div class="1">left ribbon piece</div>
    <div class="2">middle ribbon piece</div>
    <div class="3">right ribbon piece</div>
    <br clear="left"/>
    or
    <br clear="right"/>
    or
    <br clear="both"/>
    As to the links, that is pretty standard stuff, this was just a real crash course.
    Are you new to html and css coding?

    Hope this helped.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com