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
123tomek
post
Post #2





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

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

Niestety wciąż nie mogę uzyskać tego o co mi chodzi.

Może łatwiej będzie na żywym przykładzie. Mam taki układ strony http://89.25.186.53/stos/index2.html (zresztą zrobiony wg tego kursu http://www.kurshtml.boo.pl/css/staly_szablon,szablon.html układ trzykolumnowy)
Potrzebuje aby nagłówek szablonu, menu nawigacyjne, dodatkowe informacje i stopka zostały umieszczone na stronie na stałe tak by podczas przewijania zawartości strony przesuwała się tylko sama treść strony. Całość umieszczona jest w kontenerze nadzrędnym o nazwie "top". Strona musi być wyśrodkowana niezależnie od rozdzielczości oraz od wielkości okna (wielkość strony dopasowywana jest do rozdzielczości 1024x768 i większych)

Jak zaczynam się bawić w position: fixed oraz absolute to wychodzą mi same problemy co widać tu http://89.25.186.53/stos/index3.html. Po pierwsze problem z pozycjonowaniem bloku "dodatkowe informacje" w stosunku do konteneru "top" - za chiny nie potrafię uzyskać efektu aby prawy blok był w odległości 800px od początku kontenera top tylko wciąż pozycjonuje mi względem całej strony i w momencie kiedy zmienia się rozdzielczość bądź zmniejszam same okno przeglądarki to ten element mi się źle ustawia (800px względem lewej krawędzi przeglądarki a nie kontenera top.
Pewnie wynika to z prostej przyczyny - position:fixed/absolute wyklucza używanie float: right/left.
Po drugie stopka (która powinna być doklejona do dolnej części menu) i blok z treścią ale póki nie poradzę sobie z prawym blokiem "dodatkowe informacje" to nie mam co kombinować z resztą.

Wrzucam kod który robię od nowa i jest dużo czytelniejszy niż tamten poprzedni:

CSS:
[HTML] pobierz, plaintext 
  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. #top { /*blok obejmujacy - containing block*/
  11. 	width: 960px; /*calosc 780px;*/
  12. 	margin: 0 auto; /*powoduje ze blok glowny strony jest wysrodkowany*/
  13. 	margin-top: 25px; /*25px odsetpu od gory wyglada lepiej niz 0 :) */
  14. }
  15.  
  16. #NAGLOWEK {
  17. 	background-color: #888;
  18. }
  19.  
  20. #MENU {
  21. 	width: 200px; /*150px;*/
  22. 	float: left;
  23. 	overflow: hidden; /*w przypadku gdy zawartosc jest zbyt szeroka nastapi obciecie poprzez ukrycie za duzego elementu*/
  24. 	background-color: #ccc;
  25. }
  26.  
  27. #REKLAMA {
  28. 	width: 160px;
  29. 	float: right;
  30. 	overflow: hidden;
  31. 	background-color: #ccc;
  32. }
  33.  
  34. #TRESC {
  35. 	width: 600px; /* zawartosc, tresc 480px; */
  36. 	float: left;
  37. 	overflow: hidden;
  38. 	background-color: #fff;
  39. }
  40.  
  41. #STOPKA {
  42. 	clear: both; /*powoduje ze stopka nie wskakuje obok menu gdy jest malo tresci*/
  43. 	width: 100%; /*eliminacja bledu IE6 w pozniejszych zbedne*/
  44. 	background-color: #888;
  45. }
[HTML] pobierz, plaintext


HTML:
[HTML] pobierz, plaintext 
  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.  
  11.     <div id="top">
  12. 	     <div id="NAGLOWEK">Nagłówek szablonu</div>
  13. 	     <div id="MENU">Menu nawigacyjne</div>
  14. 	     <div id="REKLAMA">Dodatkowe informacje</div>
  15. 	     <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.
  16.        </div>
  17. 	     <div id="STOPKA">Stopka serwisu</div>
  18.     </div>
  19.  
  20.   </body>
  21. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post

Posty w temacie
- 123tomek   [CSS][PHP]Zastąpienie ramek i stale menu   8.11.2010, 23:04:52
- - pedro84   Gotowiec? Nie to forum.   8.11.2010, 23:07:29
- - 123tomek   Może źle się wyraziłem. Bardziej niż gotowe rozwią...   8.11.2010, 23:18:28
- - cniak   Po 1) PHP nie służy do modyfikacji wygladu strony ...   9.11.2010, 10:09:20
- - 123tomek   Kod css: [HTML] pobierz, plaintext body { /*glown...   9.11.2010, 13:59:42
- - cniak   doctype, head?   9.11.2010, 15:09:10
- - 123tomek   [HTML] pobierz, plaintext <!DOCTYPE html PUBLIC...   9.11.2010, 15:12:19
- - cniak   Na przyklad: #content { position:absolute; ...   9.11.2010, 16:00:05
- - 123tomek   Niestety wciąż nie mogę uzyskać tego o co mi chodz...   10.11.2010, 01:36:59
- - norbis   Może po prostu zasłoń ten kawałek u góry z drugieg...   10.11.2010, 02:02:43
- - cniak   Norbis, podawanie gotowców to nie jest dobry przyk...   10.11.2010, 19:40:54
- - 123tomek   Dzięki za pomoc. Jeszcze jednej rzeczy do końca ni...   13.11.2010, 00:42:22

« Następny starszy · Przedszkole · 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: 6.10.2025 - 01:26
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn