Aligning search text box with button

HTML & CSS
1

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


<!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

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.


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

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

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.


#header ul {
    [B]margin: 20px[/B] 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

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.


#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

Try: border-right:2px solid #03f;

7

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?


    	<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

It’s ok in the ul as you have a list of things there. No need to add extra elements when none is needed.:slight_smile:

9

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

perfect used that method and got it nicely laid out. thanks guys

11

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 :slight_smile: