Witam Plik z stylami CSS mam osobno w podfolderze style i w nim mam
#main .sidebar {
float: left;
clear: none;
background-size: 200px 70px;
background-repeat:no-repeat;
background-position: -4px 60px;
background-image:url('../images/menu.gif');
Problem z wielkością obrazka w IE i starszych przeglądarkach które nie obsługują tego Jest jakaś opcja inna? muszę to zdefiniować w tych stylach
Czy próbowałeś po prostu ustawić szerokość diva?
Nie bardzo jest czym zastąpić background-size.
No i raczej Twoim problemem zawsze jest IE, inne przeglądarki ludzie mają zawsze aktualne - jeżeli ktoś je trzyma w starej wersji to raczej celowo, więc nie ma sobie co nimi głowy zaprzątać.
@abecadlo:
Możesz pokazać efekt, który chcesz uzyskać? Z konkretnym obrazkiem?
Bardzo rzadko zachodzi potrzeba ustawiania takich rzeczy w CSS. Może jest inny sposób? Jeśli obrazek będzie po prostu gradientem, to można nim dość swobodnie manipulować. Nie rozumiem też, czemu chcesz przeskalować obrazek w CSS i to do konkretnych wymiarów, podanych w pikselach. Czemu nie zrobić tego w Photoshopie? ;)
Jeśli naprawdę wiesz, co robisz, to te pytania wydadzą Ci się głupie. Zadaję je, bo we frontendzie ludzie częściej są słabsi niż lepsi (nie wiem jaki Ty jesteś) i nieraz kombinują na dziwne sposoby, gdy tak naprawdę problem można rozwiązać zupełnie inaczej.
No właśnie najpierw chciałem to w stylach a jak sie nie da to będę bawić sie w zmniejszenie obrazka lub coś to gif pigułki z napisem menu w IE i starszych przeglądarkach pokazuje sie w normalnym rozmiarze. Nie byłby to problem jak by ludzie nie używali IE ale używa a bardzo dużo osób ma jeszcze Firefoxa 3.6
No to taką "pigułkę" da się zrobić na kilka sposobów!
Takie tło pod napis "Menu" robiło się kiedyś -- a i teraz, jeśli tło jest bardzo skomplikowane -- za pomocą techniki zwanej drzwiami przesuwnymi (ang. sliding doors). Możesz pogooglać: css sliding doors. Używano tego gdy szerokość elementu ("pigułki") nie była znana i tło musiało się odpowiednio dostosowywać.
Obecnie, większość tych efektów można osiągnąć za pomocą CSS3. Użyłeś słowa "pigułka" -- śmierdzi mi to prostokątem z zaokrąglonymi rogami, być może bardzo mocno zaokrąglonymi, i ewentualnie gradientem w środku. Obie te rzeczy można załatwić w CSS3 (własności border-radius oraz wartość linear-gradient dla tła). W IE starszym niż 9 to nie działa, ale dla wsparcia IE mamy coś, co się zwie CSS3 PIE (również pogooglaj). Niestety, PIE nie wspiera akurat background-size, ale zaokrąglone robi i gradienty -- owszem.
Głównie to wygląda tak
http://www.santaclous.neostrada.pl/1.jpg
No to rozciąganie tego nie ma sensu - będzie brzydkie. Widzisz sam, że raz jest szerokie, raz nie i przez to zaokrąglenia są różne.
Zrób to tak:
<div class="tlo"><span class="left"></span><span class="center">Napis</span><span class="right"></span></div>
Wytnij sobie to, co jest otoczone linijką, potem to samo sobie odbij. Potem wytnij sobie jeszcze część, która jest powtarzana.
http://prntscr.com/9pwtn/direct
Jakoś tak będzie wyglądać pliczek z fragmentem lewym i prawy: http://prntscr.com/9px1a/direct
I coś w stylu:
.tlo { overflow: hidden; }
.tlo .left, .tlo .right, .tlo .center { display: block; float: left; width: 50px; height: 100px; background: url('./sciezka/do/obrazka.png') 0 0; }
.tlo .right { background-position: -50px 0; }
.tlo .center { padding: 0 30px; line-height: 50px; background: url('./sciezka/2.png'); /* jeszcze color, fontsize itd */ }
Oczywiście całość może być lepiej zoptymalizowana (jeden plik, zamiast dwóch), ja tu tylko przykład idei daję.
Pewnie się ktoś przyczepi pustych spanów - mi nie przeszkadzają, dla wyszukiwarek spany i tak są ponoć "przezroczyste", a żadnych problemów puste spany nie generują typu problem z wypozycjonowaniem.
Kod pisany z palca, mam nadzieję, że działa btw ;p