Member Avatar for hwoarang69

this is printing

ECOMMERCE SITE                       Log In    Register    About Us    
                                                                    |Search... |   <-search bar

as you can see input text field is lil low. i want set it equal to "about Us"
any ideas?

<div id = 'header_wrapper'>
                <div id = 'logo_wrapper'>
                    <h1><a href='index.php'>ECOMMERCE SITE</a></h1>
                </div>

                <div id = 'top_menu_wrapper'>
                    <ul>
                        <li><a href='#'>Log In</a></li>
                        <li><a href='#'>Register</a></li>
                        <li><a href='#'>About Us</a></li>
                    </ul>
                    <form  id='search_bar' action='Config_FullStoreURLSearchResults.asp' method='get' name='SearchBoxForm'>
                        <input type='text' name='Search' id='search_input' value='Search...'/>
                    </form>
                </div>

            </div>




#top_menu_wrapper
{
    border: 2px solid green;
    width:600px;
    height:100%;
    float:right;
    text-align:left;
    padding:50px;
}

#top_menu_wrapper ul
{
    list-style-type: none; /*remove bullets*/
}

#top_menu_wrapper li 
{ 
    float: left; /* list menu left to right */
}

#top_menu_wrapper li a 
{   
    padding:15px; 
} 






#search_bar input[type="text"] {
    background: url(../IMAGE/search-white.png)no-repeat 10px 5px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search_bar input[type="text"]:focus {
    background: url(../IMAGE/search-dark.png) no-repeat 10px 5px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
  • 2 Contributors
  • 4 Replies
  • 113 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by hwoarang69
Member Avatar for AleMonteiro

Try this way:

<div id = 'top_menu_wrapper'>
    <form  id='search_bar' action='Config_FullStoreURLSearchResults.asp' method='get' name='SearchBoxForm'>
        <ul>
            <li><a href='#'>Log In</a></li>
            <li><a href='#'>Register</a></li>
            <li><a href='#'>About Us</a></li>
            <li><input type='text' name='Search' id='search_input' value='Search...'/></li>        
        </ul>
    </form>
</div>
Member Avatar for hwoarang69

i tried it but still no change

Member Avatar for AleMonteiro

I think i made it:

<html>
    <style>
#top_menu_wrapper
{
    border: 2px solid green;
    width:600px;
    height:100%;
    float:right;
    text-align:left;
    padding:50px;
}

#top_menu_wrapper ul
{
    list-style-type: none; /*remove bullets*/
    text-align: right;
}

#top_menu_wrapper li 
{ 
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1; /* for IE */
    *display: inline;  /* for IE 6 e 7 */
}

#top_menu_wrapper li a 
{   
    padding: 0 15px; 
} 

#search_bar input[type="text"] {
    background: url(../IMAGE/search-white.png)no-repeat 10px 5px #444;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #d7d7d7;
    width:150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;

    }

#search_bar input[type="text"]:focus {
    background: url(../IMAGE/search-dark.png) no-repeat 10px 5px #fcfcfc;
    color: #6a6f75;
    width: 200px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    }
    </style>

    <body>
        <div id = 'header_wrapper'>
            <div id = 'logo_wrapper'>
                <h1><a href='index.php'>ECOMMERCE SITE</a></h1>
            </div>

                <form  id='search_bar' action='Config_FullStoreURLSearchResults.asp' method='get' name='SearchBoxForm'>
            <div id = 'top_menu_wrapper'>
                <ul>
                    <li><a href='#'>Log In</a></li>
                    <li><a href='#'>Register</a></li>
                    <li><a href='#'>About Us</a></li>
                    <li><input type='text' name='Search' id='search_input' value='Search...'/></li>
                </ul>
            </div>

                </form>
        </div>
    </body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.