Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Dlaczego nie wyświetla tła obrazkowego, oraz nie respektuje rozmiaru pojemnika
AboutMe
post 12.03.2010, 13:07:09
Post #1





Grupa: Zarejestrowani
Postów: 261
Pomógł: 0
Dołączył: 24.02.2008

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

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


Ten post edytował AboutMe 12.03.2010, 13:08:05
Go to the top of the page
+Quote Post
!*!
post 12.03.2010, 13:30:05
Post #2





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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

Kod
width: 200px; height: 200px;
zamiast
Kod
width: 200; height: 200px;


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
albrzykowski
post 12.03.2010, 13:30:53
Post #3





Grupa: Zarejestrowani
Postów: 40
Pomógł: 3
Dołączył: 5.02.2007

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

[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


--------------------
Debian Etch, MySQL 5, PHP 5, Apache 2, Eclipse PDT
Go to the top of the page
+Quote Post
AboutMe
post 12.03.2010, 14:27:48
Post #4





Grupa: Zarejestrowani
Postów: 261
Pomógł: 0
Dołączył: 24.02.2008

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

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ę

Ten post edytował AboutMe 12.03.2010, 14:29:30
Go to the top of the page
+Quote Post
!*!
post 12.03.2010, 14:44:33
Post #5





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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

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.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
AboutMe
post 12.03.2010, 14:55:41
Post #6





Grupa: Zarejestrowani
Postów: 261
Pomógł: 0
Dołączył: 24.02.2008

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

Wiem ze coś jest źle, tylko co?
Obrazek 10 kb waży tylko
Go to the top of the page
+Quote Post
!*!
post 12.03.2010, 15:21:59
Post #7





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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

Napisz pierw co chcesz uzyskać, jaki efekt.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
AboutMe
post 12.03.2010, 15:49:28
Post #8





Grupa: Zarejestrowani
Postów: 261
Pomógł: 0
Dołączył: 24.02.2008

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

chcę wyświetlić obrazek jako tło w #container
Go to the top of the page
+Quote Post
!*!
post 12.03.2010, 17:01:01
Post #9





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

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

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.


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
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.04.2024 - 05:13
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn