Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Brak tła obrazkowego w divie
Forum PHP.pl > Forum > Przedszkole
Korybut
12.05.2015, 08:22:19
Banalny problem facepalmxd.gif Ćwiczę sobie zadania na E.14, a tu takie licho. Niby wszystko ok, żadnego błędu nie widzę. Robiłem już porządne strony, aż tu nagle zablokowało mnie zadanie z tłem obrazkowym w pustym divie. W innych plikach z moich stron kod wygląda identycznie i działa, ale tutaj za cholerę nie chce wyświetlić. Dla tych co mają chwilę na banały...

Plik html w głównym folderze, glowny.css w folderze /style, a obrazki w /grafiki
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="Stylesheet" type="text/css" href="style/glowny.css"/>
  4. </head>
  5. <div id="foto"></div>
  6. <body>
  7. <div id="baner"><img src="grafiki/baner.jpg" width="600px" height="200px"></img></div>
  8. <marquee>strona internetowa koła fizycznego</marquee>
  9. <div id="menu">
  10. 	<ul>
  11. 	<li><a href="index.html">Strona Główna</a></li>
  12. 	<li><a href="terminy.html">Terminy Spotkań</a></li>
  13. 	<li><a href="kontakt.html">Kontakt</a></li>
  14. 	</ul>
  15. </div>
  16. <div id="foto"></div>
  17.  
  18. <div id="footer"><script src="skrypty/aktualizacja.js"></script></div>
  19. </body>
  20. </html>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. #foto {
  2. 	position: relative;
  3. 	width: 120px;
  4. 	height: 200px;
  5.         background-image:url('grafiki/zdjecie.jpg');
  6. 	border: 2px solid red;
  7. }
  8.  
  9.  
  10. html{
  11. 	margin: 0px;
  12. 	padding: 0px;
  13. 	height: 100%;
  14. 	background-color: #000;
  15. 	color: red;
  16. }
  17.  
  18. body a {
  19. 	color: red;
  20. }
  21.  
  22. #baner {
  23. 	position: relative;
  24. 	width: 600px;
  25. 	left: 50%;
  26. 	margin-left: -25%;
  27. }
  28.  
  29. #menu {
  30. 	width: 100%;
  31. 	height: 50px;
  32. 	background-color: #333;
  33. 	text-align: left;
  34. 	font-family: Arial;
  35. 	font-size: 24px;
  36. 	font-weight: 30px;
  37. }
  38.  
  39. #menu ul {
  40. 	margin-left: 25%;
  41. }
  42.  
  43. #menu li {
  44. 	float: left;
  45. 	padding-left: 20px;
  46. 	padding-top: 10px;
  47. }
  48.  
  49. marquee {
  50. 	font-type: Calibri;
  51. 	font-size: 40px;
  52. }
  53.  
[HTML] pobierz, plaintext


Dodam, że jak styl przypisze się na sztywno do diva w pliku HTML to wszystko wyświetla się poprawnie. Tak więc problem polega na pobieraniu stylu z pliku css. Jednak styl ma być określony właśnie w pliku. Dalej jestem skonsternowany, ponieważ nie wiem gdzie tkwi problem oneeyedsmiley02.png
mmmmmmm
12.05.2015, 08:47:38
A nie tak?:
[HTML] pobierz, plaintext 
  1. background-image:url(../grafiki/zdjecie.jpg);
[HTML] pobierz, plaintext
Korybut
12.05.2015, 09:02:03
Działa! Pytanie dlaczego? przecież "../" każe najpierw cofnąć się do poprzedniego folderu a następnie do docelowego. Więc czemu to działa gdy wszystkie foldery i plik index.html są w jednym? Oraz dlaczego bez problemu działało to w pliku html.
Podejrzewam, że skoro plik css jest wewnątrz drugiego folderu to musi wyjść z niego, ale bez problemu działają mi inne strony bez tej "../" części.

Nie mniej, dzięki za pomoc.
Tuminure
12.05.2015, 09:37:40
Cytat
Działa! Pytanie dlaczego? przecież "../"

Katalog w którym znajduje się plik ze stylami to "/style/". Żeby przedostać się do "/grafiki/" musisz wyjść z katalogu "/style/".

Tak czy inaczej - w zrozumieniu i debugowaniu z pewnością pomoże Ci firebug lub devtoolsy w chromie (po naciśnięciu F12), w których to możesz zobaczyć między innymi z jakich adresów wczytywane są obrazki.
Patrz: http://i.imgur.com/3onKUDv.jpg
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.