Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]DIV - Problem z ułożeniem bloków
Forum PHP.pl > Forum > Przedszkole
awek520
30.10.2014, 16:02:52
Witam. Mam banalny a zarazem jak dla mnie dosc skomplikowany problem..

Chce aby moja strona oparta na DIV wyglądała tak:


LOGO
MENU TRESC
STOPKA

Do tego mam kod:
index.php

[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. 	<head>
  4. 		<title>Nowa strona testowa</title>
  5. 		<META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">
  6. 		<link rel="Stylesheet" type="text/css" href="style/style.css" />	
  7. 	</head>
  8.  
  9. 	<body>
  10.  
  11.  
  12. <div id="top">
  13. 	<div id="NAGLOWEK">Nagłówek szablonu</div>
  14.  
  15. 	<br>
  16.  
  17. 	<div id="MENU_GORA"></div>
  18. 	<div id="MENU_SRODEK">
  19. <div class="menu">
  20.  
  21. <a href="?case=home">- Home</a><br>
  22. <a href="?case=logowanie">- Logowanie</a>
  23. <a href="?case=home">- Home</a><br>
  24. <a href="?case=logowanie">- Logowanie</a>
  25.  
  26.  
  27. </div>
  28. </div>
  29. 	<div id="MENU_DOL"></div>
  30.  
  31. 	<div id="TRESC_GORA"></div>
  32. 	<div id="TRESC">
  33. 	<center>
  34. <div class="podstrona">PODSTRONA</div></center>
  35.  
  36. <div class="tresc">
  37.  
  38. <?php
  39. switch($_GET['case']){
  40.   case 'home':      include('home.php'); break;
  41.   case 'logowanie':      include('logowanie.php'); break;
  42.  
  43.   default:          include('error.php');
  44. }
  45. ?>
  46.  
  47.  </div>
  48. </div>
  49. <div id="TRESC_DOL"></div>
  50.  
  51. <br>
  52.  
  53. 	<div id="STOPKA_GORA"></div>
  54. 	<div id="STOPKA"><br><center>Stopka serwisu</center><br></div>
  55. 	<div id="STOPKA_DOL"></div>
  56.  
  57. </div>
  58.  
  59. 	</body>
  60. </html>
[PHP] pobierz, plaintext


I Style.css

[PHP] pobierz, plaintext 
  1. html, body {
  2. 	background-image: url('tlo.jpg');
  3. 	margin: 0;
  4. 	padding: 0;
  5. 	text-align: center;
  6. }
  7.  
  8. #top {
  9. 	width: 960px;
  10. 	margin-left: auto;
  11. 	margin-right: auto;
  12. 	text-align: left;
  13. }
  14.  
  15. #NAGLOWEK {
  16. 	background-image: url('logo.jpg');
  17. 	width: 960px;
  18. 	height: 250px;
  19. }
  20.  
  21.  
  22.  
  23. #MENU_GORA {
  24. 	background-image: url('mala_gora.jpg');
  25. 	width: 210px;
  26. 	height: 35px;
  27. }
  28.  
  29. #MENU_SRODEK {
  30. 	background-image: url('mala_srodek.jpg');
  31. 	height: auto;
  32. 	width: 210px;
  33.  
  34. }
  35.  
  36. #MENU_DOL {
  37. 	background-image: url('mala_dol.jpg');
  38. 	width: 210px;
  39. 	height: 41px;
  40. 	float: left;
  41. }
  42.  
  43.  
  44.  
  45. #TRESC_GORA {
  46. 	width: 735px;
  47. 	background-image: url('duzy_gora.jpg');
  48. 	height: 36px;
  49. 	float: right;
  50. }
  51.  
  52. #TRESC {
  53. 	width: 735px;
  54. 	float: right;
  55. 	background-image: url('duzy_srodek.jpg');
  56. }
  57.  
  58. #TRESC_DOL {
  59. 	width: 735px;
  60. 	background-image: url('duzy_dol.jpg');
  61. 	height: 41px;
  62. 	float: right;
  63. }
  64.  
  65.  
  66.  
  67.  
  68. #STOPKA_GORA {
  69. 	width: 960px;
  70. 	clear: both;
  71. 	height: 18px;
  72. 	background-image: url('stopka_gora.jpg');
  73. }
  74.  
  75.  
  76. #STOPKA {
  77. 	width: 960px;
  78. 	height: auto;
  79. 	background-image: url('stopka_srodek.jpg');
  80. }
  81.  
  82. #STOPKA_DOL {
  83. 	width: 960px;
  84. 	height: 18px;
  85. 	background-image: url('stopka_dol.jpg');
  86. }
  87.  
  88. .menu {
  89. font-size:14px;
  90. color: white;
  91. margin-left:20px;
  92. }
  93.  
  94. .podstrona {
  95. color: grey;
  96. font-size:14px;
  97. }
  98.  
  99. .tresc {
  100. color: black;
  101. }
  102.  
  103. a:link, a:visited { color: #62260e; text-decoration: none; line-height: 0.6cm;} 
  104. a:active, a:hover { color: #CC9900; text-decoration: none;}
  105. a1:link, a:visited { text-decoration: none;} 
[PHP] pobierz, plaintext



Jak widac są tam także takie DIV jak duzy_gora, duzy_srodek.

Ogólnie grafika z menu jest zbudowana z:
- Początek - Belka górna
- Srodek - Belka środkowa
- Koniec - Belka dolna.

Nie potrafie z belki menu przejśc na belke z treścia (środkowa) - Nie potrafie przenieś tego pod logo - na jedną płaszczyzne..

Mam nadzieje że mniej więcej wiecie o co kaman..


Pozdrawiam i czekam na pomoc
b4rt3kk
30.10.2014, 16:06:43
No właśnie nie bardzo. Możesz podać linka do tego? Lub chociaż screen zrobić?
awek520
30.10.2014, 16:10:59
Cytat(b4rt3kk @ 30.10.2014, 16:06:43 ) *
No właśnie nie bardzo. Możesz podać linka do tego? Lub chociaż screen zrobić?


http://i61.tinypic.com/zx5f1x.jpg

Proszę bardzo
aniolekx
30.10.2014, 16:24:47
zobacz cobie takie coś jak 1 line css, na tej stronce są tez inne ciekawe projekty
awek520
30.10.2014, 16:31:55
No tak, ale w takim wypadku będę zmuszony edytowac cały szablon.. a po 2 nie będzie ruchomy tylko stały..
b4rt3kk
30.10.2014, 16:42:38
Odnośnie samego kodu HTML - staraj się nie używać <br/> tylko po to żeby zrobić linię odstępu - w tym celu używaj paddingów lub marginesów.

Brakuje Ci też pod float-ami elementu który czyści float, czyli clear: both.

Ja bym stawiał (przy pobieżnym tylko przejrzeniu kodu), że prawy box z treścią jest za szeroki. Spróbuj go zmniejszyć do np 500 px. Jeśli będzie ok, to znaczy że tu jest problem.
awek520
30.10.2014, 16:46:13
Cytat(b4rt3kk @ 30.10.2014, 16:42:38 ) *
Odnośnie samego kodu HTML - staraj się nie używać <br/> tylko po to żeby zrobić linię odstępu - w tym celu używaj paddingów lub marginesów.

Brakuje Ci też pod float-ami elementu który czyści float, czyli clear: both.

Ja bym stawiał (przy pobieżnym tylko przejrzeniu kodu), że prawy box z treścią jest za szeroki. Spróbuj go zmniejszyć do np 500 px. Jeśli będzie ok, to znaczy że tu jest problem.


Niee.. szerokosc jest ok.. sprawdzałem to juz.. co do clear: both; dodałem i dalej nic..
b4rt3kk
30.10.2014, 16:49:57
Zrób sobie porządny podział na bloki:

[HTML] pobierz, plaintext 
  1. <div class="container">
  2. <div class="contaner-left"> // element z float: left
  3. // tu daj wszystkie te poziomy menu (góra, środek, dół)
  4. </div>
  5. <div class="container-right"> // element z float: right
  6. // tutaj poziomy dla treści (góra, środek, dół)
  7. </div>
  8. <div class="clear"></div>
  9. </div>
[HTML] pobierz, plaintext
trueblue
30.10.2014, 17:12:57
Jeśli chcesz zostawić strukturę jak obecnie, to musisz jednak przeplatać MENU_ z TRESC_,
czyli:
MENU_GORA
TRESC_GORA
MENU_SRODEK
TRESC
MENU_DOL
TRESC_DOL
Ale polecam Ci jednak, to co kolega post wyżej.
awek520
30.10.2014, 20:45:15
Cytat(b4rt3kk @ 30.10.2014, 16:49:57 ) *
Zrób sobie porządny podział na bloki:

[HTML] pobierz, plaintext 
  1. <div class="container">
  2. <div class="contaner-left"> // element z float: left
  3. // tu daj wszystkie te poziomy menu (góra, środek, dół)
  4. </div>
  5. <div class="container-right"> // element z float: right
  6. // tutaj poziomy dla treści (góra, środek, dół)
  7. </div>
  8. <div class="clear"></div>
  9. </div>
[HTML] pobierz, plaintext



Zrobiłem tak jak mówiłeś.. Działa ładnie i pięknie.. ; ) i łatwiejsza edycja i bardziej dla oka przyjazny kodzik.. smile.gif

Plusik poleciał.

Pozdrawiam i dziękuje wszystkim za odpowiedzi i porady!
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.