Podział strony, dostosowanie do rozdzielczości.

[s87]

Witajcie. Mam taki problem. Chce swoja strone podzielic na dwie odzielne strony. Dlatego tez index.html bedzie wygladal tak ,ze jest wybor miedzy jedna strona a druga strona. Tyle tylko ,ze zrobilem to w photoshopie i ta cala grafika fajna ma wymiar 1024 na 768.

Teraz chodzi mi o to ,ze jak to zrobic ,by niezaleznie od rozdzielczosci danego uzytkownika to w miare ladnie sie wyswietlalo zawsze. Zeby nie wyskakiwaly paski przewijania itd.

Rozumiecie mniej wiecej o co chodzi?

[Calif]

Troszeczkę nie bardzo rozumiem... Może jakiś screen ?

[gorylek]

Szczerze ? Nie bardzo rozumiemy. Zrobiłeś dobry lay i chcesz by ładnie wyglądał na każdej rozdzielczości i żeby zajmował dokładnie całe okno ? A no nie da się. Chyba że stworzysz jego wersje na każdą możliwą rozdzielczość.

Przykładowo mój znajomy ma starego kompa i nadal pracuje w 800x600 (monitor 15 cali), sam pracuje na widescreen w rozdzielczości 1400x900 a drugi mój znajomy w rozdzielczości 1600x1200. No i kumpel przy kasie ma telewizor HD ponad 50 cali rozwalony na ścianie i bóg wie jaka na nim jest rozdzielczość (podłączony do kompa).

Także powodzenia.
Pozdrawiam
Gorylek

[s87]

Nie,nie. Chodzi mi dokladnie o sam obrazek.

Mam sobie index.html

I strona tylko zawiera dosyc spory obrazek wysrodkowany. Teraz jak to zrobic ,ze jesli ktos bedzie mial inna rozdzielczosc niz ta ,ktora ja mam czyli 1440x900 to zeby na innych tez dobrze sie wyswietlalo

[gorylek]

Przygotować obrazek pod każdą rozdzielczość ? A następnie za pośrednictwem JavaScript wstawiać odpowiedni ?

[s87]

A sa gdzies gotowe takie skrypty?

[azamo]

Np. http://www.zimmertech.com/tutorials/jav ... torial.php

Więcej: http://www.google.com/search?num=50&hl= ... on&spell=1

[gorylek]

Azamo, aż tak daleko szukać nie trzeba. Już raz jeden użytkownik pytał o kod do zmiany tła body w zależności od rozdzielczości. Wystarczyło skorzystać z "szukaj" i miał byś odpowiedź na tacy:

http://forum.webinside.pl/viewtopic.php?t=15500

[s87]

Ale wlasnie mi nie chodzi o zmiane body tylko o zmiane <img src"">

[gorylek]

A nie wpadłeś na pomysł że zasada jest ta sama ? tylko zamiast docyment.body.background masz obrazem IMG o ID 'superobrazek' i kod dla niego będzie wyglądał tak:
document.getElementById(superobrazek).src=[twój obrazek jak w przykładzie]

[s87]

No ok. To zrobione. A jak ten obrazek ktory mam na srodku pustego pliku html wysrodkowac ,ale w PIONIE?

[gorylek]

Najlepiej poszukać kod hasłem "xHTML CSS wyśrodkowanie w pionie" w google.
Pamiętaj że google Twoim przyjacielem jest i problemy z którymi się borykasz już nie raz były rozwiązywane.

No ale że sprawa jest prosta a ja trzeźwieje i nie mam nic lepszego do roboty w tym momencie to wyjaśnię.

1. Zakładamy że obrazek ma wysokość 200px i szerokość 300px oraz ma ID "reklama".

2. Obrazek jest domyślnie elementem liniowym więc jakiekolwiek ustawianie go na ekranie może sprawiać poważne problemy, dlatego nadajemy mu w CSS atrybut wyświetlania jako element blokowy: "display: block;"

3. Zakładając że pozycjonujemy go na ekranie względem okna przeglądarki, należy użyć pozycjonowania absolutnego: "position: absolute;"

4. By ustawić go na ekranie, mamy 4 atrybuty: top, right, bottom, left. Nam trzeba tylko 2. Użyjemy top i left. Trzeba brać pod uwagę różne rozdzielczości ekranu więc użyjemy wartości 50%;. Aktualny kod CSS dla tego obrazka wygląda tak:

Kod: Zaznacz cały

#reklama { display: block; position: absolute; top: 50%; left: 50%; }

5. Obrazek został wyśrodkowany. Pozostaje jeden problem. Elementy są pozycjonowane wg górnego lewego rogu i to ten róg naszego obrazka znajduje się na środku. Dlatego marginesami ujemnymi przesuniemy nasz obrazek na środek:

Kod: Zaznacz cały

#reklama { display: block; position: absolute; top: 50%; left: 50%; margin: -100px -150px; }

6. Obrazek jest już na środku. Jeżeli chcemy pozycjonować go względem jakiegoś elementu blokowego w którym się znajduje a nie okna przeglądarki to po prostu ten element musi mieć nadane "position: relative;". Mowa tu o rodzicu a nie o #reklama.