Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Banner w jednej linii
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
obil
Witam.

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


Mam taki problem. - i postaram się go przedstawić łopatologicznie winksmiley.jpg
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;
}


a HTML:
  1. <div id="banner">
  2. <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>
  3. <div id="prawe_menu">
  4. {l s='Welcome' mod='blockuserinfo'},
  5. {if $logged}
  6. {$customerName} (<a href="{$base_dir}index.php?mylogout" title="{l s='Log me out' mod='blockuserinfo'}">{l s='Log out' mod='blockuserinfo'}</a>)
  7. {else}
  8. <a href="{$base_dir_ssl}my-account.php">{l s='Log in' mod='blockuserinfo'}</a>
  9. {/if}
  10. <a href="{$base_dir_ssl}order.php" title="{l s='Your Shopping Cart' mod='blockuserinfo'}">{l s='Cart:' mod='blockuserinfo'}</a>
  11. {if $cart_qties > 0}{$cart_qties}{/if} &nbsp;&nbsp;<span class="{if $cart_qties > 0}hidden{/if}">0</span> szt. , wartość: <span>{if $cart_qties > 0}{convertPrice price=$cart->getOrderTotal(true, 4)}{/if}</span>
  12. <span class="{if $cart_qties > 0}hidden{/if}">0,00 zł</span>
  13.  
  14. <a href="{$base_dir_ssl}my-account.php" title="{l s='Your Account' mod='blockuserinfo'}">{l s='Your Account' mod='blockuserinfo'}</a>
  15. </div>
  16. </div>


Proszę o pomoc.

Pozdrawiam,
Konrad
Lion_87
a nie mozesz

  1. \
  2. <div>
  3.  
  4. <div style="float:left">LEWy PANEL</div>
  5. <div style="float:left">6 przycisków</div>
  6. <div style="float:left">PRAWY PANEL</div>
  7.  
  8. </div>


questionmark.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.