Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [PHP][CSS] DIV
Forum PHP.pl > Forum > Przedszkole
radi.
23.02.2011, 15:10:37
Witajcie. Zacznę od tego, że jestem nowym użytkownikiem. W tematyce PHP dopiero raczkuje więc moje pytanie dla kogoś może wydać się bardzo banalne, a ja sam męczę się drugi dzień nad rozwiązaniem swojego problemu. Otóż zrobiłem layout w photoshopie, pociąłem go odpowiednio i teraz zaczynają się schodki. Chciałbym ogarnąć go za pomocą DIV'ów, jednak moja wiedza nie pozwala jeszcze na swobodne manewrowanie nimi.

www.radk.cba.pl/test.php - tak to właśnie wygląda. Pod FF jest ok oprócz paska po prawej stronie który po zmienieniu rozdzielczości okna po prostu "wchodzi" na pozostałą część.
Jednak gdy odpalę stronę na IE to dzieją się cuda. DIV "Tresc" zjeżdża na sam dół.

Gdy "postawiłem na sucho" w ramkach layout bez żadnego kodu to było wszystko ok oprócz tego paska po prawej stronie. Jednak gdy w treści zrobiłem ramkę lokalną to nie wyświetla mi odpowiednio "Kontener 1 - Stopka - Kontener 2". W czym tkwi problem? Ramka lokalna jest zabroniona? W takim razie w jaki sposób mogę zrobić by po kliknięciu w odpowiedni link strona ładowała się w Div "Treść" ?


Zamieszczam odpowiednio dwa kody:

1 - styl.css

[PHP] pobierz, plaintext 
  1. html, body {
  2. 	background-color: #103242;
  3. 	color: white;
  4. 	margin: 0;
  5. 	padding: 0;
  6. }
  7. #top
  8. {
  9. 	margin-left: 20%;
  10.  
  11. }
  12. #NAGLOWEK {
  13. 	background-image: url(Obrazki/baner.gif);
  14. 	height: 207px;
  15. 	width: 820px;
  16. }
  17.  
  18. #LEWA {
  19. 	width: 100px;
  20. 	height: 1020px;
  21. 	float: left;
  22. 	overflow: hidden;
  23. 	position: relative;
  24. 	margin-left: -100px;
  25. 	margin-top: -207px;
  26. 	background-image: url(Obrazki/lewa.gif);
  27. }
  28.  
  29. #PRAWA {
  30. 	width: 100px;
  31. 	height: 1020px;
  32. 	float: right;
  33. 	overflow: hidden;
  34. 	position: static;
  35. 	margin-right: 90px;
  36. 	margin-top: -207px;
  37. 	background-image: url(Obrazki/prawa.gif);
  38. }
  39.  
  40. #MENU {
  41. 	background-image: url(Obrazki/menu.gif);
  42. 	width: 820px;
  43. 	height: 91px;
  44.  
  45. }
  46.  
  47. #TRESC {
  48.         padding-top: 1cm;
  49.         padding-left: 2cm;
  50. 	background-image: url(Obrazki/tresc.gif);
  51. 	width: 820px;
  52. 	height: 512px;
  53.         color: white;
  54.  
  55. }
  56.  
  57. #KONTENER1{
  58. 	background-image: url(Obrazki/kontener1.gif);
  59. 	width:820px;
  60. 	height:38px;
  61. }
  62. #STOPKA{
  63. 	background-image: url(Obrazki/stopka.gif);
  64. 	width:820px;
  65. 	height:45px;
  66. 	text-align:center;
  67.  
  68.  
  69. }
  70.  
  71. #KONTENER2 {
  72. 	background-image: url(Obrazki/kontener2.gif);
  73. 	width:820px;
  74. 	height:89px;
  75. }
  76.  
  77.  
  78.  
  79.  
[PHP] pobierz, plaintext


2. - główna strona

[PHP] pobierz, plaintext 
  1. <HTML>
  2. <head> 
  3. <link rel="stylesheet" href="styl.css" type="text/css" media="screen" /> 
  4. </head> 
  5. <BODY>
  6.  
  7.  
  8. <div id="top">
  9.  
  10.         <div id="NAGLOWEK"></div>
  11. 	<div id="LEWA"></div>
  12. 	<div id="PRAWA"></div>
  13. 	<div id="MENU"></div>
  14. 	<div id="TRESC"><iframe name="strona" width="650px" height="400px" src="wysw_new.php" frameborder="0" /></div>
  15.         <div id="KONTENER1"></div>
  16.         <div id="STOPKA"></div>
  17.         <div id="KONTENER2"></div>
  18.  
  19.  
  20. </div>
  21.  
  22. </BODY>
  23. </HTML>
[PHP] pobierz, plaintext



Prosiłbym bardzo o pomoc, chciałbym ruszyć dalej z pracami, ale nie mogę poradzić sobie z tym problemem. Mam nadzieję, że napisałem wszystko jasno. Dziękuje z góry za pomoc i wszelakie podpowiedzi.

Pozdrawiam radi.
kokers
23.02.2011, 15:33:37
na początek brakuje kilka meta tagów które rozsypuja kodowanie strony, dobrze jest też dodać DOCTYPE... struktura całego dokumentu powinna wyglądać mniej więcej tak:
[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. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>tytuł strony</title>
  6. </head>
  7.  
  8. <body>
  9. </body>
  10. </html>
[HTML] pobierz, plaintext


oczywiście utf-8 dajesz jeśli kodowanie pliku jest w utf8.
Natomiast widzę, że IE próbuje mi odpalić twoją stronę w trybie zgodności -> standardy IE 8, tryb osobliwości. A tryb osobliwości to nic innego jak IE6...
Dodaj dodatkowo:

[HTML] pobierz, plaintext 
  1. <meta http-equiv="X-UA-Compatible" content="IE=8">
[HTML] pobierz, plaintext

w sekcji head i wtedy wymusisz wyświetlenie w standardach IE 8
radi.
25.02.2011, 17:32:22
Ok, na IE explorerze główny div o ID "Treść" już nie ucieka. Z tym, że dalej mam problem znikającego div'a Kontener,Stopka i Kontener 2 gdy w divie "Treść" umieszczę ramkę lokalną.
cniak
25.02.2011, 20:26:58
Sorry, ale nie chce mi się tego błędu rozpatrywać, lecz w jednej wtopie mogę Ci pomóc:
do stylu treść dodaj wartość:
[HTML] pobierz, plaintext 
  1. background-repeat: no-repeat;
[HTML] pobierz, plaintext
kokers
25.02.2011, 20:53:57
czemu ładujesz tekst poprzez iframe?
Nie lepiej jak już chcesz używać php skorzystać z funkcji np require, albo include?

Tworzysz sobie 2 standardowe pliki jak
top.php, stopka.php (czyli to co na każdej stronie się powtarza) i potem poszczególne pliki dla podstron. Ale musisz zrobić jakiś kurs, przeczytać książkę.

w iframe ładuje ci się strona cała, łącznie z jej stylami. możesz to zobaczyć tutaj: http://www.w3schools.com/tags/tryit.asp?fi...=tryhtml_iframe zmień tam adres z default.asp na np. http://onet.pl a załaduje Ci się w ramkę onet.

poczytaj tutaj: http://www.kurshtml.boo.pl/html/szablon_st...amek,ramki.html albo tutaj http://webmaster.helion.pl/index.php/php-szablony-stron-www
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.