SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Non-Member
    Join Date
    Jan 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Aligning search text box with button

    Hi I am designing a page header and would like to align the search box with the 'go' button just next to it, how can i do this with css? Thanks

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style>
    html,body {
    	padding: 0px;
    	margin: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	line-height: 16px;
    }
    
    a {
    	text-decoration: none;
    }
    
    img {
    	border: none;
    }
    
    a:hover {
    	color: #00FF00;
    }
    
    a:link {
    	color: #012D5A;
    }
    
    #container {
    	width: 100%;
    	height: 400px;
    	/*background:#996600;*/
    }
    
    #header {
    	/*background: #CC0000;*/
    	height: 135px;
    	text-align: right;
    }
    
    #header img {
    	padding-top: 10px;
    	margin: 0px 0 0 50px;
    	float: left;		
    }
    
    #header ul {
    	margin: 20px 30px 0 0;
    	text-align: right;
    	list-style: none;
    	color: #012D5A;
    }
    
    #header form {
    	margin: 5px 10px 0 0;
    	background: #00FF33;
    
    }
    
    .searchbox {
    	border: 1px solid #012D5A;
    	/*float: right;*/
    	height: 19px;
    	padding: 0;
    	margin: 0;
    	width: 146px;
    }
    
    </style>
    </head>
    
    <body>
    
    	<div id="container">
        	<div id="header">
            	<img src="images/logo.gif" width="119" height="114" alt="logo" />
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Sitemap</a></li>
                    <li><a href="">french</a> | <strong><a href="">english</a></strong></li>
                </ul>
                <form method="get" action="">
    			  	<input class="searchbox" type="text" value="Search" onfocus="this.value='';" name="search"/>
    				<input type="image" value="Submit" name="submit" src="images/button_go.jpg" />
    		  	</form>
            </div>
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,

    You can try this but browsers do seem to handle form inputs differently so you may need to tweak it with a class on each item instead.

    Code:
    #header form input{vertical-align:middle}

  3. #3
    Non-Member
    Join Date
    Jan 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks that worked, I am also noticing that the space above the logo image is around double in IE than that in Firefox, how can this be fixed, is this some ie browser problem? thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I think I'd need to see the actual page as the code above shows it the other way around with Firefox moved down due to the collapsing margin on the ul.

    Code:
    #header ul {
        margin: 20px 30px 0 0;
        text-align: right;
        list-style: none;
        color: #012D5A;
    }
    The margin will slide under the floated image. You should put a bottom margin on the image instead.

    However the gap is still 10px above the image in both browsers although they start at different positions due to the margin collapse.

  5. #5
    Non-Member
    Join Date
    Jan 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes i used a top padding on the ul instead and this solved the problem. I was also wondering how to make a vertical line on the right side of the ul, I tried using a border but it is not appearing.

    Code:
    #header ul {
        margin: 0px 30px 0 0;
        display: block;
    	border-right: thick #0033FF;
    	padding-top: 20px;
    	text-align: right;
        list-style: none;
        color: #012D5A;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Try: border-right:2px solid #03f;

  7. #7
    Non-Member
    Join Date
    Jan 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks that worked, but in order to do that i had to put the search form in the ul tags, I think this doesnt make alot of sense although it displays well. Is there a better way to do it?

    Code:
        	<div id="header">
            	<img src="images/logo.gif" width="119" height="114" alt="logo" />
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Sitemap</a></li>
    				<li><a href="">french</a> | <strong><a href="">english</a></strong></li>
                	<form method="get" action="">
    			  		<input class="searchbox" type="text" value="Search" onfocus="this.value='';" name="search"/>
    					<input type="image" value="Submit" name="submit" src="images/button_go.jpg" />
    		  	</form>
                </ul>
    
            </div>
    
    
    #header ul {
        margin: 0px 20px 0 0;
        display: block;
    	padding-right: 10px;
    	border-right: 1px solid #012D5A;
    	padding-top: 20px;
    	text-align: right;
        list-style: none;
        color: #012D5A;
    	
    }
    
    #header form {
    	margin: 5px 0px 0 0;
    	/*background: #00FF33;*/
    
    }

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    It's ok in the ul as you have a list of things there. No need to add extra elements when none is needed.

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    form isn't a valid child of ul (though it IS a valid child of li who is a valid child of ul) so what you have now can't go

    However you could add that CSS for the border to the form itself, right? Just give the form an ID and refer to it that way.

    <form method="post" action="something" id="formSearch">

    blah


    #formSearch {
    border-right: 2px solid #03f;
    }

    ?

  10. #10
    Non-Member
    Join Date
    Jan 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    perfect used that method and got it nicely laid out. thanks guys

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    form isn't a valid child of ul (though it IS a valid child of li who is a valid child of ul)
    Well spotted , I looked at the code in the code window without scrolling and it looks like the form is contained in the opening list tag but I was mistaken. It could have been just placed inside a list pair but a border on the form is just as good


Bookmarks

Posting Permissions

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