CSS question

[TechBoyJK]

Hi Guys,

I'm trying to create a simple search form. It will be a set of horizontal links seperated by pipes '|' with a simple form field search box below the set of links. I've it pretty much laid out how I want, but the links above the search box are not alinging with the search box correctly. I want the links pushed up against the text box.

Here is a pic showing how I want it to look. The first search box is how my code display now. The second box is what I am trying to achieve.

http://i617.photobucket.com/albums/tt257/jasonallen19/headerexample.jpg


Here is the code I have. I'm hoping to create a div that will wrap around this code and contain it well. I have a div defined in the code, but it doesn't have any attributes.

Any advice on how to change this to get it to display how I want? Please note, the span/class attributes found in the code relate to a style sheet I have defined elsewhere. However, it doesn't affect the alignment so I didn't include the stylesheet.

<div>

<a href="http://www.company.com" class="active" title="Cars for Sale">
<span class="headersearchlink">Vehicles</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" class="active" title="Aircraft">
<span class="headersearchlink">Aircraft</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Homes for Sale or Rent">
<span class="headersearchlink">Homes</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Apartments">
<span class="headersearchlink">Apartments</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Jobs & Resumes">
<span class="headersearchlink">Jobs</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Pets for Sale">
<span class="headersearchlink">Pets</span></a>

<span class="mediumtext">|</span>
<a href="http://www.company.com" title="Items for Sale">
<span class="headersearchlink">Items for Sale</span></a><br>

<form method="post" action="" name="search-form">
<INPUT class="headersearchinput" type="Text" name="postal" size="85">
<INPUT class="headersearchinput" type="submit" name="search" value="search">
</form>

</div>

 

[Ka0t1x]

Where is your CSS code?

I believe forms put in a defaulted margin.. could be wrong though.

 

[TechBoyJK]

The only CSS code I have relating to this html code is how the links are defined. the spans around the links and classes in the form fields. However, including the css doesn't change how it is aligned.

I don't have any other css code. That's what I need help with. How can I define that wrapper DIV that starts and end the code block so that is smashes the links and the search box together, like in the example pic.

 

[Ka0t1x]

For me it displays just fine, without any CSS whatsoever. What browser are you using? Tried with Safari/Firefox ( on OSX). Some browsers, not sure which, throw a hidden line break whenever you call the form, so your BR directly before the form is unncessary.

Try moving your opening form tag above all of the links right next to your opening DIV.

Or specifying:

form {
margin:0;
padding:0;
}

 

[TechBoyJK]

hey.. just moving the form tag to the top did it. I'll leave it at that for now since the whole design is getting overhauled soon. I just needed a quick fix. THanks!