Forums / Setup & design / search tool layout

search tool layout

Author Message

Lydie Soler

Friday 29 July 2005 8:36:35 am

Hi,

I have added the search box using the toolbar. It works fine. My problem is with its layout. I have on one line the label 'search' and on an other line underneath I have the input box and the search button.
I would like to have all the element on one line.
I know there is something to deal with CSS. But I haven't found what to changed (I search I lot although!!!! ;) )
THanks for your help

Luc Chase

Friday 29 July 2005 8:46:17 am

There are many possible solutions to the problem you're having and yes CSS is where to start. Remember that IE has it's share of bugs.
I don't recall the specific attribute which fixes this but here is some of the code I used.... hopefully it's the bit that did the trick. I would advise that you use Mozilla with the 'webdeveloper' addon to help you fix this...
Style Information - http://www.ccdirectory.org.uk/
http://www.ccdirectory.org.uk/design/base/stylesheets/core.css
http://www.ccdirectory.org.uk/design/base/stylesheets/site_lc.css

div#toolbar-top input.searchinput, div#toolbar-bottom input.searchinput (line 220)
{
width: 7em;
background-color: rgb(204, 255, 238);
position: relative;
top: 1px;
padding-right-value: 0px;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
height: 1.26em;
}

label (line 208)
{
font-weight: bold;
padding-right-value: 0.5em;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
display: block;
white-space: nowrap;
}

http://www.ccdirectory.org.uk/packages/styles/t20/files/default/file/design/base/stylesheets/t20/site-colors.css

div label (line 19)
{
width: auto;
text-align: right;
display: inline;
}

The Web Application Service Provider

Lydie Soler

Monday 01 August 2005 8:06:27 am

Hi,

after hours of search... I finally found it!
it was just a parameter in the pagelayout.tpl where the toolbar is included:
just needed to replace
{tool_bar name=top view=<b>full</b>} by {tool_bar name=top view=<b>line</b>}.....

Tricky
THanks again for your help!