Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Umieszczenie jednego diva pod drugim
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Galakar
18.03.2012, 12:37:15
Witam.

Ostatnio postanowiłem zmienić layout swojej strony. Poprzednia wersja która powstała przy okazji nauki php była w dużej mierze oparta na tabelkach. Teraz postanowiłem zrobić to poprawnie i oprzeć całość na div-ach. I tutaj mam problem. Mianowicie główny div z tekstem zasłania mi górne menu oraz logo. Ogólnie rzecz mówiąc, nie wyświetla się tak jak powinien. Postaram się dodać tylko najważniejsze części css (bo całość jest trochę długa).
CSS:
[HTML] pobierz, plaintext 
  1. body {
  2. 	background-color: #efc430;
  3. 	margin: 0;
  4. 	padding: 0;
  5. 	overflow: auto;
  6. 	 }
  7. .main {
  8. 	position: fixed;
  9. 	background: white;
  10. 	width: 100%;
  11. 	height: 100%;
  12. 		}	
  13. .main2 {
  14. 	background: yellow;
  15. 	margin-left: 2%;
  16. 	margin-right: 2%;
  17. 	width: 96%;
  18. 	height: 100%;
  19. 		}
  20. .tekst {
  21. 	position: fixed;
  22. 	left: 10%;
  23. 	right: 10%;
  24. 	background: #fbeec0;
  25. 	line-height: 120%;
  26. 	white-space: pre-wrap;
  27. 	font-family: "Comic Sans MS", cursive, sans-serif;
  28. 	text-align:justify;
  29. 	overflow: auto;
  30. 		}
  31. .left {
  32. 	width: 2%;
  33. 	height: 100%;
  34. 	float: left;
  35. 	background-image: url(bok.jpg);
  36. 	background-attachment: fixed;
  37. 	position: fixed; left:0%; top:0%;
  38. 		}
  39. .right {
  40. 	width: 2%;
  41. 	height: 100%;
  42. 	float: right;
  43. 	background-image: url(bok.jpg);
  44. 	background-attachment: fixed;
  45. 	position: fixed; right:0%; top:0%;
  46. 		} 	 
  47. .logo {
  48. 	width: 250px;
  49. 	height: 51px;
  50. 	position: absolute; left: 40%; right: 50%;
  51. 	background: #efc430;
  52. 	background-image: url(logo.png);
  53. 	background-repeat: no-repeat;
  54. 		}
  55. .upmenu { 
  56. 	position: fixed; 
  57. 	left: 5%; 
  58. 	right: 5%; 
  59. 	margin-top: 5%;
  60. 			}
  61. .lowmenu {
  62. 	position: fixed; 
  63. 	left: 5%; 
  64. 	right: 5%; 
  65. 	bottom: 3%;
  66. 			}
[HTML] pobierz, plaintext

Oraz rozmieszczenie div-ów na stronie:
[HTML] pobierz, plaintext 
  1. <body>
  2. <div class = "main">
  3. <div class = "main2">
  4. <div class = "logo" />
  5. <div class = "upmenu">
  6. <a href="#">Aktualności</a>
  7. </div>
  8. <div class = "tekst">
  9. W przyszłości tutaj będą się znajdowały aktualności. 
  10. [...]
  11. <p style ="clear:both"></p>
  12. </div>
  13. <div class = "lowmenu">
  14. <a href="#">Użytkownicy</a>
  15. </div>
  16. </div>
  17. <div class = "left"/>
  18. <div class = "right"/>
  19. </div>
  20. </body>
[HTML] pobierz, plaintext


Na koniec obrazek jak to wygląda teraz:
http://www.phpowe.yoyo.pl/pics/layout.png
Pozdrawiam
Galakar
Szymciosek
6.04.2012, 18:04:53
position: fixed
jak zauważyłem jest przez Ciebie często używany, a chyba nie bardzo powinien. Poczytaj o pozycjonowaniu elementów w css.
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.