+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] Rozciągnięcie tła na dropdown menu wraz z marginesami (/thread-css-rozciagniecie-tla-na-dropdown-menu-wraz-z-marginesami)
[CSS] Rozciągnięcie tła na dropdown menu wraz z marginesami - vayizmir - 02-06-2011
Witam!
Chciałem na mojej stronie korrki.pl dostosować domyślne dropdown menu. Zaczynało się ono od lewej strony a tło było rozciągnięte na całą szerokość. Obrazek który służył za tło był zwykłym prostokątem z gradientem.
Formatowane było to za pomocą dwóch plików:
mega.css
Kod:
.ja-megamenu { margin: 0; padding: 0; border: 1px solid #181818; }template.css
Kod:
#ja-mainnav .main {
font-size: 12px;
background: url(../images/mainnavBg.png) repeat-x top #1a191a;
}Dwie rzeczy które chciałem zrobić to wyśrodkować menu, ustawić po obydwóch stronach margines tak aby obrazek tła, teraz zaokrąglony prostokąt a nie kanciasty tak jak był poprzednio, automatycznie rozciągał się i kurczył w zależności od szerokości menu. Jak narazie nie udało mi się tego zrobić. Poradziłem sobie z wyśrodkowaniem tego menu. Mój kod wygląda teraz tak:
mega.css
Kod:
.ja-megamenu { display:table; width:auto;}template.css
Kod:
#ja-mainnav .main {
font-size: 12px;
background: url(../images/mainnavBg.png);
display:table;
width:auto;
}Nie potrafiłem dobrze tego sformatować. Albo obrazek tła zaczynał się na początku lewego marginesu i był ucięty na końcu, albo jeżeli wrzuciłem obrazek za długi to przeglądarka kurczyła go w poziomie i automatycznie w pionie był za mały i nie wypełniał całego menu, a jak wrzuciłem za krótki to przeglądarka rozciągneła go tak w poziomie, że w pionie się cały nie mieścił. Drugi problem to taki, że na IE marginesy z lewej i prawej strony działały dobrze, to np w Operze prawy margines był przenoszony do nowego wiersza. Nie mam pojęcia czemu. Jeżeli usunąłem lewy margines wszystko było ok.
Końcowy efekt jaki chcę osiągnąć jest mniej więcej podobny do menu na stronie apple'a. Z tym że ja chcę mieć w marginesach tą zaokrągloną część prostokąta, a rozmiary komórek mają być automatyczne. Jeżeli chcecie zobaczyć na jakim etapie stanęły moje prace to zapraszam na korrki.pl
Aha i jako tło mam teraz wrzucony zwykły prostokąt, nie zaokrąglony.
Z góry dziękuję za pomoc
Pozdrawiam
Marcin