Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML] W jaki sposób zrobic?
Forum PHP.pl > Forum > Przedszkole
Jurek012
22.02.2008, 16:02:36
Cześć chłopaki

Nie wiedziałem jak nazwać odpowiednio temat więc zostawiłem w taki sposób - bardzo nieoczywisty. Ale do problemu. Chodzi mi o "efekt" na tej stronie: http://www.neweradesignstudio.com/ mianowicie o tak jak by dolny margines koloru jasnoszarego, który zaczyna się od nagłówka "Testimonials". Wydaje mi się, że jest to "Stały" element strony i wraz z dodawaniem tekstu on pozostaje w miejscu na samym dole zaś środek jedynie się wydłuża. Czy jest coś takiego możliwe? aha no i Czy da rade zrobić takie coś również u góry?
redelek
22.02.2008, 16:38:02
Cytat(Jurek012 @ 22.02.2008, 16:02:36 ) *
Cześć chłopaki

Nie wiedziałem jak nazwać odpowiednio temat więc zostawiłem w taki sposób - bardzo nieoczywisty. Ale do problemu. Chodzi mi o "efekt" na tej stronie: http://www.neweradesignstudio.com/ mianowicie o tak jak by dolny margines koloru jasnoszarego, który zaczyna się od nagłówka "Testimonials". Wydaje mi się, że jest to "Stały" element strony i wraz z dodawaniem tekstu on pozostaje w miejscu na samym dole zaś środek jedynie się wydłuża. Czy jest coś takiego możliwe? aha no i Czy da rade zrobić takie coś również u góry?


STYLE jest to wszystko na stylach oparte i div smile.gif
Tu masz przykład powinno pomóc
http://www.kurshtml.boo.pl/css/staly_szablon,szablon.html
Albo ściągnij sobie ich stronkę i zobacz jak ona wygląda.

Pozdrawiam
Redelek
Jurek012
22.02.2008, 17:41:52
Ehh nie działa sad.gif sad.gif sad.gif

index.html
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title></title>
  5. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  6.  
  7. <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
  8. </head>
  9. <body>
  10. </body>
  11. </html>
[HTML] pobierz, plaintext


style.css
[HTML] pobierz, plaintext 
  1. html, body {
  2.     background-color: #fff;
  3.     color: #000;
  4.     margin: 0;
  5.     padding: 0;
  6. }
  7.  
  8. #top {
  9.     width: 780px;
  10. }
  11.  
  12. #NAGLOWEK {
  13.     background-color: #888;
  14. }
  15.  
  16. #MENU {
  17.     width: 150px;
  18.     float: right;
  19.     overflow: hidden;
  20.     background-color:url("background.png")
  21. }
  22.  
  23. #TRESC {
  24.     width: 630px;
  25.     float: left;
  26.     overflow: hidden;
  27.     background:url("background.png")
  28. }
  29.  
  30. #STOPKA {
  31.     clear: both;
  32.     width: 100%;
  33.     background:url("dol.png")
  34. }
[HTML] pobierz, plaintext


Robie wszystko tak jak jest to opisane w linku co podałeś i strona wyświetla się pusta sad.gif ehh jak ten HTML potrafi zdenerwować. Apropo ich strony - jest tak pogmatwana, że bardziej mi zaszkodzi, aniżeli pomoże.
l0ud
22.02.2008, 18:15:06
Jurek012, przecież nie dodałeś tych warstw do sekcji body dokumentu. To nawet nie ma prawa działać, sam styl przecież nie wystarczy...
redelek
22.02.2008, 18:31:39
o tak to powinno wyglądać

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2.      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  7. <title>Kurs HTML - Przykłady CSS: Stały szablon (fixed layout)</title>
  8. <style type="text/css">
  9. /* <![CDATA[ */
  10. html, body {
  11. 	background-color: #fff;
  12. 	color: #000;
  13. 	margin: 0;
  14. 	padding: 0;
  15. }
  16.  
  17. #top {
  18. 	width: 780px;
  19. }
  20.  
  21. #NAGLOWEK {
  22. 	background-color: #888;
  23. }
  24.  
  25. #MENU {
  26. 	width: 150px;
  27. 	float: left;
  28. 	overflow: hidden;
  29. 	background-color: #ccc;
  30. }
  31.  
  32. #TRESC {
  33. 	width: 630px;
  34. 	float: left;
  35. 	overflow: hidden;
  36. 	background-color: #fff;
  37. }
  38.  
  39. #STOPKA {
  40. 	clear: both;
  41. 	width: 100%;
  42. 	background-color: #888;
  43. }
  44.  
  45. pre {
  46. 	overflow: auto;
  47. }
  48. /* ]]> */
  49. </style>
  50. </head>
  51. <body>
  52.  
  53. <div id="top">
  54.  
  55. <div id="NAGLOWEK">Nagłówek szablonu</div>
  56.  
  57. <div id="MENU">
  58.  
  59. <ul>
  60. <li><a href="?">Link 1</a></li>
  61. <li><a href="?">Link 2</a></li>
  62. <li><a href="?">Link 3</a></li>
  63. <li><a href="?">Link 4</a></li>
  64. <li><a href="?">Link 5</a></li>
  65. </ul>
  66. </div>
  67.  
  68. <div id="TRESC">
  69. <h1>Stały szablon (fixed layout)</h1>
  70.  
  71. <p>To jest <strong>stały szablon</strong> (<em>fixed layout</em>). Zwróć uwagę, że zmieniając rozmiary okna przeglądarki, szerokość szablonu pozostaje stała. W rozdzielczości wyższej niż 800x600, po prawej stronie szablonu pozostaje wolna przestrzeń. Jeżeli zmniejszysz szerokość okna do rozmiaru niższego niż 800 pikseli, zobaczysz poziomy pasek przewijania.</p>
  72. <h2>XHTML</h2>
  73. <pre>&lt;div id="top"&gt;
  74. 	&lt;div id="NAGLOWEK"&gt;Nagłówek szablonu&lt;/div&gt;
  75. 	&lt;div id="MENU"&gt;Menu nawigacyjne&lt;/div&gt;
  76.  
  77. 	&lt;div id="TRESC"&gt;Treść strony&lt;/div&gt;
  78. 	&lt;div id="STOPKA"&gt;Stopka serwisu&lt;/div&gt;
  79. &lt;/div&gt;</pre>
  80. <h2>CSS</h2>
  81. <pre>html, body {
  82. 	background-color: #fff;
  83. 	color: #000;
  84. 	margin: 0;
  85. 	padding: 0;
  86. }
  87.  
  88. #top {
  89. 	width: 780px;
  90. }
  91.  
  92. #NAGLOWEK {
  93. 	background-color: #888;
  94. }
  95.  
  96. #MENU {
  97. 	width: 150px;
  98. 	float: left;
  99. 	overflow: hidden;
  100. 	background-color: #ccc;
  101. }
  102.  
  103. #TRESC {
  104. 	width: 630px;
  105. 	float: left;
  106. 	overflow: hidden;
  107. 	background-color: #fff;
  108. }
  109.  
  110. #STOPKA {
  111. 	clear: both;
  112. 	width: 100%;
  113. 	background-color: #888;
  114. }</pre>
  115. </div>
  116.  
  117. <div id="STOPKA">&copy; <a href="http://www.kurshtml.boo.pl">www.kurshtml.boo.pl</a></div>
  118.  
  119. </div>
  120.  
  121. </body>
  122. </html>
[HTML] pobierz, plaintext


I wszystko śmiga, tak jak kolega wspomniał w samy HTML muszą być wpisy
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html 
  2.      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  7. </head>
  8. <body>
  9.  
  10. <div id="top">
  11.  
  12. <div id="NAGLOWEK">Nagłówek szablonu</div>
  13.  
  14. <div id="MENU">
  15.  
  16. <ul>
  17. <li><a href="?">Link 1</a></li>
  18. <li><a href="?">Link 2</a></li>
  19. <li><a href="?">Link 3</a></li>
  20. <li><a href="?">Link 4</a></li>
  21. <li><a href="?">Link 5</a></li>
  22. </ul>
  23. </div>
  24.  
  25. <div id="TRESC">
  26. <h1>Stały szablon (fixed layout)</h1>
  27.  
  28. <p>To jest <strong>stały szablon</strong> (<em>fixed layout</em>). Zwróć uwagę, że zmieniając rozmiary okna przeglądarki, szerokość szablonu pozostaje stała. W rozdzielczości wyższej niż 800x600, po prawej stronie szablonu pozostaje wolna przestrzeń. Jeżeli zmniejszysz szerokość okna do rozmiaru niższego niż 800 pikseli, zobaczysz poziomy pasek przewijania.</p>
  29. <h2>XHTML</h2>
  30. <pre>&lt;div id="top"&gt;
  31. 	&lt;div id="NAGLOWEK"&gt;Nagłówek szablonu&lt;/div&gt;
  32. 	&lt;div id="MENU"&gt;Menu nawigacyjne&lt;/div&gt;
  33.  
  34. 	&lt;div id="TRESC"&gt;Treść strony&lt;/div&gt;
  35. 	&lt;div id="STOPKA"&gt;Stopka serwisu&lt;/div&gt;
  36. &lt;/div&gt;</pre>
  37. <h2>CSS</h2>
  38. <pre>html, body {
  39. 	background-color: #fff;
  40. 	color: #000;
  41. 	margin: 0;
  42. 	padding: 0;
  43. }
  44.  
  45. #top {
  46. 	width: 780px;
  47. }
  48.  
  49. #NAGLOWEK {
  50. 	background-color: #888;
  51. }
  52.  
  53. #MENU {
  54. 	width: 150px;
  55. 	float: left;
  56. 	overflow: hidden;
  57. 	background-color: #ccc;
  58. }
  59.  
  60. #TRESC {
  61. 	width: 630px;
  62. 	float: left;
  63. 	overflow: hidden;
  64. 	background-color: #fff;
  65. }
  66.  
  67. #STOPKA {
  68. 	clear: both;
  69. 	width: 100%;
  70. 	background-color: #888;
  71. }</pre>
  72. </div>
  73.  
  74. <div id="STOPKA">&copy; <a href="http://www.kurshtml.boo.pl">www.kurshtml.boo.pl</a></div>
  75.  
  76. </div>
  77.  
  78. </body>
  79. </html>
[HTML] pobierz, plaintext


Teraz CTRL +a potem u siebie CTRL+v i po sprawie. Na tej stronie co Ci podałem są linki które nazywają się PRZYKŁAD jak go klikniesz przeniesie Cię na gotową stronkę. Klikasz prawym klawiszem myszki i wybierasz pokaż źródło i znowu CTRL +a i u siebie CTRL+v i masz stronkę.

Pozdro
Redelek
Jurek012
25.02.2008, 18:36:39
A jak to wszystko wyśrodkować?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.