Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] Doposanie div do szerkosci
Forum PHP.pl > Forum > Przedszkole
arzach
20.02.2012, 13:04:03
Witam mam taki kod
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. html, body {
  3.  
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
  8. #tresc {
  9.   width: 1000px; 
  10.   height:768px;
  11.   margin-left:auto;
  12.   margin-right:auto;
  13. }
  14.  
  15. #tlo_lewa {
  16.   background-image:url('images/01.gif');
  17.   background-repeat:repeat-x;
  18. }
  19.  
  20. #tlo_prawa {
  21.   background-image:url('images/02.gif');
  22.   background-repeat:repeat-x;
  23. }
  24.  
  25. </style>
  26.  
  27.  
  28. </head>
  29. <body>
  30.  
  31. <div>
  32. <div id="tlo_lewa"></div>
  33. <div id="tresc">
  34. tutaj strona
  35. </div>
  36. <div id="tlo_prawa"></div>
  37. </div>
[HTML] pobierz, plaintext




Div id #tresc ma stałą szerokość i chce by był wyśrodkowany do środka a otaczające go div# tlo_lewa i #tlo_prawa dopasowywały się automatycznie powtarzając obrazek
Obecny kod nie działa
Harsay
20.02.2012, 13:07:01
Do tlo_lewa dodaj
Kod
float:right;

Do tlo_prawy dodaj
Kod
float: left;


Może pomoże.
cykcykacz
20.02.2012, 13:07:58
Nie wiem czy oto ci chodzi ale spróbuj:
[CSS] pobierz, plaintext 
  1. #tlo_lewa {
  2. background-image:url('images/01.gif');
  3. background-repeat:repeat-x;
  4. float: left;
  5. }
  6.  
  7. #tresc {
  8. width: 1000px;
  9. height:768px;
  10. margin-left:auto;
  11. margin-right:auto;
  12. float: left;
  13. }
  14.  
  15.  
  16. #tlo_prawa {
  17. background-image:url('images/02.gif');
  18. background-repeat:repeat-x;
  19. float: left;
  20. }
[CSS] pobierz, plaintext
arzach
20.02.2012, 13:09:11
Nic to nie dało już wczesniej tak probowałem. @cykcykacz to co podałeś też nie działa
cykcykacz
20.02.2012, 13:14:13 
[CSS] pobierz, plaintext 
  1. <style type="text/css">
  2.     html, body {
  3.  
  4.     margin: 0;
  5.     padding: 0;
  6.     }
  7.  
  8.     #tresc {
  9. 	background-color: green;
  10.     width: 1000px;
  11.     height:768px;
  12.     margin-left:auto;
  13.     margin-right:auto;
  14. 	float: left;
  15.     }
  16.  
  17.     #tlo_lewa {
  18.     background-image:url('images/01.gif');
  19.     background-repeat:repeat-x;
  20. 	background-color: orange;
  21. 	width: 20px;
  22. 	height: 20px;
  23. 	float: left;
  24.     }
  25.  
  26.     #tlo_prawa {
  27. 	background-color: pink;
  28.     background-image:url('images/02.gif');
  29.     background-repeat:repeat-x;
  30. 		width: 20px;
  31. 	height: 20px;
  32. 	float: left;
  33.     }
  34.  
  35.     </style>
[CSS] pobierz, plaintext


Trzeba nadać tlo_lewa oraz tlo_prawa długość i szerokość spróbuj tereaz smile.gif.
arzach
20.02.2012, 13:21:41
Nie działa także



Chce aby białe tło z lewej i prawej były pokryte obrazkiem który będzie się potarzał x razy i był dopasowane do środka
crocodillo
20.02.2012, 13:39:02 
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. html, body {
  3.  
  4. margin: 0;
  5. padding: 0;
  6. }
  7.  
  8. #tresc {
  9.   width: 1000px; 
  10.   height:768px;
  11.   margin-left:-500px;
  12.   background-color:rgba(255,255,255,0.3);
  13. }
  14.  
  15. #tlo_lewa {
  16.   background-color:rgba(255,0,0,0.5);
  17. }
  18.  
  19. #tlo_prawa {
  20.     margin-left:50%;
  21.   background-color:rgba(0,255,0,0.5);
  22. }
  23.  
  24. </style>
  25.  
  26.  
  27. </head>
  28. <body>
  29.  
  30. <div id="tlo_lewa">
  31. <div id="tlo_prawa">
  32. <div id="tresc">
  33. test
  34.  
  35. </div>
  36. </div>
  37. </div>
  38. </body>
[HTML] pobierz, plaintext
kadlub
20.02.2012, 13:40:34
Przykład

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. html, body {
  3. margin:0;
  4. padding:0;
  5.  
  6. }
  7.  
  8. #tresc {
  9.   width: 50%; 
  10.   height:768px;
  11.   margin:auto;
  12. position:relative;
  13. background:#0000ff;
  14. }
  15.  
  16. #tlo_lewa {
  17. background:#ff0000;
  18. background-repeat:repeat-x;
  19. position:relative;
  20. height:768px;
  21. width: 25%; 
  22. float:left;
  23. }
  24.  
  25. #tlo_prawa {
  26. background:#ffff00;
  27. background-repeat:repeat-x;
  28. position: realtive;
  29. height:768px;
  30. width: 25%; 
  31. float:right;
  32. }
  33.  
  34. </style>
  35.  
  36.  
  37. </head>
  38. <body>
  39. <div>
  40. <div id="tlo_lewa">adsadsadsa</div>
  41. <div id="tlo_prawa">dsadsa</div>
  42. <div id="tresc">
  43. tutaj strona
  44. </div>
  45.  
  46. </div>
  47.  
  48.  
[HTML] pobierz, plaintext



tylko poustawiaj sobie te swoje zdjęcia
arzach
20.02.2012, 14:18:54
Cytat(kadlub @ 20.02.2012, 13:40:34 ) *
tylko poustawiaj sobie te swoje zdjęcia


Już prawie dobrze ale jak dam tak 
[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2. html, body {
  3. margin:0;
  4. padding:0;
  5.  
  6. }
  7.  
  8. #tresc {
  9.   width: 50%;
  10.   height:768px;
  11.   margin:auto;
  12. position:relative;
  13. background:#0000ff;
  14. }
  15.  
  16. #tlo_lewa {
  17. background:#ff0000;
  18. background-repeat:repeat-x;
  19. position:relative;
  20. height:768px;
  21. width: 25%; 
  22. float:left;
  23. background-image: url(images/01.gif);
  24. }
  25.  
  26. #tlo_prawa {
  27. background:#ffff00;
  28. background-repeat:repeat-x;
  29. position: realtive;
  30. height:768px;
  31. width: 25%; 
  32. float:right;
  33. background-image: url(images/02.gif);
  34. }
  35.  
  36. </style>
  37.  
  38.  
  39. </head>
  40. <body>
  41. <div>
  42. <div id="tlo_lewa">adsadsadsa</div>
  43. <div id="tlo_prawa">dsadsa</div>
  44. <div id="tresc">
  45. <img src="images/tlo.gif" width="1000" height="768" alt="" />
  46. </div>
  47.  
  48. </div>
  49.  
  50.  
  51. </body>
  52. </html>
[HTML] pobierz, plaintext


To ucieka do prawej ale jak zmienię 
[CSS] pobierz, plaintext 
  1. #tresc {
  2.   width: 50%;
  3.   height:768px;
  4.   margin:auto;
  5. position:relative;
  6. background:#0000ff;
  7. }
[CSS] pobierz, plaintext


na 
[CSS] pobierz, plaintext 
  1. #tresc {
  2.   width: 1000px;
  3.   height:768px;
  4.   margin:auto;
  5. position:relative;
  6. background:#0000ff;
  7. }
[CSS] pobierz, plaintext


To jest już dobrze ale nie mogę wtedy wstawić w ten div obrazek bo się nie wyświetla tylko niebieskie tło
A w ten div chce wstawić potem pocięte obrazki
kadlub
20.02.2012, 14:31:52

to zmień
background:#0000ff;
na
background-image: url(tu ścieżka do zdjęcia);
arzach
20.02.2012, 16:44:26
Cytat(kadlub @ 20.02.2012, 14:31:52 ) *
to zmień
background:#0000ff;
na
background-image: url(tu ścieżka do zdjęcia);



Tam nie moze być background-image bo tam nie ma byc tła tylko w tym div #tresc bedą pocięte obrazki. I on ma mieć stałą szerkość czyli
[CSS] pobierz, plaintext 
  1.     #tresc {
  2.     width: 1000px;
  3.     height:768px;
  4.     margin:auto;
  5.     position:relative;
  6.     background:#0000ff;
  7.     }
[CSS] pobierz, plaintext


Dla tego chce tak wstawić
[HTML] pobierz, plaintext 
  1. <div>
  2. <div id="tlo_lewa">adsadsadsa</div>
  3. <div id="tlo_prawa">dsadsa</div>
  4. <div id="tresc">
  5. <img src="images/tlo.gif" width="1000" height="768" alt="" />
  6.  
  7. tutaj inne divy z pociętymi obrazkami
  8.  
  9.  
  10. </div>
  11.  
  12. </div>
[HTML] pobierz, plaintext


I jak zrobię tak to jest prawie dobrze ale wyswietla sie niebiesko tło zamiast obrazka
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Bez nazwy-12</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
  5.  
  6. <style type="text/css">
  7. html, body {
  8. margin:0;
  9. padding:0;
  10.  
  11. }
  12.  
  13. #tresc {
  14.   width: 1000px;
  15.   height:768px;
  16.   margin:auto;
  17. position:relative;
  18. background:#0000ff;
  19. }
  20.  
  21. #tlo_lewa {
  22. background:#ff0000;
  23. background-repeat:repeat-x;
  24. position:relative;
  25. height:768px;
  26. width: 25%; 
  27. float:left;
  28. background-image: url(images/01.gif);
  29. }
  30.  
  31. #tlo_prawa {
  32. background:#ffff00;
  33. background-repeat:repeat-x;
  34. position: realtive;
  35. height:768px;
  36. width: 25%; 
  37. float:right;
  38. background-image: url(images/02.gif);
  39. }
  40.  
  41. </style>
  42.  
  43.  
  44. </head>
  45. <body>
  46. <div>
  47. <div id="tlo_lewa">adsadsadsa</div>
  48. <div id="tlo_prawa">dsadsa</div>
  49. <div id="tresc">
  50. <img src="images/tlo.gif" width="1000" height="768" alt="" />
  51.  
  52. tutaj inne divy z pociętymi obrazkami
  53.  
  54.  
  55. </div>
  56.  
  57. </div>
  58.  
  59.  
  60. </body>
  61. </html>
[HTML] pobierz, plaintext


I jak teraz zrobić aby ten obrazek wyświetlał się zamiast niebieskiego tła questionmark.gif? On potem będzie pocięty na chwile obecną jest to jako jeden obrazek

Obecnie jest tak jak to poprawic questionmark.gifquestionmark.gif?



.

Czy ktoś jest w stanie mi pomóc.
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.