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
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Bar - Search box - moves position when resize browser, how can I fix this?

    I'm a brand new css programmer. I am trying to create a text search box that fits inside my Navigation bar on the top of every page on my site.

    My nav bar has 5 tabs that align to the left of the page. then immediately after the FAQ tab a few pixel space then the text box should fit right in the purple nav bar. The text box, SUBMIT button and ADVANCED link. how to I get this top happen.

    When I resize the Firefox 23.01 browser window, the text box moves out of the navigation bar, and drops under the nav bar into the yellow body content area. .

    I know this may be a real obvious rookie move but I am very new. Any help would be great. I've been working on this for hours.!

    here is the css code.

    <style>

    html {background: yellow;
    width: 100%;}


    nav { background: blue;
    height: 2.3em;
    width: 100%;
    }

    ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    font-size: 1.040em;}


    ul {
    background: purple;
    height: 2em;
    width: 100%;}

    li a {
    display: block;
    line-height: 2em;
    padding: 0 1.2em;
    color: white;
    text-decoration: none; }

    li a:hover {
    background:blue;
    height: 2em;
    padding-top: .3em;
    position: relative;
    text-decoration: underline;
    top: -.3em;
    border-radius: .3em .3em 0 0 }

    .current, a:hover.current{
    background: blue;
    color: #eee;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
    border-bottom: .3em solid blue;
    cursor: default;}


    .button {
    background: blue;
    color: white;
    padding: 0 1em;
    height: 2.4em;
    display: table;
    border: 1px solid rgb(32, 124, 202);
    font-family: Helvetica, Times New Roman;
    font-weight: 100;
    font-size: .85em;
    letter-spacing: .045em;
    line-height: 2.4em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border-radius: .325em;
    -webkit-box-shadow: inset 0px 1px 3px rgb(162,200,229);
    box-shadow: inset 0px 1px 3px rgb(162,200,229);
    background: rgb(30,87,153); } </style>

    here is the html

    <nav >

    <ul class="nav">
    <li> <A href="../index.cfm" title= "Home" Class="current">Home</A></li>
    <li> <A href="../ar.cfm" title = "Sell Here">Sell it</A></li>
    <li> <A href="../aboutus.cfm" title = "About Us">About Us</A></li>
    <li> <A href="../rlist.cfm" title = "A List">A List</A></li>
    <li> <A href="../faq.cfm" title = "FAQ">FAQ</A></li>

    <form>

    <li><div id="searchbox">

    <input type="text" value="search word here.." style="font-size: 14pt" name="searchbox" size ="36em" onfocus="setValue(this)"

    onblur="setValue(this)"/>

    <li> <div id="button">
    <input type="submit" value="Find!">

    <li><div id="signin">
    <A href="search.cfm">Advanced</a></li>

    </form></div></li>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,035
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Code:
    <nav> <!--WHERE IS THE END TAG-->
    
    <ul class="nav"> <!--WHERE IS THE END TAG-->
    <li> <A href="../index.cfm" title= "Home" Class="current">Home</A></li>
    <li> <A href="../ar.cfm" title = "Sell Here">Sell it</A></li>
    <li> <A href="../aboutus.cfm" title = "About Us">About Us</A></li>
    <li> <A href="../rlist.cfm" title = "A List">A List</A></li>
    <li> <A href="../faq.cfm" title = "FAQ">FAQ</A></li>
    
    <form>
    
    <li><div id="searchbox"> <!--WHERE IS THE END TAG-->
    
    <input type="text" value="search word here.." style="font-size: 14pt" name="searchbox" size ="36em" onfocus="setValue(this)" onblur="setValue(this)">
    
    <li> <div id="button"> <!--WHERE IS THE END TAG-->
    <input type="submit" value="Find!">
    
    <li><div id="signin"> <!--WHERE IS THE END TAG-->
    <A href="search.cfm">Advanced</a></li>
    
    </form>
    </div> <!--WHERE IS THE START TAG-->
    </li>  <!--WHERE IS THE START TAG-->
    Evolution - The non-random survival of random variants.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,035
    Thanks
    23
    Thanked 589 Times in 588 Posts
    A possible answer:
    Code:
    <body>
    <nav>
    <ul class="nav">
    <li> <A href="../index.cfm" title= "Home" Class="current">Home</A></li>
    <li> <A href="../ar.cfm" title = "Sell Here">Sell it</A></li>
    <li> <A href="../aboutus.cfm" title = "About Us">About Us</A></li>
    <li> <A href="../rlist.cfm" title = "A List">A List</A></li>
    <li> <A href="../faq.cfm" title = "FAQ">FAQ</A></li>
    </ul>
    </nav><br /><br /><br />
    
    <form>
    <li>
    	<div id="searchbox">
    		<input type="text" value="search word here.."
    		style="font-size: 14pt" name="searchbox" size ="36em" onfocus="setValue(this)" onblur="setValue(this)">
    	</div>
    </li>
    
    <li>
    	<div id="button">
    		<input type="submit" value="Find!">
    	</div>
    </li>
    
    <li>
    	<div id="signin">
    		<a href="search.cfm">
    			Advanced
    		</a>
    	</div>
    </li>
    </form>
    </body>
    </html>
    Evolution - The non-random survival of random variants.


  •  

    Tags for this Thread

    Posting Permissions

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