Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Szerokość tła w procentach
Forum PHP.pl > Forum > Przedszkole
bialasik
16.06.2010, 13:52:41
Witam,
mam divy: górny i dolny - już ustawione na pozycjach. Do obu jest wpisany obrazek poprzez img src.
Do środkowego diva też jest obrazek, lecz musi mieć taką samą szerokość jak górny i dolny (szerokość = 100% okna przeglądarki) oraz w razie długiej strony powtarzał się.
Jak to zrobić?

Soulast
16.06.2010, 19:55:16
A możesz pokazać część tego kod?

css, html mile widziane;)
bialasik
16.06.2010, 21:21:09
Jasne, więc fragmenty:

HTML:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id='header'> <img src='images/header.png' width='100%' >
  3. 	blablabla, tu jest kod gornego menu
  4. </div>
  5.  
  6. <div id='middle'></div>
  7.  
  8. <div id='down'><img src='images/end.png' width='100%' /></div>
  9. </body>
[HTML] pobierz, plaintext


CSS:
[CSS] pobierz, plaintext 
  1. body {
  2.   	margin: 0px;
  3. }
  4.  
  5. #header {
  6. 	background-color: #F0F0F0;
  7. 	width: 100%;
  8.   	position: relative;
  9. }
  10.  
  11. #middle {
  12. 	background-color: #0FF00F;
  13. 	width: 100%;
  14. 	height: 600px;
  15. 	background-image:url('images/middle.png');
  16.  
  17. }
  18.  
  19. #down {
  20. 	background-color: #F0F0F0;
  21. 	width: 100%;
  22. }
  23.  
[CSS] pobierz, plaintext


Chciałbym, żeby obraz middle.png który ma być w divie middle dopasowywał szerokość do aktualnego rozmiaru przeglądarki. Jeśli to konieczne, powtarzałby się (wszak tekst może być długi).
W późniejszych etapach chciałbym na div middle położyć kolejne divy (treść, boczny panel).
kapuch
16.06.2010, 21:50:25
Cytat(bialasik @ 16.06.2010, 22:21:09 ) *
Jasne, więc fragmenty:

HTML:

[HTML] pobierz, plaintext 
  1. <body>
  2. <div id='header'> <img src='images/header.png' width='100%' >
  3. 	blablabla, tu jest kod gornego menu
  4. </div>
  5.  
  6. <div id='middle'></div>
  7.  
  8. <div id='down'><img src='images/end.png' width='100%' /></div>
  9. </body>
[HTML] pobierz, plaintext


CSS:
[CSS] pobierz, plaintext 
  1. body {
  2.   	margin: 0px;
  3. }
  4.  
  5. #header {
  6. 	background-color: #F0F0F0;
  7. 	width: 100%;
  8.   	position: relative;
  9. }
  10.  
  11. #middle {
  12. 	background-color: #0FF00F;
  13. 	width: 100%;
  14. 	height: 600px;
  15. 	background-image:url('images/middle.png');
  16.  
  17. }
  18.  
  19. #down {
  20. 	background-color: #F0F0F0;
  21. 	width: 100%;
  22. }
  23.  
[CSS] pobierz, plaintext


Chciałbym, żeby obraz middle.png który ma być w divie middle dopasowywał szerokość do aktualnego rozmiaru przeglądarki. Jeśli to konieczne, powtarzałby się (wszak tekst może być długi).
W późniejszych etapach chciałbym na div middle położyć kolejne divy (treść, boczny panel).

[CSS] pobierz, plaintext 
  1. background-image: url(tlo..jpg) REPEAT-Y;
[CSS] pobierz, plaintext

o repeat-y Ci chodzi?
Soulast
17.06.2010, 10:43:46
właśnie tak jak już kolega wspomniał dodaj tylko 
[CSS] pobierz, plaintext 
  1. background-repeat:repeat-y; 
[CSS] pobierz, plaintext
dla powtarzania tła.
bialasik
17.06.2010, 13:38:28
Okej, tylko tło musi dopasowywać się szerokością do okna przeglądarki, tak jak obrazki header i end.
Pilsener
17.06.2010, 14:49:22
1. Nie buduje się strony na img-ach, img służy do wstawienia unikalnego obrazka do treści, stałe elementy strony wrzucaj jako background w css
2. Użyj powtarzania tła, rozciąganie to kiepski pomysł bo obrazki będą zniekształcone, przez powtarzanie można uzyskać dużo lepszy efekt (zwłaszcza jak się użyje więcej niż jednej warstwy)
bialasik
17.06.2010, 14:52:36
Chcę zarazem użyć powtarzania, jak i rozciągania. Sprawa przykładowo wygląda tak, obrazek tła ma szerokość 1400px zaś otwarte okno 1200px. Divy header i end dopasowują się idealnie, lecz middle jest stały przez zastosowanie w nim background. Tylko takie rozwiązanie znalazłem dla divów header i end. Nie widzę w tym żadnego problemu, te elementy nie powtarzają się.
Belze
17.06.2010, 15:21:02
jak bedziesz miał powtarzanie to jak obrazek tła może mieć szerokość 1400px a okno mniej? nie za bardzo rozumiem toku Twojego rozumowania. ustaw jakiś obrazek, który po powtarzaniu w poziomie/pionie tworzy dobrze wygladajace tlo, ustaw w div background i po sprawie
bialasik
17.06.2010, 16:18:37
Poniżej wyrysowany przykład na szybko, mam nadzieję, że da się zrozumieć teraz.

flashujemy.org/pics/tjaa.png
emtiej
17.06.2010, 17:33:13 
[CSS] pobierz, plaintext 
  1. #strona
  2. {
  3.   width: 100%;
  4.   border: 0px;
  5.   margin: 0px;
  6.   padding: 0px;
  7. }
  8. #top
  9. {
  10.   width: 100%;
  11.   height: 300px; 
  12.   display: block;
  13.   background-image: url("adres do obrazka tła");
  14.   background-repeat: repeat-x; - jeżeli ma się powtarzać po osi OX(prawo-lewo)
  15. }
  16. #middle
  17. {
  18.   width: 100%;
  19.   height: 600px;
  20.   display: block;
  21.   background-image: url("adres do obrazka tła");
  22.   background-repeat: repeat-x; - jeżeli ma się powtarzać po osi OX(prawo-lewo)
  23. }
  24. #bottom
  25. {
  26.   width: 100%;
  27.   height: 300px; 
  28.   display: block;
  29.   background-image: url("adres do obrazka tła");
  30.   background-repeat: repeat-x; - jeżeli ma się powtarzać po osi OX(prawo-lewo)
  31. }
[CSS] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1.  
  2.  
  3. <div id="strona">
  4.  
  5.   <div id="top"></div>
  6.   <div id="middle"></div>
  7.   <div id="bottom"></div>
  8.  
  9. </div>
  10.  
  11.  
[HTML] pobierz, plaintext




O to chodzi?

Ważne, żeby obrazek tła był dobrze pocięty, czyli jeżeli tło jest gradientem od góry do dołu to wytnij 5-o pikselowy pasek od góry do dołu i pasek powtarzając się będzie uzupełniał tło od lewej do prawej strony.
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.