Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: przyklejone naglowek i stopka
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
jarqlo
19.04.2007, 11:47:24
Witam
Zabralem sie ostatnio za robienie malej stronki, w temacie projektowania tego typu rzeczy jestem mocno poczatkujacy :-)
Problem mam nastepujacy:
Chcialbym zrobic strone na ktorej stopka oraz naglowek o ustalonej wielkosci beda caly czas na swoich miejscach, a przy zmniejszaniu wysokosci okna przegladarki kurczyc sie bedzie tylko czesc glowna przeznaczona na tekst, podobnie jak ma to miejsce na stronie aktualizacji automatycznych microsoftu. Dla tych co nie korzystaja z tego 'wspanialego' systemu.
Probowalem wykorzystac informacje z tad, ale wyszlo to nie do konca tak jak chcialem - tekst glownej czesci zawiera sie na calej rozpietosci strony, zamiast miedzy naglowkiem a stopka, tak ze w efekcie chowa sie pod nimi. Kolorki sa tymczasowe zeby wyrazniej bylo widac jak to dziala.
HTML
[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.  
  3. <script runat="server">
  4.  
  5. </script>
  6.  
  7. <html xmlns="http://www.w3.org/1999/xhtml" >
  8. <head id="Head1" runat="server">
  9.     <title>Untitled Page</title>
  10.     <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
  11. </head>
  12. <body>
  13.     <form id="form1" runat="server">
  14.     <div id="calosc">
  15.         <div id="naglowek">
  16.             <div id="naglowek_lewo"> 
  17.             lewo
  18.             </div>
  19.             <div id="naglowek_prawo"> 
  20.             prawo
  21.             </div>            
  22.             to jest super dzialajacy naglowek
  23.         </div>      
  24.         <div id="srodek">
  25.             Lorem ipsum dolor sit amet
  26.         </div>
  27.         <div id="stopka">
  28.             a to zajefajna stopka
  29.         </div>
  30.     </div>
  31.  
  32.     </form>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext


style
[HTML] pobierz, plaintext 
  1. div#srodek
  2. {
  3.     top: 50px;
  4. }
  5.  
  6. div#naglowek
  7. {
  8.     text-align: center;
  9.     position: absolute;
  10.     top: 0;
  11.     left: 0;
  12.     width: 100%;
  13.     height: 50px;
  14.     background-color: Red;   
  15. }
  16.  
  17. div#naglowek_lewo
  18. {
  19.     float: left;
  20.     height: 50px;
  21.     width: 30px;
  22.     background-color: Blue;
  23. }
  24.  
  25. div#naglowek_prawo
  26. {
  27.     float: right;
  28.     height: 50px;
  29.     width: 30px;
  30.     background-color: Blue;
  31. }
  32.  
  33. div#stopka {
  34.     text-align: center;
  35.     position: absolute;
  36.     bottom: 0;
  37.     left: 0;
  38.     width: 100%;
  39.     height: 50px;
  40.     background-color: Green;
  41. }
  42.  
  43. html > body div#naglowek {
  44.     position: fixed;
  45. }
  46.  
  47. html > body div#stopka {
  48.     position: fixed;
  49. }
[HTML] pobierz, plaintext


Calosc ma pracowac przede wszystkim pod IE6 i IE7.
Bede wdzieczny za pomoc.
joshrob
20.04.2007, 01:10:25
Cytat(jarqlo @ 19.04.2007, 12:47:24 ) *
[HTML] pobierz, plaintext 
  1. html > body div#naglowek {
  2.     position: fixed;
  3. }
  4.  
  5. html > body div#stopka {
  6.     position: fixed;
  7. }
[HTML] pobierz, plaintext


witam,

w IE6 nie ma czegos takiego jak position: fixed, trzeba stosowac stricte IE'owskie rozwiazania.

ponizszy kod dziala w ff 2.0.0.3, op 9.20 i ie6, ie7 nie mam pod reka w tej chwili.

pozdrawiam,

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>position fixed a'la microsoft update</title>
  5. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css">
  7. html,body {
  8. height: 100%;
  9. margin: 0px;
  10. padding: 0px;
  11. }
  12. #naglowek {
  13. top: 0;
  14. position: fixed;
  15. left: 50%;
  16. margin-left: -380px;
  17. width: 760px;
  18. height: 125px;
  19. background: green;
  20. }
  21. #tresc{
  22. margin: 0 auto;
  23. width: 760px;
  24. background: #CCC;
  25. min-height: 100%;
  26. }
  27. #tekst{
  28. width: 760px;
  29. padding: 125px 0 30px 0;
  30. }
  31. #stopka {
  32. height: 30px;
  33. width: 760px;
  34. background: red;
  35. bottom: 0;
  36. position: fixed;
  37. left: 50%;
  38. margin-left: -380px;
  39. }
  40. </style>
  41. <!--[if lte IE 6]><style type="text/css">
  42. #tresc{
  43. position: relative;
  44. }
  45. #naglowek{
  46. position: absolute; 
  47. left: 0; top: 0; margin: 0;
  48. left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  49. top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  50. }
  51. #stopka{
  52. margin: 0;
  53. position: absolute;
  54. left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  55. top: expression( ( 0 - stopka.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
  56. }
  57. #tresc {
  58. height: 100%;
  59. }
  60. </style>
  61. <![endif]-->
  62. </head>
  63. <body>
  64. <div id="tresc">
  65. <div id="naglowek"></div>
  66. 	<div id="tekst">
  67. 	   <p> poczatek </p>
  68. 	   <p> 
  69. 	   srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek
  70. 	   srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek
  71. 	   srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek
  72. 	   srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek srodek
  73. 	   </p>
  74. 	   <p> koniec </p>	</div>
  75. <div id="stopka"></div>
  76. </div>
  77. </body>
  78. </html>
[HTML] pobierz, plaintext
jarqlo
20.04.2007, 09:19:47
dzieki, dokladnie o to mi chodzilo
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.