Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Szerokość tła w procentach
bialasik
post 16.06.2010, 13:52:41
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.06.2010

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

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ć?
Go to the top of the page
+Quote Post
Soulast
post 16.06.2010, 19:55:16
Post #2





Grupa: Zarejestrowani
Postów: 133
Pomógł: 6
Dołączył: 26.10.2009

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

A możesz pokazać część tego kod?

css, html mile widziane;)
Go to the top of the page
+Quote Post
bialasik
post 16.06.2010, 21:21:09
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.06.2010

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

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).
Go to the top of the page
+Quote Post
kapuch
post 16.06.2010, 21:50:25
Post #4





Grupa: Zarejestrowani
Postów: 389
Pomógł: 69
Dołączył: 26.04.2010
Skąd: Łódź

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

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?


--------------------
Nie chce "Pomógł", aktualna ilość (69) w pełni mnie satysfakcjonuje :)
Go to the top of the page
+Quote Post
Soulast
post 17.06.2010, 10:43:46
Post #5





Grupa: Zarejestrowani
Postów: 133
Pomógł: 6
Dołączył: 26.10.2009

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

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.
Go to the top of the page
+Quote Post
bialasik
post 17.06.2010, 13:38:28
Post #6





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.06.2010

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

Okej, tylko tło musi dopasowywać się szerokością do okna przeglądarki, tak jak obrazki header i end.
Go to the top of the page
+Quote Post
Pilsener
post 17.06.2010, 14:49:22
Post #7





Grupa: Zarejestrowani
Postów: 1 590
Pomógł: 185
Dołączył: 19.04.2006
Skąd: Gdańsk

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

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)
Go to the top of the page
+Quote Post
bialasik
post 17.06.2010, 14:52:36
Post #8





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.06.2010

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

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ę.
Go to the top of the page
+Quote Post
Belze
post 17.06.2010, 15:21:02
Post #9





Grupa: Zarejestrowani
Postów: 50
Pomógł: 4
Dołączył: 15.09.2003
Skąd: warszawa

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

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
Go to the top of the page
+Quote Post
bialasik
post 17.06.2010, 16:18:37
Post #10





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 16.06.2010

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

Poniżej wyrysowany przykład na szybko, mam nadzieję, że da się zrozumieć teraz.

flashujemy.org/pics/tjaa.png

Ten post edytował bialasik 17.06.2010, 16:19:22
Go to the top of the page
+Quote Post
emtiej
post 17.06.2010, 17:33:13
Post #11





Grupa: Zarejestrowani
Postów: 207
Pomógł: 18
Dołączył: 12.04.2009
Skąd: Rypin

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

[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.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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: 20.06.2025 - 18:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn