No więc mam takie coś:
#rightside {
min-height:490px;
width:204px;
background:url(images/right.png) repeat-y center 0px 20px;
}
No i mam załatwioną sprawę z odległością od górnej krawędzi (20px), ale jak ustawić odległość od krawędzi dolnej?
Nie masz tak naprawdę załatwionej tej sprawy. Ponieważ masz repeat-y, obrazek jest powtarzany w pionie na całą wysokość tła. Nie tylko od 20px w dół, ale również w górę.
To, co chcesz osiągnąć, możesz załatwić, otaczając #rightside jeszcze jednym elementem. Powiedzmy, że nadasz temu elementowi otaczającemu id "rightsideWrapper".
W #rightsideWrapper ustawiasz pionowe dopełnienie (padding) na te powiedzmy 20px. W #righside zmniejszasz odpowiednio wysokość (min-height), odejmując od 490px górne i dolne dopełnienie z #rightsideWrapper -- czyli to będzie 490 - 20 - 20 = 450px. Następnie, ustawiasz pozycję pionową tła w #rightside na top.
Dodam jeszcze, że deklaracja background z Twojego kodu jest nieprawidłowa. Jako pozycję tła podałeś "center 0px 20px". To są TRZY wartości. Powinny być dwie. Po zmianach, o których wspomniałem, powinno tam być "left top" lub "center top", zależnie od tego, czy obrazek chcesz wycentrować w poziomie, czy dosunąć do lewej krawędzi.
Ale czy dodanie nowego elementu nie przesunie wszystkiego co znajduje się w #rightside?
Przesunie. Przesunięcie wywołane górnym dopełnieniem możesz skompensować, dając #rightside position: relative i top: -20px, ew. margin-top: -20px (przetestuj to we wszystkich interesujących cię przeglądarkach). W ten sposób ciężko jednak będzie zadbać np. zarówno o elementy na górze, jak i na dole #rightside.
Obawiam się, że sporo tu zależy od kontekstu: tego, jakie elementy masz w #rightside i co tak naprawdę chcesz zrobić. A nawet: jakie tło masz "pod" #rightside. Bo może wystarczy tło #rightside przykryć u góry i na dole tłem, które ma prześwitywać?
dodaj sobie 20px przeźroczystości do obrazka od dołu i w css daj bottom. ot po sprawie
@dzek69:
Chyba nie doczytałeś problemu :). On tam ma repeat-y (ważne!) i chce jednocześnie by obrazek był oddalony o określoną liczbę pikseli od góry elementu, nie tylko od dołu. Wysokość elementu nie jest znana.
Chyba że to repeat-y jest wstawione tylko dla picu i tło wcale nie ma się powtarzać...
Właśnie sobie uświadomiłem, że w większości przypadków potrzebuję tylko przeźroczystych rogów, nie całego przesunięcia.
W #rightside dodałem więc zaokrąglenie dla tła, dopisałem dwa dodatkowe elementy i na stronie wstawiłem je wewnątrz #rightside. Używając border-radius i odpowiednich obrazów ustawionych na pozycję top no-repeat i bottom no-repeat nie muszę niczego przesuwać.
A czy Opera ma już obsługę zaokrąglonych rogów?
ma, ma, i to bez durnych prefixów :)
(wkurza mnie to, że na stronkach ludzie wrzucają
-moz-border-radius
-webkit-border-radius
-dziwne-przegladarki-border-radius
a o zwykłym css3 zapominają ;| )
@bswierczynski:
fakt, czytałem po łebkach, przepraszam :(