Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Moj layout z moimi bledami
Forum PHP.pl > Forum > Po stronie przeglądarki
marmal
26.05.2005, 18:57:09
Prosze o sprawdzenie i wskazanie bledow w ponizszym layoutcie!! Uwagi krytyczne mile widziane!!

[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  3.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. 	<head>
  6. 		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  7. 		<title>Moj layout</title>
  8. 		<style type="text/css">
  9. 			<!--
  10. body {
  11.        margin: 0;
  12.        padding: 0;
  13.        background: #FFF;
  14.        text-align: center;
  15. }
  16. div#Page {
  17.        width: 90%;
  18.        margin: 10px auto;
  19.        border-right: 1px solid #3399FF;
  20.        border-top: 1px solid #3399FF;
  21.        border-left: 1px solid #3399FF;
  22.        position: relative;
  23.        top:10px;
  24.        height:1015px;
  25. }
  26. * html * div#Page {
  27.        width: 91%;
  28.        w\idth: 90%;
  29. }
  30. div#Top {
  31.        height: 106px;
  32.        background-color: #B0D8FF;
  33.        margin: auto;
  34.        border-bottom: 1px solid #3399FF;
  35. }
  36. div#Left {
  37.         width: 22%;
  38.         background: #B0D8FF;
  39.         float: left;
  40.         border-top: 1px solid #919191;
  41.         position:absolute;
  42.         left:0px;
  43. }
  44. div#Content {
  45.        width: 77.85%;
  46.        float: left;
  47.        height: 820px;
  48.        background:gray;        
  49.        border-top: 1px solid #919191;
  50.        border-left: 1px solid #919191;
  51.        border-bottom: 1px solid #919191;
  52.        position:absolute;
  53.        right:1px;
  54.        z-index:99;
  55.         }
  56.  
  57. div#Bottom {
  58.         position:absolute;
  59.         height: 50px;
  60.         background: #B0D8FF;
  61.         bottom:0px;
  62.         left:0px;
  63.         right:0px;
  64.         width:100%;
  65.         border-bottom: 1px solid #3399FF;
  66. }
  67. div#box1 {
  68. 	background: black;
  69. 	height:16px;
  70. 	text-align:right;
  71. 	vertical-align:middle;
  72. }
  73.  
  74. div#box2 {
  75. 	background: black;
  76. 	height:16px;
  77. 	text-align:middle;
  78. 	vertical-align:middle;
  79. 	position:absolute;
  80. 	left:0px;
  81. 	right:0px;
  82. 	bottom:51px;
  83. 	width:100%;
  84. }
  85. 			-->
  86. 		</style>
  87. 	</head>
  88. 	<body>
  89. <div id="Page">
  90. 	<div id="Top">GORA</div>
  91.  
  92. 	<div id="box1"><span style="color:white;">pasek</span></div>
  93.  
  94. 	<div id="Left">
  95. 		LEWA STRONA 
  96.   </div>
  97.   <div id="Content">GLOWNA</div>
  98.   <div id="box2"><span style="color:white;">pasek</span></div>
  99.   <div id="Bottom">STOPKA</div>
  100. </div>
  101. 	</body>
  102. </html>
[HTML] pobierz, plaintext



marmal
Wave
26.05.2005, 19:08:14 
[HTML] pobierz, plaintext 
  1. ....
  2. div#box1 {
  3. background: black;
  4. height:16px;
  5. text-align:right;
  6. vertical-align:middle;
  7.  
  8. color:white;
  9. }
  10.  
  11. div#box2 {
  12. background: black;
  13. height:16px;
  14. text-align:middle;
  15. vertical-align:middle;
  16. position:absolute;
  17. left:0px;
  18. right:0px;
  19. bottom:51px;
  20. width:100%;
  21.  
  22. color:white;
  23. }
  24. -->
  25. </style>
  26. ...
  27. <div id="box1">pasek</div>
  28. ...
  29. <div id="box2">pasek</div>
  30. ...
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. o-8859-2" />
[HTML] pobierz, plaintext
marmal
27.05.2005, 01:40:20
No dobra, to sa tak naprawde drobiazgi - kolor w divie i brak "/" przy meta.

Przede wszystkim chcialem sie od Was dowiedziec czy sposob zagniezdzania divow jest dobry i w ogole caly pomysl??

No i rzecz, ktorej nie umiem poprawic - dlugosc div#Content.
W postaci jaka przedstawilem jest dopasowana do IE czyli idealnie dochodzi do div#box2.
Natomiast juz w FF między div#Content a div#box powstaje przerwa. Jak temu zaradzic w jakis mądry sposob??


marmal
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.