Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> CSS i XHTML - Najczęściej zadawane pytania, FAQ
ano
post 4.09.2006, 14:27:59
Post #1





Grupa: Zarejestrowani
Postów: 435
Pomógł: 40
Dołączył: 16.02.2003
Skąd: Wrocław

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

FAQ
CSS i XHTML - Najczęściej zadawane pytania


1. Dziwne odstępy pomiędzy formularzem, a pozostałą częścią strony.

Problem: Gdy wklejam kod formularza:
[HTML] pobierz, plaintext 
  1. <form method="post" action="bar.php">
  2. <input type="text" name="foo">
  3. <input type="submit" name="Submit" value="Wyślij"></form>
[HTML] pobierz, plaintext


Pojawiają się dziwne odstępy między formularzem, a pozostałą częścią strony.

Rozwiązanie: Dodaj do arkusza CSS następujące linijki:
[XML] pobierz, plaintext 
  1. form {  
  2. margin: 0;
  3. padding: 0;
  4. }
[XML] pobierz, plaintext


Spowoduje to usunięcie marginesów wokół formularza.


2. Jak wyrównać kontener w poziomie, zgodnie ze specyfikacją xHTML?

Problem: Chciałbym, aby jeden element na stronie był wyrównany w poziomie, dotychczas używalem:
[HTML] pobierz, plaintext 
  1. <div align="center">[...]</div>
[HTML] pobierz, plaintext


Jak rozwiązać to zgodnie ze standardami xHTML?

Rozwiązanie: Należy dodać następujące linijki w:
- przed głównym blokiem dokumentu (znaczniku <html>):
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
[HTML] pobierz, plaintext

(lub inny typ, więcej informacji na: http://www.alistapart.com/articles/doctype/)

- sekcji body:
[HTML] pobierz, plaintext 
  1. <div id="foo">[...]</div>
[HTML] pobierz, plaintext


- w arkuszu CSS:
[XML] pobierz, plaintext 
  1. #foo {
  2. margin: 0 auto;
  3. }
[XML] pobierz, plaintext



3. Jak wyrównać w pionie (i poziomie) kontener, zgodnie ze specyfikacją xHTML?

Problem: Czy jest jakiś sposób na wyśrodkowanie elementu <div> w pionie i poziomie, względem całej strony?
Rozwiązanie: Tak, jest to możliwe. O to adres do przykładu: http://riddle.pl/-/xhtml/css-centering/vert-03.html (Š www.Riddle.pl)


4. Jak wstawić animację Flash na stronę?

Problem: Gdy wstawiam animację Flash na moją stronę:
[HTML] pobierz, plaintext 
  1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align=""><param name="movie" value="movie.swf"><embed src="movie.swf" quality="high" width="400" height="300" name="movie" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </object>
[HTML] pobierz, plaintext


W walidatorze w3.org wyświetla się masa błędów. Jak umieścić tą animację zgodnie ze specyfikacją xHTML?

Rozwiązanie: Proponuję umieścić go za pomocą tego kodu:
[HTML] pobierz, plaintext 
  1. <object type="application/x-shockwave-flash" data="foo.swf" width="400" height="300">
  2. <param name="movie" value="foo.swf" />
  3. </object>
[HTML] pobierz, plaintext

(polecam także przeczytać artykuł na „A List Apart” - http://www.alistapart.com/articles/flashsatay/)


5. Co zrobić, żeby w przeglądarce Internet Explorer poprawnie wyświetlały się przezroczyste obrazki PNG?

Problem: Gdy wstawiam na moją stronę obrazek png z przezroczystością, niepoprawnie wyświetla się on w przeglądarce Internet Explorer –
zamiast przezroczystego tła, pojawia się szare.

Rozwiązanie: Do arkusza styli css wystarczy dodać:
[XML] pobierz, plaintext 
  1. /*Alpha PNG support for IESelf-removing expression trick from: <a href="http://dean.edwards.name/my/misbehaviors/OnAfterPrint" target="_blank">http://dean.edwards.name/my/misbehaviors/OnAfterPrint</a> doesn't seem worth the trouble; PNGs will look buggy after printingbecause IE has buggy PNG support.\*/* html img/**/ { filter:expression( this.napalmLoaded ? "" : ( this.src.substr(this.src.length-4)==".png" ? ( (!this.complete) ? "" : this.runtimeStyle.filter= ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+ (this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+ String(this.napalmLoaded=true).substr(0,0)+ (this.src="gfx/transparent.gif").substr(0,0) ) : this.runtimeStyle.filter="" ) );}/**/
[XML] pobierz, plaintext

... i problem z głowy.


6. Jak rozciągnąć tło w kontenerze?

Problem: http://forum.php.pl/lofiversion/index.php/t48880.html - pierwszy post
Rozwiązanie: http://forum.php.pl/lofiversion/index.php/t48880.html - post drugi (Zajec’a)


7. Przykładowy, prosty szablon strony.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <title>Moja strona domowa</title>
  5.  
  6. <style type="text/css">
  7. body {
  8. 	font-size: 11px; color: #000; font-family: verdana
  9. }
  10. h1 {
  11. 	font-weight: normal; font-size: 16px; padding-bottom: 10px; margin: 0px; padding-top: 0px
  12. }
  13. #page {
  14. 	margin: 0px auto; width: 750px
  15. }
  16. #menu {
  17. 	float: left; width: 220px; padding-top: 0px
  18. }
  19. #content {
  20. 	float: right; width: 530px; text-align: justify
  21. }
  22. #data {
  23. 	font-size: 9px; color: silver; text-align: right
  24. }
  25. #menu ul {
  26. 	padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; width: 200px; padding-top: 0px; list-style-type: none
  27. }
  28. #menu li {
  29. 	display: block; font-weight: bold; margin: 0px; width: 200px; color: silver; border-bottom: #606060 1px solid
  30. }
  31. #menu li a {
  32. 	padding-right: 4px; display: block; padding-left: 4px; padding-bottom: 4px; margin-left: 0px; width: 182px; color: silver; text-indent: 1px; padding-top: 4px; text-decoration: none
  33. }
  34. #menu li a:hover {
  35. 	color: #000; text-decoration: none
  36. }
  37. </style>
  38. </head>
  39. <body>
  40.     <div id="page">
  41.         <div id="menu">
  42.             <ul>
  43.  
  44.                         <li>
  45.                             <a href="Default.aspx?ID=1">Strona główna</a>
  46.                         </li>
  47.  
  48.                         <li>
  49.                             <a href="Default.aspx?ID=2">Where does it come from?</a>
  50.                         </li>
  51.  
  52.                         <li>
  53.                             <a href="Default.aspx?ID=3">Why do we use it?</a>
  54.                         </li>
  55.  
  56.                         <li>
  57.                             <a href="Default.aspx?ID=4">Where can I get some?</a>
  58.                         </li>
  59.  
  60.                         <li>
  61.                             <a href="Default.aspx?ID=5">Sample text</a>
  62.                         </li>
  63.  
  64.             </ul>
  65.         </div>
  66.         <div id="content">
  67.  
  68.                     <h1>Strona główna</h1>
  69.                     <p>
  70.                     Tabele w HTML powstały, aby spełniać jedno określone zadanie: pokazywać dane 
  71.                     tabelaryczne. Niestety, twórcy stron odkryli, że dzięki border="0" mogą wykorzystać
  72.                     tabele jako siatkę, według której układają elementy strony. Wciąż jest to
  73.                     najpopularniejszy sposób budowania stron internetowych, przeszkadzający w
  74.                     uczynieniu Sieci lepszą — bardziej dostępną, elastyczną i użyteczną. Zobacz,
  75.                     skąd się bierze problem i poznaj metody przestawienia się częściowo lub całkowicie
  76.                     na układ pozbawiony (niewłaściwie użytych) tabel.
  77.                     </p>
  78.                     <hr />
  79.                     <span id="data">Added time: 17-08-2006</span>
  80.  
  81.         </div>
  82.     </div>
  83. </body>
  84. </html>
[HTML] pobierz, plaintext



8. Adresy do artykułów z zagadnień CSS i xHTML – częste problemy webmasterów.

- Equal Height Columns - http://positioniseverything.net/articles/o...out/equalheight
- In Search of the Holy Grail - http://alistapart.com/articles/holygrail
- Multi-Column Lists - http://alistapart.com/articles/multicolumnlists
- Creating Liquid Layouts with Negative Margins - http://alistapart.com/articles/negativemargins
- Creating Custom Corners & Borders Part II - http://alistapart.com/articles/customcorners2
- From Table Hacks to CSS Layout: A Web Designer’s Journey - http://alistapart.com/articles/journey


9. Ciekawe strony nt. xHTML i CSS.

- Dlaczego układ na tabelkach jest głupi? - http://osiolki.net/tabelki/
- „For people who make websites” - www.alistapart.com/
- Jeden z lepszych kursów xHTML’a - http://xhtml.b7.pl/

Ten post edytował ano 6.09.2006, 13:54:16


--------------------
Linkedin | ...
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
hieroshima
post 16.04.2010, 19:31:32
Post #2





Grupa: Zarejestrowani
Postów: 83
Pomógł: 6
Dołączył: 4.04.2010

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

Cytat(ano @ 4.09.2006, 15:27:59 ) *
5. Co zrobić, żeby w przeglądarce Internet Explorer poprawnie wyświetlały się przezroczyste obrazki PNG?

Problem: Gdy wstawiam na moją stronę obrazek png z przezroczystością, niepoprawnie wyświetla się on w przeglądarce Internet Explorer –
zamiast przezroczystego tła, pojawia się szare.

Rozwiązanie: Do arkusza styli css wystarczy dodać:
[XML] pobierz, plaintext 
  1. /*Alpha PNG support for IESelf-removing expression trick from: <a href="http://dean.edwards.name/my/misbehaviors/OnAfterPrint" target="_blank">http://dean.edwards.name/my/misbehaviors/OnAfterPrint</a> doesn't seem worth the trouble; PNGs will look buggy after printingbecause IE has buggy PNG support.\*/* html img/**/ { filter:expression( this.napalmLoaded ? "" : ( this.src.substr(this.src.length-4)==".png" ? ( (!this.complete) ? "" : this.runtimeStyle.filter= ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+ (this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+ String(this.napalmLoaded=true).substr(0,0)+ (this.src="gfx/transparent.gif").substr(0,0) ) : this.runtimeStyle.filter="" ) );}/**/
[XML] pobierz, plaintext

... i problem z głowy.


Dlaczego mi to nie działa ? smile.gif
Go to the top of the page
+Quote Post
ano
post 19.04.2010, 21:58:28
Post #3





Grupa: Zarejestrowani
Postów: 435
Pomógł: 40
Dołączył: 16.02.2003
Skąd: Wrocław

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

Cytat(hieroshima @ 16.04.2010, 20:31:32 ) *
Dlaczego mi to nie działa ? smile.gif


pamiętaj, że musisz mieć w folderze gfx/ przeźroczysty obrazek "transparent.gif" o wymiarach 1x1 px.

Ta linijka wskazuje na owy plik:
[XML] pobierz, plaintext 
  1. (this.src="gfx/transparent.gif")
[XML] pobierz, plaintext


--------------------
Linkedin | ...
Go to the top of the page
+Quote Post

Posty w temacie
- ano   CSS i XHTML - Najczęściej zadawane pytania   4.09.2006, 14:27:59
- - mike_mech   Wątek utworzony z pierwszego posta z wątku: Propoz...   4.09.2006, 19:08:23
- - babejsza   W punkcie 2. Nie trzeba używać XHTML 1.1. Wystarc...   5.09.2006, 08:15:01
- - gekon   Ja bym w ogóle dał przekierowanie do tego artykułu...   5.09.2006, 09:11:49
- - DeyV   Co do wstawiania Flasha na stronę - uważąm, że naj...   5.09.2006, 09:53:34
- - ano   OK, poprawiłem wymienione przez was błędy. CytatC...   5.09.2006, 15:20:45
|- - macbirdie   Cytat(ano @ 5.09.2006, 16:20:45 ) OK,...   21.09.2006, 00:18:16
- - gekon   10. Opacity: - "opacity" znaczy nieprze...   26.07.2007, 20:35:17
- - f1xer   11. IE6 i width:auto; na przykładzie listy nieupor...   29.08.2009, 01:15:58
- - hieroshima   Cytat(ano @ 4.09.2006, 15:27:59 ) 5. ...   16.04.2010, 19:31:32
|- - ano   Cytat(hieroshima @ 16.04.2010, 20:31...   19.04.2010, 21:58:28
- - krzysztof_kf   Może tak ? [CSS] pobierz, plaintext <DIV ID=...   16.04.2010, 19:39:38
- - hieroshima   gdzie ja tego diva mam dac ? To ma być osobny div ...   16.04.2010, 19:45:00

« Następny starszy · Po stronie przeglądarki · 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.05.2024 - 20:49
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn