Ambrosia

May 24 2008, 03:52 AM

Nice code you made there, and good decision to share it with the rest.

Tell me if it supposed to look like this.
Because I highly doubt it.

http://s1.zetaboards.com/Individual/index/

In the pictures the search thing is nicely positioned within the submenu.
Mine is a bit below the submenu, you allready know which theme i'm using.
Vector'd, so if you want help me get it in the submenu without those black lines or it widthening my submenu.

Code:

 

#submenu input[type="text"] {
padding:1px 2px;
}
#submenu button {
padding:1px 2px 0px;
}

BRYN

May 24 2008, 08:32 PM

Ambrosia

May 24 2008, 03:52 AM

Nice code you made there, and good decision to share it with the rest.

Tell me if it supposed to look like this.
Because I highly doubt it.

http://s1.zetaboards.com/Individual/index/

In the pictures the search thing is nicely positioned within the submenu.
Mine is a bit below the submenu, you allready know which theme i'm using.
Vector'd, so if you want help me get it in the submenu without those black lines or it widthening my submenu.

The reason it's like this is due to the image used in the submenu.

The image (20px) is smaller than the input field and the padding used in the submenu.

My only suggestion would be to add this to your CSS (around where you added the code's CSS):

Code:

 

#submenu input[type="text"] {
padding:1px 2px;
}
#submenu button {
padding:1px 2px 0px;
}

Also, after that, find the #submenu that was in Nicola's code, and change the height in it from 20px to 14px.

Ambrosia

May 25 2008, 05:58 AM

That worked well, looks better now.
But is there a way I can position it little more to the top?
In IE7 there's still a part that's hanging out of the bar.
Without changing the size of it, just want it to be bar.

Code:

 

<script type="text/javascript">
//<![CDATA[
if ($.browser.msie) {
$("#submenu span.left").css("margin-top", "-3px");
}
//]]>
</script>

Nicola

Mar 25 2008, 05:53 AM

Add to Left of Submenu

Doing this makes it 'stick' to the left side of the #submenu, and the links to the right.

First, you'd need to add this CSS to the end of the Theme Appearance. If you feel able, you can put the height for the #submenu where it first occurs in the CSS. The height is needed since the contents of the #submenu will be floated.

Code:

 


#submenu {
height: 20px;
}
#submenu .left, #submenu .right {
vertical-align: middle;
}
#submenu .right {
padding-top: 3px;
}

Depending on the theme you're using, you might want to adjust the height/padding to suit your requirements.

The code:

Code:

 


<script type="text/javascript">
//<![CDATA[
$('<span class="right"></span>').appendTo('#submenu');
$('#submenu a').appendTo('#submenu .right');
$('#submenu').prepend('<span class="left"><form action="' + main_url + 'search/" method="get"><input type="hidden" name="c" value="1" /><input type="hidden" name="f" value="-1" /><input type="text" name="q" value="Search..." onclick="this.value=\'\'" /> <button type="submit">Go</button></form></span>');
//]]>
</script>

If you wanted the links to stick to the left, and the search box to stick to the right, just swap each left for right and each right for left in the CSS and code.