How to make search form centered CSS Question

Question How to make search form centered ( SitePoint Forums CSS )
Updated: 2008-11-23 05:25:01 (8)

How to make search form centered

I'm trying to add a header with a logo on the left side, and a search field on the right.
The problem is that I haven't been able to get the search part in the middle (vert.).
I tried padding and all kinds of stuff...

I would be very happy if someone could help me out, this is how the code for these part looks:

HTML part

Code:

<div id="logostrip">
	<div id="logographic"><!-- No Content -->
	<div id="logosearch"><form action="form.php" method="post">
	   <input type="text" size="30" name="keywords" /><input class="button" type="submit" value="Search" />
	   </form>
	</div>
	</div>
</div>

CSS part

Code:

#logostrip{ 
	background: #3860BB url(/img/tile_cat.gif);
	border: 1px solid #FFF;
	height: 50px;
	margin: 0;
	padding: 0;
}

#logographic{
	background: transparent url(/img/logo4.gif) no-repeat left;
	cursor: pointer;
	height: 50px;
	margin: 0;
	padding: 0;
}

#logosearch{
	height: 50px;
	margin: 0;
	padding: 0;
	text-align: right;
}

Answers: How to make search form centered ( SitePoint Forums CSS )

How to make search form centered

Hi,

I think I've confuse you What I meant was put the anchor in the html over your background image. But then you may as well have the image in there anyway

Anyway this is what I mweant but its probably not what you wanted.
something like this.

Code:

#logographic a.test {
position:absolute; 
display:block;
width:100px;
height:100px;
background:yellow;
left:20px;
top:20px;
}
</style>
</head>
<body>
<div class="borderwrap">
	<div id="logostrip">
 <div id="logographic">
 <a class="test" href="#"></a>
 <div id="logosearch"><form action="form.php" method="post">
		<input type="text" size="30" name="keywords" />
	 <input class="button" type="submit" value="{ipb.lang['sj_search']}" />
  </form>
 </div>
 </div>
</div>
</body>
</html>

If I understood you correctly you have a background image that you want to make into a link. The above is one way to make the area where the image is active.

Paul

Paul O'B

How to make search form centered

That's what I was trying just before I posted my last post because I never got the hang of it.
But your example worked great!

Thank you soooo much Paul, I've been struggling with this for so long.
I'm so happy you managed to solve my problem.

Korak

How to make search form centered

I didn't realize I could do that, so I can put the link directly in the CSS?
Could you please explain a bit further?

Sorry about the questions, but I'm just not very good at this I'm afraid.

Thanks for helping!

Korak

How to make search form centered

Hi,

Why don't you just place the image in the foreground and link to it as per usual.

If its in the background then you are going to need to place an anchor over the image in the same place at the same size so that it makes a link.

Paul

Paul O'B

How to make search form centered

Hmm, I'm still having problems linking to logo4.gif and having it look good in all browsers.
I'm now working from two possible (maybe) angles. First one looks good in all browsers I've tested it in, but I don't know how I shall make the link:

HTML part

Code:

<div class="borderwrap">
    <div id="logostrip">
	<div id="logographic"><!-- No Content -->
	<div id="logosearch"><form action="form.php" method="post">
        <input type="text" size="30" name="keywords" />
	    <input class="button" type="submit" value="{ipb.lang['sj_search']}" />
		</form>
	</div>
	</div>
</div>

CSS part

Code:

#logostrip{ 
	background: #547B9B url(<#IMG_DIR#>/tile_back.gif);
	border: 1px solid #F1F1F1;
	height: 50px;
	margin: 0;
	padding: 0;
}

#logographic{
    background: transparent url(<#IMG_DIR#>/logo4.gif) no-repeat top left;
    height: 50px;
    margin: 0;
    padding: 0;
}

#logosearch{
    height: 10px;
    float: right;
    margin: 10px 5px 0px 0px;
    padding: 0px;
    text-align: right;
}

#logosearch input {
    vertical-align: middle;
}

The second one is an attempt to add the logo into the html, but this causes the header to be twice as wide on the height in IE, and it pushes down the search field:

HTML part

Code:

<div class="borderwrap">
    <div id="logostrip">
	<div id="logographic"><a href='{ipb.script_url}'><!--logo.start--><img src='style_images/<#IMG_DIR#>/logo4.gif' style='vertical-align:top' alt='Eskobar Online' width='230' height='50' border='0' /><!--logo.end--></a>
	<div id="logosearch"><form action="form.php" method="post">
        <input type="text" size="30" name="keywords" />
	    <input class="button" type="submit" value="{ipb.lang['sj_search']}" />
		</form>
	</div>
	</div>
</div>

CSS part

Code:

#logostrip{ 
	background: #547B9B url(<#IMG_DIR#>/tile_back.gif);
	border: 1px solid #F1F1F1;
	height: 50px;
	margin: 0;
	padding: 0;
}

#logographic{
	background: transparent;
	height: 50px;
	margin: 0;
	padding: 0;
}

#logosearch{
    height: 10px;
    float: right;
    margin: 10px 5px 0px 0px;
    padding: 0px;
    text-align: right;
}

#logosearch input {
    vertical-align: middle;
}

Any ideas on how I could get this working?

Thank you!

Korak

How to make search form centered

Hi,

I'm in a bit of a rush but there are some flicker free rollovers here:

http://www.pmob.co.uk/temp/cssrollover4.htm

If you don't want to use a foreground image then use the same technique but put the hover state in the parent instead. Of course this incurs the ie hourglass but not the flicker.

Paul

Paul O'B

How to make search form centered

Wow, thank you very, very much Paul! That worked great.

Now I have one more problem, I would like to make a link out of logo4.gif
How would I do that in a web standard way, and avoiding the annoying IE flickering bug?

Just a little side note:
I have removed the cursor: pointer; part from logographic, it wasn't meant to be there...I just missed removing it before.

Thank you once again for your help!

Korak

How to make search form centered

Hi,

Css isnt very good at vertically centering, you usually have to apply some padding toposition where you want.

If the line isn't going to wrap then you can set the line-height to the same size as the height of the element and that will centre text. However ie won't centre images or input items with this method so you'll still have to use padding to position for ie.

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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#logostrip{ 
 background: #3860BB url(images/menubg.gif);
 border: 1px solid red;
 height: 50px;
 margin: 0;
 padding: 0;
 line-height:50px;
 vertical-align:middle;
}
* html #logosearch form {padding-top:12px}
#logographic{
 background: transparent url(images/menubg.gif) no-repeat left;
 cursor: pointer;
 margin: 0;
 padding: 0;
}
#logosearch{
 margin: 0;
 padding: 0;
 text-align: right;
}
#logosearch form{
 margin:0;
 padding:0;
}
</style>
</head>
<body>
<div id="logostrip"> 
  <div id="logographic">
	<!-- No Content -->
	<div id="logosearch">
	  <form action="form.php" method="post">
		<input type="text" size="30" name="keywords" />
		<input class="button" type="submit" value="Search" />
	  </form>
	</div>
  </div>
</div>
</body>
</html>

(I've changed your image names so I could see what it looked like so change them back to your images.)

Paul

Paul O'B

- Source: How to make search form centered SitePoint Forums CSS
- Previous Question: sort problem SitePoint Forums PHP
- Next Question: CSS Padding problem Weird SitePoint Forums CSS