Webboard

Pełna wersja: Dopasowanie grafiki do rozdzielczości.
Aktualnie przeglądasz uproszczoną wersję forum. Kliknij tutaj, by zobaczyć wersję z pełnym formatowaniem.
wersja skryptu MyBB: 1.6.11
adres forum: wl-hb.xaa.pl
na czym polega problem (screen, opis, komunikaty):

Witajcie, zrobiłem dziś na forum taka strone startową (wpiszcie wl-hb.xaa.pl i wam wyskoczy) wszystko jest ładnie pięknie no ale obrazek nie powieksza się razem ze wzrostem rozdzielczosci. Pomożecie mi to wszystko ustawić aby było poprawnie? Podrzucam wszystko co potrzebne:

intro.css
Kod:
body {
background-image:url(tlo.jpg);
background-repeat:no-repeat;
background-position:top center;
}

#margines {
width:1003px;
height:auto;
position:relative;
margin:0 auto;
}
.forum {
position:absolute;
top:122px;
right:25px;
width:956px;
height:377px;
}
.youtube {
position:absolute;
top:520px;
left:33px;
width:216px;
height:228px;
}
.film {
position:absolute;
top:520px;
left:280px;
width:216px;
height:228px;
}  
.grafika {
position:absolute;
top:520px;
right:262px;
width:216px;
height:228px;
}
.wkrotce {
position:absolute;
top:520px;
right:16px;
width:216px;
height:228px;
}

intro.html
Kod:
<body>
<div id="margines">
<a href="/index.php" class="forum"></a>
<a href="https://www.youtube.com/user/welovehaxball" class="youtube"></a>
<a href="/newthread.php?fid=79" class="film"></a>
<a href="/newthread.php?fid=84" class="grafika"></a>
<a href="#" class="brak"></a>
<div class="stopka">

</div>
</div>
</body>
Kod PHP:
body {
 
background-image:url(tlo.jpg);
 
background-repeat:no-repeat;
 
background-size100%;

Już obrazek jest okej, tylko że przyciski sie poprzenosily w sensie ze klikam na n to co powinienem i nie przekirowuje bo musze kliknac nieco w prawo. Jak to ustawic?
Może zmień position z absolute na relative.
Teraz wgle nie ma reakcji po kliknięciu, jest jakiś inny sposób?
Hm... Nie mam teraz zbyt wiele czasu więc na szybko...
Spróbuj linki wziąć w div, floatować do lewej i nadać im szerokość procentową.

Potem może znajdę trochę czasu to Ci to napisze.
No to w takim razie poczekam ;)
Przy background size 100% i margin 0 auto nie da się tego zrobić. Przynajmniej ja nie umiem.
A jak Ty byś to rozwiązał, aby było dobrze?
No pomyśl. Jak skalujesz tło to w życiu Ci się nie będzie zgadzać położenie "guzików".
Dałbym większy background (obrazek np 1920x1080) i w razie czego jakiś kolor dopasował do ewetualnej reszty tła.
Ten div id margines można wtedy spokojnie wyśrodkować przez margin 0 auto. Tego diva masz w relative więc całą resztę pozycjonujesz absolutnie do tego diva i powinno śmigać.
Przy pozycjonowaniu dodaj sobie na ten czas do każdego elementu np
Kod:
border: 1px solid #fff;
Wtedy będziesz widział dokładnie gdzie znajduje się dany element i jaką ma wielkość.
Kiedyś ktoś mnie uczył że lepiej używać left niż right w absolute. Jest łatwiej, bo jeśli wyjdzie Ci za szeroko div to tylko zmieniasz jego width a pozycjonując przez right musisz zmieniać i width i right więc jest wygodniej.
Ustal też wysokość tego głównego okna bo Ty zrobiłeś auto.

Próbuj, kombinuj, w ten sposób się uczysz. Tak lepiej niż czekać na gotowca.