Na początku chciałbym zaznaczyć iż jestem zielony w tych sprawach a działam na PrestaShop

Mam taki problem. - i postaram się go przedstawić łopatologicznie

Chcę sobie stworzyć menu na górze strony.
Menu ma składać się z :
| LEWy PANEL | 6 przycisków | PRAWY PANEL |
Całość ma (mieć) szerokość 965px, a banner w tej chwili wygląda tak : http://koblak85.ddl2.pl/banner.jpg
I tak:
- LEWY PANEL - formularz wyszukiwania z obrazkiem w tle o wqymiarach 227x51
- 6 przycisków - czyli 6 obrazków każdy o wymiarach : 62x51,103x51,75x51,107x51,80x51,77x51 jeden obok drugiego
- PRAWY PANEL - np. Panel koszyka z tłem o wymiarach 234x51
Problem w tym że przyciski mam jeden pod drugim, a czasem uda mi się zrobić tak aby LEWY PANEL był obok 6 przycisków, natomiast PRAWY PANEL ląduje pod nimi (takie tam kombinacje w CSS) :/ Na dodatek między LEWY PANEL a 6 przycisków (czyli w 2 części poprzedniego zdania) pojawia się wąska przestrzeń wypełniona kolorem tła strony.
CSS:
CODE
#banner {
display:inline;
position:realtive;
margin:0;
padding:0;
width:965px;
height:51px;
}
#lewe_menu {
display:block;
width: 227px;
height: 51px;
background: url(../001.jpg) no-repeat ;
}
#prawe_menu {
display:block;
width: 234px;
height: 51px;
background: url(../014.jpg) no-repeat ;
}
#guzik {
display:block;
}
display:inline;
position:realtive;
margin:0;
padding:0;
width:965px;
height:51px;
}
#lewe_menu {
display:block;
width: 227px;
height: 51px;
background: url(../001.jpg) no-repeat ;
}
#prawe_menu {
display:block;
width: 234px;
height: 51px;
background: url(../014.jpg) no-repeat ;
}
#guzik {
display:block;
}
a HTML:
<div id="banner"> <div id="lewe_menu"><i><b>Wyszukaj w sklepie</b></i><form method="get" action="{$base_dir}search.php" ><input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'}{/if}" /><input type="submit" value="Szukaj" /></form></div><div id="guzik"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nowosci','','web/003.jpg',1)"><img src="web/002.jpg" alt="" name="nowosci" width="62" height="51" border="0" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('promocje','','web/005.jpg',1)"><img src="web/004.jpg" alt="" name="promocje" width="103" height="51" border="0" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('cennik','','web/007.jpg',1)"><img src="web/006.jpg" alt="" name="cennik" width="75" height="51" border="0" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('transport','','web/009.jpg',1)"><img src="web/008.jpg" alt="" name="transport" width="107" height="51" border="0" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('dojazd','','web/011.jpg',1)"><img src="web/010.jpg" alt="" name="dojazd" width="80" height="51" border="0" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('kontakt','','web/013.jpg',1)"><img src="web/012.jpg" alt="" name="kontakt" width="77" height="51" border="0" /></a></div> <div id="prawe_menu"> {l s='Welcome' mod='blockuserinfo'}, {if $logged} {else} {/if} </div> </div>
Proszę o pomoc.
Pozdrawiam,
Konrad