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

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
1 Użytkowników czyta ten temat (1 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: 20.08.2025 - 06:28
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn