potrzebuję pomocy fachowca... napisałem skrypt php i chciałem oprawić go sobie graficznie no i myślałem że pujdzie lekko a sił juź niemam! dodam że znam w stopniu średnim html i css ale nie mogę połączyć układu strony w css z <iframe> z html'a żeby to jakoś wyglądało.
chciałbym uzyskać taki efekt:


mój kod html wygląda tak:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>SZGKP</title>
  7. <link href="css/style.css" rel="stylesheet" type="text/css" />
  8. </head>
  9.  
  10. <body>
  11.  
  12. <div id="naglowek">
  13. 		<div id="logo"></div>		
  14. </div>
  15.  
  16. <div id="okno">
  17. 				<div class="lewypanel">
  18. 					<br />
  19. 					<a href="okno_kier.php" target="okno">LISTA PRACOWNIKÓW<br /><br />
  20. 					<a href="dodaj_godz.php" target="okno">DODAJ GODZINY<br /><br />
  21. 					<a href="dodaj_premie.php" target="okno">PREMIE/POTRĄCENIA<br /><br />
  22. 					<a href="edytuj_godz.php" target="okno">EDYTUJ GODZINY<br /><br />
  23. 					<a href="edytuj_log.php" target="okno">EDYTUJ LOGIN I HASŁO<br /><br />
  24. 					<a href="wylogowanie.php">WYLOGUJ<br /><br /> </a>
  25. 				</div>
  26.  
  27.  
  28. 		<div class="prawypanel">
  29. 				<iframe width="100%" height="100%" name="okno" src="okno_kier.php" frameborder="no" noresize scrolling="auto" framespacing=0></iframe>
  30. 		</div>
  31. </div>
  32.  
  33. <div id="stopka"><span class="stopka">Autor: Sławomir Hirsz</span></div>
  34.  
  35. </body>
  36. </html>
[HTML] pobierz, plaintext


i css
[HTML] pobierz, plaintext 
  1. body 
  2. {
  3. 	margin:0;
  4. 	padding:0;
  5. 	background-color:#ffffff;
  6. }
  7.  
  8. #naglowek
  9. {
  10.  
  11. 	width:100%;
  12. 	height:150px;
  13. 	background-color:#545bf3;
  14. 	background-image: linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  15. 	background-image: -o-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  16. 	background-image: -moz-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  17. 	background-image: -webkit-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  18. 	background-image: -ms-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  19.  
  20. 	background-image: -webkit-gradient(
  21. 	linear,
  22. 	left bottom,
  23. 	left top,
  24. 	color-stop(0.04, rgb(87,76,245)),
  25. 	color-stop(0.52, rgb(15,8,207)),
  26. 	color-stop(0.71, rgb(61,92,245))
  27. 	);
  28. }
  29.  
  30. #logo 
  31. {
  32. 	width:500px;
  33. 	height:150px;
  34. 	float:left;
  35. 	background-image: url("../images/logo.gif");
  36.  
  37. }
  38.  
  39. .lewypanel
  40. {
  41. 	width:20%;
  42. 	height:100%;
  43. 	float:left;
  44. 	padding-left: 15px;
  45. 	padding-top: 45px;
  46. 	background-color:#5105ed;
  47. 	background-image: url('../images/menu.GIF');
  48. -webkit-box-shadow: inset 1px 1px 12px 2px ;
  49. -moz-box-shadow: inset 1px 1px 12px 2px ;
  50. box-shadow: inset 1px 1px 12px 2px ; 
  51. -webkit-border-radius: 5px;
  52. -moz-border-radius: 5px;
  53. border-radius: 5px; 
  54. }
  55.  
  56. .prawypanel
  57. {
  58. 	width:78%;
  59. 	height:100%;
  60. 	float:right;
  61. 	color:#ffffff;
  62. 	background-color:#ffffff;
  63. }
  64.  
  65.  
  66. #okno
  67. {	position: fixed;
  68. 	width:100%;
  69. 	height:100%;
  70. 	background-color:#ffffff;
  71. }
  72.  
  73. #stopka
  74. {
  75.  
  76. 	position: absolute;
  77. 	bottom: 0;
  78. 	width:100%;
  79. 	height:40px;
  80. 	background-color:#545bf3;
  81. 	background-image: linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  82. 	background-image: -o-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  83. 	background-image: -moz-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  84. 	background-image: -webkit-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  85. 	background-image: -ms-linear-gradient(bottom, rgb(87,76,245) 4%, rgb(15,8,207) 52%, rgb(61,92,245) 71%);
  86.  
  87. 	background-image: -webkit-gradient(
  88. 	linear,
  89. 	left bottom,
  90. 	left top,
  91. 	color-stop(0.04, rgb(87,76,245)),
  92. 	color-stop(0.52, rgb(15,8,207)),
  93. 	color-stop(0.71, rgb(61,92,245))
  94. 	);
  95. }
  96. ....
  97. #box
  98. {
  99. width: 100%;
  100. height: 100%;
  101. padding-top: 40px;
  102. padding-left: 30px;
  103. margin-bottom: 15px;
  104. }
  105.  
  106. #boxpasek
  107. {
  108.  
  109. 	width: 100%;
  110. 	height: 20px;
  111. 	background-color: #e1e7ff;
  112. 	padding-right: 20px;
  113. 	margin-bottom: 25px;
  114.  
  115. }
  116.  
[HTML] pobierz, plaintext


A problemy polegają na:
1. Wogóle daję ciała z ustawieniem w id="okno" boxów lewypanel, pasek i prawypanek(jest w nim iframe)
2. paska nad iframe już wogóle nawet wyświetlić nie mogęexclamation.gif
3. po uźyciu lewypanel 20% i prawy panel 80% prawy panel nic nie wyświetla (jak dam 78% to działa) ma to związek prawdopodobnie z padding-left w lewypanel ale jakim cudem? rozumiem gdyby to był margin, padding działa wewnątrz boxu!
4. iframe schodzi gróbo poniżej przeglądarki dlatego nawet jak dam scrolling="auto" to gdy tekst przekracza w dół okno przeglądarki to scrolle się nie pojawiają
5.stopkę ustawiłem tylko dzięki opcji position: absolute;
6. chciałbym zeby strona działała przy różnych rozdzielczościach (mniejwięcej podobnych) dla tego dużo boxów i iframe jest ustawiony na 100% i myślę ze nadmiar tego mi pwszystko niszczy!

Nie jestem grafikiem i już głowa mi od tego pęka błagam kogoś o jakąś podpowiedź.... dodam żę dwa kursy css w necie przeleciałem ale teoria mija się z praktyką w moim przypadku albo wyobraźni mam za mało...