Help me slice this navbar

Discussion in 'CSS' started by judge0, Dec 9, 2008.

  1. #1
    this navbar fill of image and i'm confuse how can i style this

    [​IMG]

    and this my try

    [​IMG]
    and the code i used
    
    <div id="login">
    <form action="#" method="get" class="login_blue">
    <label>login:</label>
    <input value="" type="text" class="login_input" />
    <input value="" type="password" class="login_password" />
    <img src="images/locker.gif"/>
    <input value="" type="button"  class="button_login"/>
    <a href=""><img  src="images/register.gif" class="register"/></a>
    </form>
    <form action="#" method="get">
    <label>SEARCH:</label>
    <input value="" type="text" />
    <input value="" type="button" />
    </form>
    </div><!--login-->
    
    #login{ 
    background:url(images/login.gif) no-repeat scroll center;
    color:#FFFFFF; 
    margin-top:2px;
    }
    .login_input{
    background:url(images/login_textbar.gif) no-repeat scroll top;
    border:0 none}
    .login_password{ 
    background:url(images/login_password.jpg) no-repeat scroll top;
    border:0 none}
    .button_login{ 
    background:url(images/button_login.gif) no-repeat scroll center;
    border:0 none;
    width:56px;
    height:27px;
    cursor:pointer;
    }
    .register{ border:0 none}
    form{display:inline}
    
    Code (markup):
    Here's the link of the problem

    Any ideas plz

    Thx in advances
     
    judge0, Dec 9, 2008 IP
  2. LeetPCUser

    LeetPCUser Peon

    Messages:
    711
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can program it for $10.
     
    LeetPCUser, Dec 9, 2008 IP
  3. Divisive Cottonwood

    Divisive Cottonwood Peon

    Messages:
    1,674
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #3
    .login_input{
    background:url(images/login_textbar.gif) no-repeat scroll top;
    border:0 none}
    .login_password{ 
    background:url(images/login_password.jpg) no-repeat scroll top;
    border:0 none}
    .button_login{ 
    background:url(images/button_login.gif) no-repeat scroll center;
    border:0 none;
    width:56px;
    Code (markup):
    What's this scroll business?

    Have a read of this page which is about background positioning and apply the values listed rather than scroll:

    http://www.w3schools.com/css/pr_background-position.asp
     
    Divisive Cottonwood, Dec 9, 2008 IP
  4. judge0

    judge0 Peon

    Messages:
    400
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #4
    scroll is for background attachment not for background positioning.

    background positioning may keyword or % or px

    and scroll is the default setting in the browser and what i do is just declare it

    any ideas plz
     
    judge0, Dec 9, 2008 IP
  5. Divisive Cottonwood

    Divisive Cottonwood Peon

    Messages:
    1,674
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I've just given you some ideas

    Don't use scroll there - read the W3C article on background positioning and use those values instead
     
    Divisive Cottonwood, Dec 10, 2008 IP