Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Po stronie przeglądarki _ CSS i XHTML - Najczęściej zadawane pytania

Napisany przez: ano 4.09.2006, 14:27:59

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. <http://december.com/html/4/element/form.html method="post" action="bar.php">
  2. <http://december.com/html/4/element/input.html type="text" name="foo">
  3. <http://december.com/html/4/element/input.html type="submit" name="Submit" value="Wyślij"></http://december.com/html/4/element/form.html>
[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. <http://december.com/html/4/element/div.html align="center">[...]</http://december.com/html/4/element/div.html>
[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. <http://december.com/html/4/element/div.html id="foo">[...]</http://december.com/html/4/element/div.html>
[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. <http://december.com/html/4/element/object.html 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=""><http://december.com/html/4/element/param.html 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"> </http://december.com/html/4/element/object.html>
[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. <http://december.com/html/4/element/object.html type="application/x-shockwave-flash" data="foo.swf" width="400" height="300">
  2. <http://december.com/html/4/element/param.html name="movie" value="foo.swf" />
  3. </http://december.com/html/4/element/object.html>
[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. <http://december.com/html/4/element/html.html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <http://december.com/html/4/element/head.html>
  4.     <http://december.com/html/4/element/title.html>Moja strona domowa</http://december.com/html/4/element/title.html>
  5.  
  6. <http://december.com/html/4/element/style.html 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. </http://december.com/html/4/element/style.html>
  38. </http://december.com/html/4/element/head.html>
  39. <http://december.com/html/4/element/body.html>
  40.     <http://december.com/html/4/element/div.html id="page">
  41.         <http://december.com/html/4/element/div.html id="menu">
  42.             <http://december.com/html/4/element/ul.html>
  43.  
  44.                         <http://december.com/html/4/element/li.html>
  45.                             <http://december.com/html/4/element/a.html href="Default.aspx?ID=1">Strona główna</http://december.com/html/4/element/a.html>
  46.                         </http://december.com/html/4/element/li.html>
  47.  
  48.                         <http://december.com/html/4/element/li.html>
  49.                             <http://december.com/html/4/element/a.html href="Default.aspx?ID=2">Where does it come from?</http://december.com/html/4/element/a.html>
  50.                         </http://december.com/html/4/element/li.html>
  51.  
  52.                         <http://december.com/html/4/element/li.html>
  53.                             <http://december.com/html/4/element/a.html href="Default.aspx?ID=3">Why do we use it?</http://december.com/html/4/element/a.html>
  54.                         </http://december.com/html/4/element/li.html>
  55.  
  56.                         <http://december.com/html/4/element/li.html>
  57.                             <http://december.com/html/4/element/a.html href="Default.aspx?ID=4">Where can I get some?</http://december.com/html/4/element/a.html>
  58.                         </http://december.com/html/4/element/li.html>
  59.  
  60.                         <http://december.com/html/4/element/li.html>
  61.                             <http://december.com/html/4/element/a.html href="Default.aspx?ID=5">Sample text</http://december.com/html/4/element/a.html>
  62.                         </http://december.com/html/4/element/li.html>
  63.  
  64.             </http://december.com/html/4/element/ul.html>
  65.         </http://december.com/html/4/element/div.html>
  66.         <http://december.com/html/4/element/div.html id="content">
  67.  
  68.                     <http://december.com/html/4/element/h1.html>Strona główna</http://december.com/html/4/element/h1.html>
  69.                     <http://december.com/html/4/element/p.html>
  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.                     </http://december.com/html/4/element/p.html>
  78.                     <http://december.com/html/4/element/hr.html />
  79.                     <http://december.com/html/4/element/span.html id="data">Added time: 17-08-2006</http://december.com/html/4/element/span.html>
  80.  
  81.         </http://december.com/html/4/element/div.html>
  82.     </http://december.com/html/4/element/div.html>
  83. </http://december.com/html/4/element/body.html>
  84. </http://december.com/html/4/element/html.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/onetruelayout/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/

Napisany przez: mike_mech 4.09.2006, 19:08:23

Wątek utworzony z pierwszego posta z wątku: http://forum.php.pl/index.php?s=&showtopic=53215&view=findpost&p=291109

Napisany przez: babejsza 5.09.2006, 08:15:01

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

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

Napisany przez: gekon 5.09.2006, 09:11:49

Ja bym w ogóle dał przekierowanie http://www.alistapart.com/articles/doctype/ zamiast sugerowac jaki kolwiek DOCTYPE.

Napisany przez: DeyV 5.09.2006, 09:53:34

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>

Napisany przez: ano 5.09.2006, 15:20:45

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

Napisany przez: macbirdie 21.09.2006, 00:18:16

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

Napisany przez: gekon 26.07.2007, 20:35:17

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

Napisany przez: f1xer 29.08.2009, 01:15:58

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

[CSS] pobierz, plaintext 
  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. }
[CSS] pobierz, plaintext

Napisany przez: hieroshima 16.04.2010, 19:31:32

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

Napisany przez: krzysztof_kf 16.04.2010, 19:39:38

Może tak ?

[CSS] pobierz, plaintext 
  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>
[CSS] pobierz, plaintext

Napisany przez: hieroshima 16.04.2010, 19:45:00

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 ?

Napisany przez: ano 19.04.2010, 21:58:28

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)