FAQ
CSS i XHTML - Najczęściej zadawane pytania
CSS i XHTML - Najczęściej zadawane pytania
1. Dziwne odstępy pomiędzy formularzem, a pozostałą częścią strony.
Problem: Gdy wklejam kod formularza:
Pojawiają się dziwne odstępy między formularzem, a pozostałą częścią strony.
Rozwiązanie: Dodaj do arkusza CSS następujące linijki:
form { margin: 0; padding: 0; }
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:
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>):
<!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:
- w arkuszu CSS:
#foo { margin: 0 auto; }
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ę:
<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:
(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ć:
/*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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css"> body { font-size: 11px; color: #000; font-family: verdana } h1 { font-weight: normal; font-size: 16px; padding-bottom: 10px; margin: 0px; padding-top: 0px } #page { margin: 0px auto; width: 750px } #menu { float: left; width: 220px; padding-top: 0px } #content { float: right; width: 530px; text-align: justify } #data { font-size: 9px; color: silver; text-align: right } #menu ul { padding-right: 0px; padding-left: 0px; padding-bottom: 0px; margin: 0px; width: 200px; padding-top: 0px; list-style-type: none } #menu li { display: block; font-weight: bold; margin: 0px; width: 200px; color: silver; border-bottom: #606060 1px solid } #menu li a { 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 } #menu li a:hover { color: #000; text-decoration: none } </style> </head> <body> <div id="page"> <div id="menu"> <ul> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> </ul> </div> <div id="content"> <p> Tabele w HTML powstały, aby spełniać jedno określone zadanie: pokazywać dane tabelaryczne. Niestety, twórcy stron odkryli, że dzięki border="0" mogą wykorzystać tabele jako siatkę, według której układają elementy strony. Wciąż jest to najpopularniejszy sposób budowania stron internetowych, przeszkadzający w uczynieniu Sieci lepszą — bardziej dostępną, elastyczną i użyteczną. Zobacz, skąd się bierze problem i poznaj metody przestawienia się częściowo lub całkowicie na układ pozbawiony (niewłaściwie użytych) tabel. </p> <hr /> </div> </div> </body> </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/