Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][PHP]Zastąpienie ramek i stale menu
123tomek
post
Post #1





Grupa: Zarejestrowani
Postów: 23
Pomógł: 0
Dołączył: 19.10.2004

Ostrzeżenie: (10%)
X----


Witam!
Potrzebuje szablonu który nie używa ramek ale pozwoli na to aby zarówno góra strony jak i panele boczne nie uciekały do góry podczas przewijania zawartości strony.
Czyli mniej więcej układ tradycyjny z górnym banerem strony, lewym panelem menu, prawym panelem dodatkowym i w środku zawartość strony ale tak wykonana że przy dużej ilości treści przewijał się tylko środek, natomiast boczne panele i górny baner pozostał na stałe na swoim miejscu.
Najlepiej gdyby to był czysty html, php i css.

Pozdrawiam
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
norbis
post
Post #2





Grupa: Zarejestrowani
Postów: 42
Pomógł: 8
Dołączył: 30.04.2008

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


Może po prostu zasłoń ten kawałek u góry z drugiego przykładu? Coś w ten deseń:

  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" xml:lang="pl">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>STOS</title>
  6. <link rel="stylesheet" href="style2.css" type="text/css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="main">
  11. <div id="top">
  12. <div id="fixer"></div>
  13. <div id="NAGLOWEK">Nagłówek szablonu</div>
  14. <div id="MENU">Menu nawigacyjne</div>
  15. <div id="REKLAMA">Dodatkowe informacje</div>
  16. </div>
  17. <div id="TRESC">Treść strony Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat pretium nibh ac hendrerit. Etiam eleifend ipsum eu velit cursus tincidunt. Aenean metus justo, ullamcorper tempor porta non, consectetur vitae lorem. Aliquam sed est arcu. Fusce vitae sapien facilisis odio varius euismod et ut mi. In vitae nibh at nisi gravida dapibus. Nullam ultricies bibendum dapibus. Proin aliquet nisi id enim iaculis feugiat. Nullam vulputate ligula ac tellus ornare tristique. Maecenas ac turpis nulla. In orci nunc, adipiscing sit amet semper nec, consectetur nec velit. Fusce dictum leo ullamcorper ante ornare iaculis. Curabiuam aliquam velit a tortor dignissim sed dictum nunc ornare. Praesent vehicula, nunc a convallis varius, lorem diam vulputate turpis, vitae placerat nibh diam in urna. Praesent nec justo magna. Sed velit ipsum, scelerisque et posuere tempus, porttitor vitae turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin scelerisque gravida felis, et tincidunt quam rutrum sit amet. Nam malesuada consequat sem, ut molestie urna feugiat vel. Maecenas accumsan tincidunt nisl, non fringilla elit malesuada adipiscing. Nulla ac purus ut ligula imperdiet dignissim nec id massa. Aenean imperdiet fringilla vehicula. Sed commodo libero a lectus imperdiet nec fermentum metus fermentum. Ut eu magna in ante euismod accumsan. Integer quis dolor quis libero condimentum tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut facilisis, neque ac venenatis eleifend, orci velit tristique nibh, sit amet pellentesque lectus velit malesuada urna. Nunc lectus neque, placerat id pretium ut, tincidunt at libero. Donec aliquet dapibus ultricies. Praesent sollicitudin mauris et purus elementum placerat. Duis laoreet tortor nec nunc tincidunt volutpat. Nullam scelerisque neque est. Duis dapibus dui at metus iaculis quis elementum lorem accumsan. Etiam quis eros non nunc vehicula fermentum et id tellus. Nulla iaculis mauris varius felis tempor at tincidunt libero adipiscing. </div>
  18. <div id="STOPKA">Stopka serwisu</div>
  19. </div>
  20.  
  21. </body>
  22. </html>


  1. /* CSS Document */
  2.  
  3. html, body {
  4. background-color: #aff; /* ustalannie koloru tla, koloru fontu, usuwanie marginesow dla glownej strony */
  5. color: #000;
  6. margin: 0;
  7. padding: 0;
  8. }
  9.  
  10. #main {
  11. width: 960px;
  12. margin: 0 auto;
  13. }
  14.  
  15. #fixer {
  16. width: 960px;
  17. height: 25px;
  18. background: #aff;
  19. }
  20.  
  21. #top { /*blok obejmujacy - containing block*/
  22. width: 960px; /*calosc 780px;*/
  23. margin: 0 auto; /*powoduje ze blok glowny strony jest wysrodkowany*/
  24. top: 0px;
  25. position: fixed;
  26. }
  27.  
  28. #NAGLOWEK {
  29. background-color: #888;
  30. height: 20px;
  31. }
  32.  
  33. #MENU {
  34. width: 200px; /*150px;*/
  35. float: left;
  36. overflow: hidden; /*w przypadku gdy zawartosc jest zbyt szeroka nastapi obciecie poprzez ukrycie za duzego elementu*/
  37. background-color: #ccc;
  38. }
  39.  
  40. #REKLAMA {
  41. width: 160px;
  42. float: right;
  43. overflow: hidden;
  44. background-color: #ccc;
  45. }
  46.  
  47. #TRESC {
  48. width: 600px; /* zawartosc, tresc 480px; */
  49. overflow: hidden;
  50. background-color: #fff;
  51. margin: 45px auto 0px 200px;
  52. }
  53.  
  54. #STOPKA {
  55. clear: both; /*powoduje ze stopka nie wskakuje obok menu gdy jest malo tresci*/
  56. width: 100%; /*eliminacja bledu IE6 w pozniejszych zbedne*/
  57. background-color: #888;
  58. }
  59.  
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 4.10.2025 - 17:32