Plik CSS
[HTML] pobierz, plaintext 
  1. #newsglowny {
  2. 	padding: 5px 20px 5px 20px;
  3. 	position:relative;
  4. 	width:500px;
  5. 	height:300px;
  6. 	background:#ff0000;
  7. }
  8. #newsglowny em b {
  9. 	position:absolute;
  10. 	font-size:150px;
  11. 	font-family:arial;
  12. 	color:#ff0000;
  13. 	line-height:40px;
  14. 	font-weight:normal;
  15. }
  16. #newsglowny p {
  17. 	position:relative;
  18. 	z-index:100;
  19. 	padding:5px 10px;
  20. }
  21. #ctl, #cbl, #ctr, #cbr {
  22. 	position:absolute;
  23. 	width:20px;
  24. 	height:20px;
  25. 	color:#9caf9c;
  26. 	background:#fff;
  27. 	overflow:hidden;
  28. 	font-style:normal;
  29. 	z-index:1;
  30. }
  31. #ctl {
  32. 	top:0;
  33. 	left:0;
  34. }
  35. #cbl {
  36. 	bottom:0;
  37. 	left:0;
  38. }
  39. #ctr {
  40. 	top:0;
  41. 	right:0;
  42. }
  43. #cbr {
  44. 	bottom:0;
  45. 	right:0;
  46. }
  47. #ctl b {
  48. 	left:-8px;
  49. }
  50. #ctr b {
  51. 	left:-25px;
  52. }
  53. #cbl b {
  54. 	left:-8px;
  55. 	top:-17px;
  56. }
  57. #cbr b {
  58. 	left:-25px;
  59. 	top:-17px;
  60. }
[HTML] pobierz, plaintext

Dwa pliki
rogi.html:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>Rogi</title>
  4. <link rel="stylesheet" type="text/css" href="rogi.css" />
  5. </head>
  6. <body>
  7. <h2>Curved Corners</h2>
  8. <div id="newsglowny">
  9. <em id="ctl"><b>•</b></em>
  10. <em id="cbl"><b>•</b></em>
  11. <em id="ctr"><b>•</b></em>
  12. <em id="cbr"><b>•</b></em>
  13. <img src="news.jpg" /></div>
  14. </body>
  15. </html>
[HTML] pobierz, plaintext

index.php [Kod po wygenerowaniu: fragment]
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>Strona główna</title>
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. <link rel="stylesheet" type="text/css" href="rogi.css" />
  8. <link rel="stylesheet" type="text/css" href="menubar.css" title=""/>
  9. <script type="text/javascript" language="JavaScript" src="menubar.js"></script>
  10. </head>
  11. <body>
  12. <div id="naglowek">Ble</div>
  13. <div id="menu">
  14. Tu jest menu
  15. </div>
  16. <div id="tresc">
  17. <div id="newsglowny">
  18. <em id="ctl"><b>•</b></em>
  19. <em id="cbl"><b>•</b></em>
  20. <em id="ctr"><b>•</b></em>
  21. <em id="cbr"><b>•</b></em>
  22. <img src="news.jpg" />
  23. </div>
  24. <br /><div id='pozostalenewsy'>
  25. <h4>Pozostałe newsy</h4>Dzisiaj jest 2008-01-21<br /></div>
  26. </div>
  27. <div id="stopka">
  28. Panel administracyjny serwisu heniek.ovh.org<br />
  29. Wszystkie dane zastrzeżone, kopiowanie bez zgody autora (tj. właściciela) surowo zabronione.<br />
  30. Copyright &copy by Heniek --> 2008 - 2008-01-21
  31. </div>
  32. </body>
  33. </html>
[HTML] pobierz, plaintext

W pierwszym pliki rogi działają bez zarzutu, zaś w drugim coś jest nie tak.

Kod pliku style.css
[HTML] pobierz, plaintext 
  1. body {
  2. 	background: #fff center top repeat-y;
  3. 	margin: 0px;
  4. 	font-family: Tahoma, Verdana, Trebuchet Ms;
  5. 	font-size: 12px;
  6. 	color: #000;
  7. }
  8.  
  9. #naglowek {
  10. 	background: #dddddd;
  11. 	height: 180px;
  12. }
  13.  
  14.  
  15. #tresc {
  16. 	background: #fff;
  17. 	padding: 20px 10px 20px 10px;
  18. }
  19.  
  20. #stopka {
  21. 	background: #ff0000;
  22. 	text-decoration: none;
  23. 	text-align: center;
  24. 	padding: 20px 10px 20px 10px;
  25. }
  26.  
  27. #menu {
  28. 	height: 25px;
  29. }
  30.  
  31. #pozostalenewsy {
  32. 	padding: 5px 5px 5px 5px;
  33. 	width: 500px;
  34. 	background: #ff0000;
  35. }
  36.  
  37. h4 {
  38. 	text-decoration: underline;
  39. 	text-align: center;
  40. 	font-size: 18px;
  41. }
[HTML] pobierz, plaintext