Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] układ strony (div)
Forum PHP.pl > Forum > Po stronie przeglądarki
no-scared
21.07.2008, 08:49:14
Na początek z góry pszepraszam za takie lamerskie pytanie, ale mimo to mam nadzieję, że ktoś da jakąś konkretną odpowiedź tongue.gif

No więc chodzi o to, że za moich czasów cały układ strony się robiło na tabelach, chciałem przejść na divy no to zacząłem sobie czytać tutoriale tongue.gif, tutoriale te mówią jak robić stały układ aby się nie rozjeżdżał, jednak jeżeli przeglądarka ma dużą rozdzielczość to po lewej i po prawej stronie pozostaje puste miejsce jak na np. wp.pl czy youtube.com, a jak zrobić, żeby układ był na całej stronie tak jak na forum.php.pl (IPB) czy http://www.cba.pl/forum (phpBB by przemo) ?

Z góry dziękuję za odpowiedzi i pozdrawiam.
Spykaj
21.07.2008, 09:56:52
Tam gdzie jest np. 780px zamień na 100% tongue.gif powinno pomóc
no-scared
22.07.2008, 10:38:42
gdyby to bylo takie proste to bym nie zadawał takiego pytania, jak dam 100% to się cały układ poprostu rozjedzie....

odświeżam temat
TroYan
22.07.2008, 19:08:48
chodzi ci o to, żeby strona zaczynała się dosłownie od samego początku okna przeglądarki ?

nie wiem czy dobrze cię zrozumiałem:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. #test {
  3.  
  4. position: absolute;
  5. top: 0px;
  6. left: 0px;
  7. width: 100%;
  8. height:100px;
  9. background-color: black;
  10. }
  11.  
  12. </style>
  13. ...
  14. <div id="test"> COś tam</div>
[HTML] pobierz, plaintext


o to chodziło ?

jak chcesz troche miejsca zostawić z obydwu stron to np:

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. #test {
  4.  
  5. position: absolute;
  6. top: 0px;
  7. left: 1%;
  8. width: 98%;
  9. height: 100px;
  10. background: black;
  11.  
  12. }
  13.  
  14. </style>
  15.  
  16. <div id=test>Cos tam</div>
[HTML] pobierz, plaintext
no-scared
22.07.2008, 19:46:35
postaram sie wyjasnic o co mi chodzi:

1. Jest sobie strona www.wp.pl, jeśli wejdę sobie na tę stronę z rozdzielczością ekranu 800x600 to rozciąga się ona na CAŁĄ szerokośc i po bokach NIE MA PUSTEGO MIEJSCA, jednak jeśli na nią wejdę z rodzielczością 1280x960 to po bokach jest puste miejsce, ponieważ strona www.wp.pl ma z góry określoną szerokość w pikselach.

2. A teraz jest sobie takie forum.php.pl, gdzie niezależnie czy wejde na nie z rozdzielczością 800x600, czy 1024x768 czy nawet 1280x960, strona zawsze jest na CAŁEJ szerokości przeglądarki, mnie właśnie interesuję jak zrobić takie coś, co postarałem się zilustrować w punkcie 2.

Czekam na dalszą pomoc, dziękuję za zainteresowanie i pozdrawiam.
Shili
22.07.2008, 19:59:16
Jak było powiedziane: width: 100%;

Jeśli coś nie działa i się rozjeżdża, to znaczy, że coś dalej masz skopane i tyle. Tylko trudno określić co.
Inaczej za bardzo tego nie ugryziesz, chyba że chcesz się bawić w skrypty js.
TroYan
22.07.2008, 21:46:25
no toż mój skrypt ten pierwszy pokazuje ci jak zrobić diva bez pustych miejsc po bokach. później analogicznie dorabiasz sobie resztę divów tak żeby ci pasowało
Piotrwusek
22.07.2008, 22:22:00
Jest kilka sposobów

1. Mało profesionalny

[HTML] pobierz, plaintext 
  1. <body>
  2. <table align="center">
  3. <tr>
  4. <td width="80%">  <!-- Czy jak chcesz 100% -->
  5.  
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. <div></div>
  11. <div></div>
  12.  
  13. </td>
  14. </tr>
  15. </table>
  16. <body>
[HTML] pobierz, plaintext


2. Ten

CSS
Kod
#div {
width: 100%;
}


HTML
[HTML] pobierz, plaintext 
  1. <div id="div">SZEROKI 100%</div>
[HTML] pobierz, plaintext
no-scared
22.07.2008, 22:24:02
Cytat(Shili @ 22.07.2008, 20:59:16 ) *
Jak było powiedziane: width: 100%;

Jeśli coś nie działa i się rozjeżdża, to znaczy, że coś dalej masz skopane i tyle. Tylko trudno określić co.
Inaczej za bardzo tego nie ugryziesz, chyba że chcesz się bawić w skrypty js.


ale ja nie chcę mieć jednego diva, z którego składa się cała strona bo to by było bez sensu, wtedy bym nie musial go wstawiac i byloby to samo, chcę np. zrobić coś takiego:



Czy wtedy jak określę szerokości poszczególnych divów w procentach to przy różnych rozdzielczościach się nie rozjedzie?
Shili
22.07.2008, 22:26:52
Nie. Jeśli oczywiście nie wyjedziesz ponad 100% ^^
IE6 czasem ma problemy (przynajmniej ja się natknęłam), że 50% i 50% dają mu więcej niż 100. Ale nie zawsze. W razie czego rozwiązaniem jest dobijać do 99 lub 98%.
l0ud
22.07.2008, 22:27:06
Cytat
Czy wtedy jak określę szerokości poszczególnych divów w procentach to przy różnych rozdzielczościach się nie rozjedzie?


Nie, a czemu ma się rozjechać? smile.gif Ew. możesz ustawić zmienną (procentową) szerokość dla właściwej strony, a stałe wymiary dla nawigacji...
no-scared
22.07.2008, 22:30:43
Rozdaje plusy... mam jeszcze jedno pytanie, co się stanie jeśli np. wrzuce zdjęcie szerokosci 400 px do diva o szerokosci 300 px?
l0ud
22.07.2008, 22:33:55
Zdjęcie wyjedzie poza diva, nie rozciągając go.
Piotrwusek
22.07.2008, 22:34:19
Najlepiej sam sprawdź

ODP:

Będzie ucięte zdjęcie
no-scared
22.07.2008, 22:34:45
i domyślam się jeśli obok będą inne divy, zdjęcia, napisy itd. to przez taki zdjecie sie rozjedzie układ?

// EDIT

to ucięte czy wyjdzie poza diva tongue.gif?
Piotrwusek
22.07.2008, 22:38:36
Samemu trudno sprawdzić?

[HTML] pobierz, plaintext 
  1. <div style="width: 300px; height: 100px; background: url(zdjecie.png);"></div> <!-- ZDJĘCIE MA MIEĆ WIĘCEJ NIŻ 300px -->
[HTML] pobierz, plaintext
l0ud
22.07.2008, 22:40:44
Piotrwusek, jest różnica pomiędzy tagiem <img> w divie, a obrazkiem w tle diva. W takim przypadku będzie tak jak napisałeś.
Piotrwusek
22.07.2008, 22:42:20
Cytat(no-scared @ 22.07.2008, 23:30:43 ) *
mam jeszcze jedno pytanie, co się stanie jeśli np. wrzucę zdjęcie szerokości 400 px do diva o szerokości 300 px?


Można to odebrać dwuznacznie...

Ale to nie zmienia faktu że może to też sprawdzić

[HTML] pobierz, plaintext 
  1. <div style="width: 300px; height: 100px; "><img src="zdjecie.png"></div> <!-- ZDJĘCIE KTÓRE MA POWYŻEJ 300px;-->
[HTML] pobierz, plaintext
no-scared
22.07.2008, 22:45:03
Piotrwusek, twoj kod nic nie wyswietlił (z background w divie), jednak jak dałem taki:

[HTML] pobierz, plaintext 
  1. <div style="width: 300px;"><img src="zdjecie.png" /></div>
[HTML] pobierz, plaintext


to poprostu wyszło poza div tak jak mowil l0ud
Piotrwusek
22.07.2008, 22:47:07
Jak odnosiłeś się przez img to tak się dzieje ale jak przez background to będzie tak jak mówiłem
no-scared
22.07.2008, 22:48:36
Cytat(Piotrwusek @ 22.07.2008, 23:47:07 ) *
Jak odnosiłeś się przez img to tak się dzieje ale jak przez background to będzie tak jak mówiłem


piotrwusek, jak dałem background wieksze zdjecie to mi nic nie wyświetliło, zależność interpretacji przeglądarki? może zrobiles blad w kodzie ;P?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.