Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Dlaczego nie wyświetla tła obrazkowego
Forum PHP.pl > Forum > Przedszkole
AboutMe
12.03.2010, 13:07:09
Witam,

Co jest w poniższym kodzie nie tak:
Nie wyświetla tła obrazkowego oraz nie działą ogranicznik rozmiaru pojemnika xcontent


[HTML] pobierz, plaintext 
  1. #container {
  2.     margin: 100px 100px 100px 100px;
  3.     width: 1095; height: 548px;
  4.     height: auto;
  5.     background-image: url(images/background.png) no-repeat;
  6. }
  7.  
  8. div#xcontent { 
  9. width: 200; height: 200px;
  10. overflow: scroll;
  11. top: 225px; left: 195px;
  12. position: absolute;
  13. font: 7pt Verdana, Arial, sans-serif;
  14. color: white;
  15. }
[HTML] pobierz, plaintext 







[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4.  
  5. <head>
  6.  
  7. <title>Site</title>
  8. <link href="style.css" rel="stylesheet" type="text/css" />
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  10.  
  11. </head>
  12. <body>
  13.  
  14.  
  15. <div id="container">
  16.  
  17.  
  18.  
  19.  
  20. <div id="xcontent">
  21.  
  22. Curabitur a nunc vitae dui convallis dapibus. Cras orci nisl,
  23. lobortis vitae dictum nec, luctus id velit. Cum sociis natoque
  24. penatibus et magnis dis parturient montes,
  25. nascetur ridiculus mus. Praesent ac fringilla tellus. Integer suscipit venenatis nisl eu consequat.
  26. Duis blandit aliquet orci, at consequat sapien lobortis sed. Phasellus ultrices porta dapibus. Nullam
  27. commodo hendrerit auctor. Suspendisse et lectus tellus, quis consequat libero. Suspendisse nisl enim, sodales
  28. eget lobortis vel, dictum in urna. Sed ut dui velit, sit amet
  29.  
  30. </div>
  31.  
  32.  
  33.  
  34.  
  35. </div>
[HTML] pobierz, plaintext
!*!
12.03.2010, 13:30:05
Kod
width: 200px; height: 200px;
zamiast
Kod
width: 200; height: 200px;
albrzykowski
12.03.2010, 13:30:53 
[HTML] pobierz, plaintext 
  1. #container {
  2.     margin: 100px 100px 100px 100px;
  3.     width: 1095; height: 548px;
  4.     height: auto;
  5.     background-image: url(images/background.png) no-repeat;
  6. }
  7.  
  8. div#xcontent { 
  9. width: 200; height: 200px;
  10. overflow: scroll;
  11. top: 225px; left: 195px;
  12. position: absolute;
  13. font: 7pt Verdana, Arial, sans-serif;
  14. color: white;
  15. }
[HTML] pobierz, plaintext


Witaj,

Po pierwsze proponuje deklarować jednostki width: 1095; -> width: 1095px; i to samo dotyczy deklaracji dla xcontent.
Po drugie pozycjonujesz absolutnie i domyślam się, że chcesz xcontent wypozycjonować względem container, wtedy powinieneś i jemu zdeklarować position na relative/absolute a nie domyślną static.
Korzystaj w czasie pisania z borderów dla konkretnych div-ów, łatwiej sprawdzić zachowanie layoutu.
I wybacz, bo może to zabrzmi głupio, ale upewnij się że podana ścieżka do grafiki jest poprawna.

Pozdrawiam
AboutMe
12.03.2010, 14:27:48
Z tym tłem to zadziałało po usunięciu no-repeat
i dodaniu po
Cytat
<div id="container">

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



po dodaniu obramowania i usunięciu <br> mam tylko poziomą linię
!*!
12.03.2010, 14:44:33
Cytat(AboutMe @ 12.03.2010, 14:27:48 ) *
Z tym tłem to zadziałało po usunięciu no-repeat
i dodaniu po



po dodaniu obramowania i usunięciu <br> mam tylko poziomą linię


Czyli robisz coś źle. w ogóle na co Ci taki duży obrazek? Zanim się on załaduje to trochę potrwa.
AboutMe
12.03.2010, 14:55:41
Wiem ze coś jest źle, tylko co?
Obrazek 10 kb waży tylko
!*!
12.03.2010, 15:21:59
Napisz pierw co chcesz uzyskać, jaki efekt.
AboutMe
12.03.2010, 15:49:28
chcę wyświetlić obrazek jako tło w #container
!*!
12.03.2010, 17:01:01
Kod
#container {
    margin: 100px 100px 100px 100px; /* po co Ci az taki margines ?*/
    width: 1095; height: 548px; /* ustal px dla bloku*/
    height: auto;  /* juz podales wyżej height, wiec po co dwa razy? */
    background-image: url(images/background.png) no-repeat;
}

div#xcontent {
width: 200; height: 200px; /* to samo, brak px */
overflow: scroll; /* skoro masz ustalona wielkość to raczej zbędne */
top: 225px; left: 195px; /* nie lepiej użyć padding? */
position: absolute; /* pozycja absolutna tez mi tu nie pasuje, nie widzę potrzeby */
font: 7pt Verdana, Arial, sans-serif;
color: white;
}


Popraw to wszytko. I zamiast robić udziwnienia w postaci marginesów 100px i szerokosci z kosmosu 1095px ustaw odpowiedni padding w content. albo jeszcze lepiej nie musisz ustawiać takich wartości dla kontenera, wystarczy że dasz sam obraz tła.
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.