Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V   1 2 >  
 Reply to this topicStart new topic
> [HTML] układ strony (div)
no-scared
post 21.07.2008, 08:49:14
Post #1





Grupa: Zarejestrowani
Postów: 112
Pomógł: 0
Dołączył: 24.04.2008

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Spykaj
post 21.07.2008, 09:56:52
Post #2





Grupa: Zarejestrowani
Postów: 104
Pomógł: 3
Dołączył: 30.05.2008
Skąd: Białystok

Ostrzeżenie: (0%)
-----

Tam gdzie jest np. 780px zamień na 100% tongue.gif powinno pomóc


--------------------
?>
Go to the top of the page
+Quote Post
no-scared
post 22.07.2008, 10:38:42
Post #3





Grupa: Zarejestrowani
Postów: 112
Pomógł: 0
Dołączył: 24.04.2008

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
TroYan
post 22.07.2008, 19:08:48
Post #4





Grupa: Zarejestrowani
Postów: 56
Pomógł: 1
Dołączył: 19.04.2004
Skąd: Bytom Odrz.

Ostrzeżenie: (0%)
-----

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


Ten post edytował TroYan 22.07.2008, 19:13:41


--------------------
zmoderowano - waga i rozmiar
Go to the top of the page
+Quote Post
no-scared
post 22.07.2008, 19:46:35
Post #5





Grupa: Zarejestrowani
Postów: 112
Pomógł: 0
Dołączył: 24.04.2008

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
Shili
post 22.07.2008, 19:59:16
Post #6





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
TroYan
post 22.07.2008, 21:46:25
Post #7





Grupa: Zarejestrowani
Postów: 56
Pomógł: 1
Dołączył: 19.04.2004
Skąd: Bytom Odrz.

Ostrzeżenie: (0%)
-----

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


--------------------
zmoderowano - waga i rozmiar
Go to the top of the page
+Quote Post
Piotrwusek
post 22.07.2008, 22:22:00
Post #8





Grupa: Zarejestrowani
Postów: 399
Pomógł: 7
Dołączył: 11.06.2007
Skąd: Poznan

Ostrzeżenie: (20%)
X----

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
Go to the top of the page
+Quote Post
no-scared
post 22.07.2008, 22:24:02
Post #9





Grupa: Zarejestrowani
Postów: 112
Pomógł: 0
Dołączył: 24.04.2008

Ostrzeżenie: (0%)
-----

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?
Go to the top of the page
+Quote Post
Shili
post 22.07.2008, 22:26:52
Post #10





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

Ostrzeżenie: (0%)
-----

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%.
Go to the top of the page
+Quote Post
l0ud
post 22.07.2008, 22:27:06
Post #11





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

Ostrzeżenie: (0%)
-----

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...


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
no-scared
post 22.07.2008, 22:30:43
Post #12





Grupa: Zarejestrowani
Postów: 112
Pomógł: 0
Dołączył: 24.04.2008

Ostrzeżenie: (0%)
-----

Rozdaje plusy... mam jeszcze jedno pytanie, co się stanie jeśli np. wrzuce zdjęcie szerokosci 400 px do diva o szerokosci 300 px?
Go to the top of the page
+Quote Post
l0ud
post 22.07.2008, 22:33:55
Post #13





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

Ostrzeżenie: (0%)
-----

Zdjęcie wyjedzie poza diva, nie rozciągając go.


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
Piotrwusek
post 22.07.2008, 22:34:19
Post #14





Grupa: Zarejestrowani
Postów: 399
Pomógł: 7
Dołączył: 11.06.2007
Skąd: Poznan

Ostrzeżenie: (20%)
X----

Najlepiej sam sprawdź

ODP:

Będzie ucięte zdjęcie
Go to the top of the page
+Quote Post
no-scared
post 22.07.2008, 22:34:45
Post #15





Grupa: Zarejestrowani
Postów: 112
Pomógł: 0
Dołączył: 24.04.2008

Ostrzeżenie: (0%)
-----

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?

Ten post edytował no-scared 22.07.2008, 22:35:20
Go to the top of the page
+Quote Post
Piotrwusek
post 22.07.2008, 22:38:36
Post #16





Grupa: Zarejestrowani
Postów: 399
Pomógł: 7
Dołączył: 11.06.2007
Skąd: Poznan

Ostrzeżenie: (20%)
X----

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


Ten post edytował Piotrwusek 22.07.2008, 22:39:29
Go to the top of the page
+Quote Post
l0ud
post 22.07.2008, 22:40:44
Post #17





Grupa: Zarejestrowani
Postów: 1 387
Pomógł: 273
Dołączył: 18.02.2008

Ostrzeżenie: (0%)
-----

Piotrwusek, jest różnica pomiędzy tagiem <img> w divie, a obrazkiem w tle diva. W takim przypadku będzie tak jak napisałeś.


--------------------
XMPP: l0ud@chrome.pl
Go to the top of the page
+Quote Post
Piotrwusek
post 22.07.2008, 22:42:20
Post #18





Grupa: Zarejestrowani
Postów: 399
Pomógł: 7
Dołączył: 11.06.2007
Skąd: Poznan

Ostrzeżenie: (20%)
X----

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


Ten post edytował Piotrwusek 22.07.2008, 22:48:21
Go to the top of the page
+Quote Post
no-scared
post 22.07.2008, 22:45:03
Post #19





Grupa: Zarejestrowani
Postów: 112
Pomógł: 0
Dołączył: 24.04.2008

Ostrzeżenie: (0%)
-----

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

Ten post edytował no-scared 22.07.2008, 22:45:38
Go to the top of the page
+Quote Post
Piotrwusek
post 22.07.2008, 22:47:07
Post #20





Grupa: Zarejestrowani
Postów: 399
Pomógł: 7
Dołączył: 11.06.2007
Skąd: Poznan

Ostrzeżenie: (20%)
X----

Jak odnosiłeś się przez img to tak się dzieje ale jak przez background to będzie tak jak mówiłem
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

2 Stron V   1 2 >
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 08:43
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn