PDA

Zobacz pełną wersję : "Płynna" szerokość obrazka (logo strony) - jak?



BelegUS
17-11-2010, 20:21
Witajcie!

Strona: www.zazakretem.vot.pl
Problem: moduł "losowa grafika", który ma za zadanie rotować logo strony (na razie nie rotuje, bo jest tylko jedno, ale nie w tym rzecz) nie potrafi dostosować szerokości/wysokości obrazka płynnie do szerokości całej strony (która zmienia się wraz z ustawioną u użytkownika na monitorze rozdzielczością

Moje pytanie brzmi:
Jak (i czy to w ogóle możliwe) sprawić, że moje logo będzie płynnie się skalować, wypełniając całą "górę" strony? Obecnie idealnie jest tylko w 1024x768 (obrazek ma podobną szerokość) - w 1280x960 już się "środkuje" i robi malutki, a w 800x600 "wybija" poza szerokość strony.

Pozycja modułu Losowa Grafika ustawiona jest na "logo". Logo to moje własne ustawienie, które linkuje do takiego ustawienia w CSS'ie:


div#logo {
position: fixed;
left: 0;
top: 0;
margin-top: 0px;
overflow: hidden;
}

Wcześniej miałem tu jeszcze height: 100% i width: 100%, ale nie widziałem (większego) wpływu na obrazek.

Czy możliwe jest takie skonfigurowanie modułu/CSS'a/obrazka, aby płynnie dostosowywał się on do rozdzielczości użytkownika (tak jak i cały szablon <strona>), i miał dokładnie taką szerokość i proporcjonalnie wysokość, jak mieć w tej rozdziałce powinien?

Szablon to lekko modyfikowany rhuk_milkyway.

Pozdrawiam.

a_m
17-11-2010, 20:49
div logo ostyluj podobnie jak div wraper, czyli niech wygląda:

body.width_fmax #logo{max-width:1250px; margin-left:auto; margin-right:auto}
potem dopisz regułkę dla obrazka w div logo:

.width_fmax #logo img{width:100%; height:auto; float:left}
jak nie zatrybi to spróbuj jeszcze tak:

.width_fmax #logo img{width:100%!important; height:auto!important; float:left}

BelegUS
18-11-2010, 00:06
Gdyby było na tym Forum coś takiego jak "Piwo", postawiłbym Panu Moderatorowi bez zastanowienia :)

Ba... jak kiedyś będzie okazja w realu, to prawdziwy złocisty trunek się zdecydowanie Panu należy ode mnie :P Wszystko ślicznie działa, efekt jest znakomity :)

Jeszcze tylko takie dwa stricte techniczne pytania:
1. Co ustawić w Ustawieniach Modułu losowa grafika dla tego obrazka? Wpisać jego oryginalne rozmiary, tj. 1000 x 188, czy wpisać samą szerokość (1000) a wysokość pozostawić automatycznie? Czy to bez znaczenia, i zawsze parametry dostosują się do rozmiarów ekranu użytkownika, a obrazek przeskaluje się zachowując proporcje?
2. Najlepiej przygotować teraz te Logo w większych rozmiarach (np. 1024 szerokości i odpowiednią <proporcjonalnie> wysokość), aby w wyższych rozdzielczościach zachowywały odpowiednią jakość?

EDIT: Pytanie 4. Co dodać do tych linijek kodu, aby szerokość obrazka dopasowywała się do szerokości body strony (w sensie, tej głównej części - nie znam fachowej nazwy, chodzi mi o to, co otaczają szare kolumny), i tworzyły tym samym jedną całość? Czy jest to w ogóle możliwe?
Kombinowałem z:

margin-left: auto;
margin-right: auto;
Ale nie dało to żadnego rezultatu... może wstawiałem w złe miejsca?

Pozdrawiam i jeszcze raz dziękuję