Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> przyklejone naglowek i stopka
jarqlo
post
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 19.04.2007

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
joshrob
post
Post #2





Grupa: Zarejestrowani
Postów: 19
Pomógł: 0
Dołączył: 18.10.2006

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post

Posty w temacie
- jarqlo   przyklejone naglowek i stopka   19.04.2007, 11:47:24
- - joshrob   Cytat(jarqlo @ 19.04.2007, 12:47:24 )...   20.04.2007, 01:10:25
- - jarqlo   dzieki, dokladnie o to mi chodzilo   20.04.2007, 09:19:47

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 24.12.2025 - 22:12
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn