Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> 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:
  1. <form method="post" action="bar.php">
  2. <input type="text" name="foo">
  3. <input type="submit" name="Submit" value="Wyślij"></form>


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

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


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:
  1. <div align="center">[...]</div>


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>):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

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


- w arkuszu CSS:
  1. #foo {
  2. margin: 0 auto;
  3. }



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ę:
  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>


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:
  1. <object type="application/x-shockwave-flash" data="foo.swf" width="400" height="300">
  2. <param name="movie" value="foo.swf" />

(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ć:
  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="" ) );}/**/

... 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.

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



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
mike
post 4.09.2006, 19:08:23
Post #2





Grupa: Przyjaciele php.pl
Postów: 7 494
Pomógł: 302
Dołączył: 31.03.2004

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


Wątek utworzony z pierwszego posta z wątku: Propozycja przylejonego tematu...
Go to the top of the page
+Quote Post
babejsza
post 5.09.2006, 08:15:01
Post #3





Grupa: Zarejestrowani
Postów: 407
Pomógł: 1
Dołączył: 4.03.2003
Skąd: warszawa

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


W punkcie 2. Nie trzeba używać XHTML 1.1. Wystarczy 1.0 Transitional bądź Strict.

  1. #foo {
  2. margin: 0 auto 0 auto;
  3. }
Go to the top of the page
+Quote Post
gekon
post 5.09.2006, 09:11:49
Post #4





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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


Ja bym w ogóle dał przekierowanie do tego artykułu zamiast sugerowac jaki kolwiek DOCTYPE.


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
DeyV
post 5.09.2006, 09:53:34
Post #5





Grupa: Zarząd
Postów: 2 277
Pomógł: 6
Dołączył: 27.12.2002
Skąd: Wołów/Wrocław




Co do wstawiania Flasha na stronę - uważąm, że najlepszym rozwiązaniem jest skorzystanie z JS i biblioteki
http://blog.deconcept.com/swfobject/

Pozwala to nie tylko na znaczne uproszczenie kodu i zachowanie zgodności z W3C ale także jest poprawnie obsługiwane przez wszystkie przegladarki z JS a co wiecej - eliminuje mechanizm blokowania Flashy, który pojawił się w najnowszych wersjach IE 6 (ta szara ramka wokół flasha)
Cytat
<script type="text/javascript" src="swfobject.js"></script>

<div id="flashcontent">
This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.write("flashcontent");
</script>


--------------------
"Niezależnie od tego, jakie masz osiągnięcia, ktoś Ci pomaga..."
Go to the top of the page
+Quote Post
ano
post 5.09.2006, 15:20:45
Post #6





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

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


OK, poprawiłem wymienione przez was błędy.

Cytat
Co do wstawiania Flasha na stronę - uważąm, że najlepszym rozwiązaniem jest skorzystanie z JS i biblioteki
http://blog.deconcept.com/swfobject/

Pozwala to nie tylko na znaczne uproszczenie kodu i zachowanie zgodności z W3C ale także jest poprawnie obsługiwane przez wszystkie przegladarki z JS a co wiecej - eliminuje mechanizm blokowania Flashy, który pojawił się w najnowszych wersjach IE 6 (ta szara ramka wokół flasha)

Po co mieszać w to JavaScript, skoro można to uzyskać bez niego? A pozatym, w końcu jest to faq CSS i xHTML, nie Java script winksmiley.jpg


--------------------
Linkedin | ...
Go to the top of the page
+Quote Post
macbirdie
post 21.09.2006, 00:18:16
Post #7





Grupa: Zarejestrowani
Postów: 28
Pomógł: 0
Dołączył: 7.09.2006
Skąd: Poznań

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


Cytat(ano @ 5.09.2006, 16:20:45 ) *
OK, poprawiłem wymienione przez was błędy.
Po co mieszać w to JavaScript, skoro można to uzyskać bez niego? A pozatym, w końcu jest to faq CSS i xHTML, nie Java script winksmiley.jpg

Teraz ten problem aktywacji flasha dotyczy też nowszych Oper - w nich także trzeba najpierw animację kliknąć, by reagowała na mysz i inne inputy, choć ramki szarej nie ma. winksmiley.jpg Dlatego uważam że rzeczywiście powinno być podane "właściwsze" rozwiązanie, niż to jedyne, najprostsze i najbardziej poprawne. Ewentualnie jako alternatywę.


--------------------
NotePad++ / Eclipse 3.3 (+PDT+PyDev+WTP) / VS 2005 Standard (+WTL 8.0+WM 2003 SDK/WM 5.0 SDK) / Glassfish / php 5.2.3 / Apache 2.2.x / MySQL 5.0.x / PostgreSQL 8.2.x / cvsd / violin 2.0 / piano 0.7-pre :P
Go to the top of the page
+Quote Post
gekon
post 26.07.2007, 20:35:17
Post #8





Grupa: Zarejestrowani
Postów: 614
Pomógł: 7
Dołączył: 10.11.2003
Skąd: Rzeszów/Kraków

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


10. Opacity:
- "opacity" znaczy nieprzeźroczystość, dlatego wartości tej własności są z przedziału od 0 do 1.
- atrybut ten jest częścią języka CSS w wersji 3
- producenci przeglądarek zaimplementowali już własność "opacity" (silniki Gecko, KHTML/WebKit, Presto), po fazie rozszerzeń lokalnych (-moz-opacity, -khtml-opacity itd.). IE nieprzezroczystość obsługuje jedynie poprzez wbudowane filrty.
- własność ta jest dziedziczona i obecnie nie można zmienić jej wartości w elementach potomnych


--------------------
Pokaż kod = Pokaż CAŁY kod, najlepiej działający na jakimś serwerze.
Fanatycy | glazar.info | semantyka | HTML i XHTML FAQ
Go to the top of the page
+Quote Post
f1xer
post 29.08.2009, 01:15:58
Post #9





Grupa: Zarejestrowani
Postów: 403
Pomógł: 68
Dołączył: 20.03.2008

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


11. IE6 i width:auto; na przykładzie listy nieuporządkowanej

  1. ul {
  2. list-style-type:none;
  3. }
  4.  
  5. ul li {
  6. float:left;
  7. margin-left:10px;
  8. width:0; /* to dla ie6 */
  9. white-space: nowrap; /* to też dla ie6 bo czasem cuduje */
  10. }
  11. /* a teraz dla fajniejszych przeglądarek */
  12. ul > li {
  13. width:auto;
  14. }


--------------------
Pomogłem? wyraź to i kliknij "Pomógł"
Go to the top of the page
+Quote Post
hieroshima
post 16.04.2010, 19:31:32
Post #10





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ć:
  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="" ) );}/**/

... i problem z głowy.


Dlaczego mi to nie działa ? smile.gif
Go to the top of the page
+Quote Post
krzysztof_kf
post 16.04.2010, 19:39:38
Post #11





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

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


Może tak ?

  1. <DIV ID="nazwa" STYLE="position:absolute; left:140px; height:400; width:400;
  2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
  3. src='image.png', sizingMethod='scale');" >
  4. </DIV>
Go to the top of the page
+Quote Post
hieroshima
post 16.04.2010, 19:45:00
Post #12





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

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


gdzie ja tego diva mam dac ? To ma być osobny div na stronie ? czy do kazdego diva musze dać taki styl w któym uzywam obrazow png ?
Go to the top of the page
+Quote Post
ano
post 19.04.2010, 21:58:28
Post #13





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:
  1. (this.src="gfx/transparent.gif")


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

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 17:22