Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: pozycjonowanie blokow
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Andrzej1234
22.08.2012, 18:24:08
Witam.

Do tej pory zajmowalem sie glownie server-side aplikacji ktore rozwijalismy, zdarzylo sie jednak ze tym razem zmuszony jestem pogrzebac nieco przy stronie klienckiej.

Layout ktory sobie upatrzylismy z grubsza ma nastepujaca strukture:


Problemy pojawiaja sie dwa.
Pierwszy to chyba znany problem tej samej wysokosci blokow ( 4,5,6 lub 2,3,[4-7] ). Niestety nie udalo mi sie go rozwiazac w mojej konstrukcji.
Idea polega na tym, ze elementy 2 oraz 3 maja ustalona szerokosc (czy to %, czy tez px), natomiast elementy 4-7 zajmuja pozostala przestrzen. Tutaj pojawia sie drugi problem.
Moze sie zdarzyc ze element 4 zniknie, wtedy [4-7] przejmuje jego powierzchnie. Dlatego tez ustalenie na sztywno szerokosci wewnetrznych elementow na nic sie zdaje. Jesli jednak tego nie zrobie, maja one minimalna szerokosc.

Czy ktos ma jakies pomysly?

Dzieki i pozdrawiam.

Tutaj kod ktory do tej pory nabazgralem:


[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4. 		<style type="text/css">
  5. 			body {
  6. 				margin:0;
  7. 				padding:0;
  8. 				height:100%; 
  9. 			}
  10. 			#container {
  11. 				width:950px;
  12. 				margin: 0 auto;
  13. 				height:100%; 
  14. 			}
  15. 			#header {background-color:#F00; width:100%; height:50px;}
  16. 			#top-menu {background-color:#0F0; width:100%; height:100px;}
  17. 			#banner {background-color:#00F; width:100%; height:50px;}
  18. 			#main-section { width:100%; float:left; overflow:overlay;}
  19. 				#left-menu {background-color:#FF0; width:20%; float:left; }
  20. 				#main-inner-section {  float:left; width:auto; }
  21. 					#main-inner-top-section {width:100%; float:left;}
  22. 						#left-panel {background-color:#F0F; width:30%; float:left; }
  23. 						#center-panel {background-color:#0FF;width:40%; float:left;}
  24. 						#right-panel {background-color:#800;width:30%; float:left;}
  25. 					#content {background-color:#080; clear:both;}
  26. 				#right-menu {background-color:#008; width:20%; float:right;}
  27. 			#bottom-menu {background-color:#880; width:100%; height:50px; clear:both;}
  28. 			#footer {background-color:#808; width:100%; height:50px;}
  29. 		</style>
  30. 	</head>
  31. 	<body>
  32.  
  33. 	<div id="container">
  34. 		<div id="header">header</div>
  35. 		<div id="top-menu">top-menu</div>
  36. 		<div id="banner">banner</div>
  37.  
  38. 		<div id="main-section">
  39.  
  40. 			<div id="left-menu">left-menu</div>
  41. 			<div id="main-inner-section">
  42. 				<div id="main-inner-top-section">
  43. 					<div id="left-panel">left-panel</div>
  44. 					<div id="center-panel">center-panel</div>
  45. 					<div id="right-panel">right-panel</div>
  46. 				</div>
  47. 				<div id="content">content</div>
  48. 			</div>
  49. 			<div id="right-menu">right-menu</div>
  50. 		</div>
  51.  
  52. 		<div id="bottom-menu">bottom-menu</div>
  53. 		<div id="footer">footer</div>
  54. 	</div>
  55. 	</body>
  56. </html>
[HTML] pobierz, plaintext
toaspzoo
22.08.2012, 19:02:54
Zgaduję, że wyświetlanie poszczególnych elementów layoutu zależne jest od skryptu php, więc zastosuj style w zależności od potrzeb.
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.