Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Dopasowanie grafiki do rozdzielczości.

Założony przez  Bekamax.

05.05.2014, 20:17
#1
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
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
<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>
Snake_ napisał 05.05.2014, 22:31:
Przenoszę [Obrazek: modnotice_howto.png]
05.05.2014, 21:56
#2
body {
 background-image:url(tlo.jpg);
 background-repeat:no-repeat;
 background-size: 100%;
} 
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
05.05.2014, 23:43
#3
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?
06.05.2014, 00:25
#4
Może zmień position z absolute na relative.
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
06.05.2014, 01:18
#5
Teraz wgle nie ma reakcji po kliknięciu, jest jakiś inny sposób?
06.05.2014, 07:20
#6
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.
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
06.05.2014, 11:20
#7
No to w takim razie poczekam ;)
06.05.2014, 13:56
#8
Przy background size 100% i margin 0 auto nie da się tego zrobić. Przynajmniej ja nie umiem.
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
06.05.2014, 18:20
#9
A jak Ty byś to rozwiązał, aby było dobrze?
06.05.2014, 18:46
#10
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
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.
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI



Użytkownicy przeglądający ten wątek:

2 gości