Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Umieszczenie jednego diva pod drugim
Galakar
post
Post #1





Grupa: Zarejestrowani
Postów: 11
Pomógł: 0
Dołączył: 29.05.2011
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 1)
Szymciosek
post
Post #2





Grupa: Zarejestrowani
Postów: 1 168
Pomógł: 126
Dołączył: 5.02.2010
Skąd: Świdnica

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 21.08.2025 - 21:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn