Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML] Pomoc dla początkującego.
Forum PHP.pl > Forum > Przedszkole
kat_ek
6.10.2009, 12:25:43
Witam wszystkich forumowiczów!

Obecnie pracuję nad stroną, która ma przedstawiać internautom moje (oraz moich przyjaciół) hobby.
Strona ma być oparta o mySQL oraz PHP. Jako, że umiem C, programowanie w php nie stwarza mi nadmiernych trudności, natomiast zgranie wszystkich komponentów strony (kody, style) już tak.

Strona ma być oparta o znaczniki <div> oraz o arkusz stylu ustawiający ów znaczniki. Kod strony i stylu:

[HTML] pobierz, plaintext 
  1. body {
  2. 	background-color: #000000;
  3. 	color: #000000;
  4. 	margin: 0;
  5. 	padding: 0;
  6. 	margin-top:0px;
  7. 	margin-left:0px;
  8. 	margin-right:0px;
  9. 	margin-bottom:0px;
  10. 	}
  11.  
  12. #kontener {
  13.             width:830px;;	/* zmienic na 780 ale to po ponownym przycinaniu grafiki */
  14.             height:100%;
  15.             background:#ffffff;
  16. 	overflow: hidden;
  17. 	margin-top:0px;	
  18. 	margin-left:auto;
  19. 	margin-right:auto;
  20. 	margin-bottom:0px;	
  21.            }
  22.  
  23. #logo {
  24.            background: #b0d398;
  25.            width:830px;
  26.            height:100px;
  27.            overflow: hidden;	
  28.     	}
  29.  
  30. #menu {
  31.             background: #000000 url(images/top.gif) no-repeat;
  32.             width:830px;
  33.             height:75px;
  34. 	overflow: hidden;	
  35. 	}
  36.  
  37. #menu a { 
  38. 	z-index: 3;
  39. 	text-decoration: none;
  40. 	text-align: center;
  41. 	position: relative;	
  42. 	}	
  43.  
  44. #menu img { 
  45. 	z-index: auto;
  46. 	float: left;
  47. 	position: relative;
  48. 	}	
  49.  
  50. #left_margin {
  51.              background: #000000 url(images/left.gif) repeat-y;
  52. 	 width:30px;
  53.              height:200px;
  54. 	 float: left;				
  55. 	 overflow: hidden;
  56. 	 }	
  57.  
  58. #main_body { 
  59.             background-color: #FFFFFF;
  60. 	width:770px;	
  61.             height:auto;
  62. 	float: left;					
  63. 	overflow: hidden;
  64. 	margin-top:10px;		
  65. 	margin-left:10px;
  66. 	margin-right:10px;
  67. 	margin-bottom:10px;
  68.             }
  69.  
  70. #right_margin {
  71. 	background: #000000 url(images/right.gif) repeat-y;
  72. 	width:30px;
  73.             height:200px;
  74. 	float: right;				
  75. 	overflow: hidden;
  76.             }
  77.  
  78. #bottom {
  79. 	background: #000000 url(images/bottom.gif) no-repeat;
  80. 	width:830px;
  81. 	height:40px;	
  82. 	clear: both
  83. 	}
  84.  
  85. #footer {
  86. 	background: #ffffff;
  87. 	width:830px;
  88. 	height:50px;
  89. 	}
  90.  
  91. #footer p {
  92. 	text-align: center;
  93. 	}
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  5. <meta name="Description" content="Opis dokumentu" />
  6. <meta name="Author" content="Autor dokumentu" />
  7. <title>Tytuł dokumentu</title>
  8. <link rel="stylesheet" href="style.css" type="text/css" />
  9. </head>
  10. <body>
  11.  
  12. <div id="kontener">
  13.  
  14. <div id="logo">
  15. <center><h1>Panel administratora.</h1></center>
  16. </div>
  17.  
  18. <div id="menu">
  19. <?php 
  20. if($_GET['action']=='' || $_GET['action']=='1')
  21. 	{
  22. 	print("
  23. 			<a href=\"admin.php?action=1\" style=\"left: 50px; top: 35px\">News&nbsp;&nbsp;&nbsp;</a>
  24. 			<a href=\"admin.php?action=1\" style=\"left: 50px; top: 35px\">Stat&nbsp;&nbsp;&nbsp;</a>
  25. 			<a href=\"admin.php?action=1\" style=\"left: 50px; top: 35px\">mySQL&nbsp;&nbsp;&nbsp;</a>
  26. 			<a href=\"admin.php?action=1\" style=\"left: 50px; top: 35px\">Mail&nbsp;&nbsp;&nbsp;</a>
  27. 			<a href=\"admin.php?action=1\" style=\"left: 50px; top: 35px\">AddUSR&nbsp;&nbsp;&nbsp;</a>
  28. 			");
  29. 	}
  30. ?>
  31. </div>
  32.  
  33. <div id="left_margin"></div>
  34.  
  35. <div id="main_body"><p>dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
    ddddd</p></div>
  36.  
  37. <div id="right_margin"></div>
  38.  
  39. <div id="bottom"></div>
  40.  
  41. <div id="footer"></div>
  42. <center><p>Panel administracyjny ver: 0.1</p></center>
  43. </div>
  44.  
  45. </body>
  46. </html>
[HTML] pobierz, plaintext


Ten kod akurat przedstawia stronę panelu administratora (skromnego, ale zawsze smile.gif ). Problem polega na tym, że tło w diwach left i right margin dziwnie się generuje. Pozostają białe obszary ni wypełnione przez tło Zobacz

Na dodatek zawartość main_body nie dopasowuje się do rozmiarów diva, a według mnie powinna. Początkowo, gdy stworzyłem tylko sam szablon wszystko było w porządku, jednak dodanie kodu php do main_body sprawiło takie efekty jak teraz i usunięcie kodu (pozostawienie pustego diva) nie pomogło w uzyskaniu pierwotnego (i założonego) wyglądu strony.

W czym leży problem?

PS Nie linczujcie mnie od razu, że gdzieś jest taki temat, ponieważ jak zobaczyłem ile tego jest do przejrzenia to się poddałem, a wyszukiwarka nie zawsze działa tak jak by się chciało tongue.gif
Zosiek
6.10.2009, 12:58:18
#main_body
width o 20px za dużo.
Polecam książkę http://helion.pl/ksiazki/csswit.htm
kat_ek
6.10.2009, 15:24:31
No tak, nie wróciłem uwagi na marginesy po 10px. Ten problem jest rozwiązany, pozostaje jeszcze jak zrobić, żeby zawartość main_body dostosowywała się do wymiarów diva.
Zosiek
6.10.2009, 16:22:36
Jeżeli masz cały czas tekst bez spacji to co się dziwisz, że wyjeżdża tongue.gif. Jeśli dodasz kilka spacji to się pozałamuje do nowych wierszy i będzie div rósł w długość.
kat_ek
6.10.2009, 20:29:09
W sumie to co piszesz jest logiczne, mało jest tak długich wyrazów, jednak myślałem, że przy tak długim wyrazie zostanie on automatyczni "złamany" do nowej linii. To te kwestie już się wyjaśniły. Kolejny problem dotyczy obu margin'ów, mianowicie obecnie wygląda to tak:



A kod odpowiedzialny za te marginesy tak:

[HTML] pobierz, plaintext 
  1. #left_margin {
  2. 	background: #000000 url(images/left.gif) repeat-y;
  3. 	width:30px;
  4. 	height:100px;
  5. 	float: left;				
  6. 	overflow: hidden;
  7. 	}
  8.  
  9. #right_margin {
  10. 	background: #000000 url(images/right.gif) repeat-y;
  11. 	width:30px;
  12. 	height:100%;
  13. 	float: right;				
  14. 	overflow: hidden;
  15.         }
[HTML] pobierz, plaintext


Problem polega na tym, że ustawiając hight na auto czy 100% nigdy nie rysuje poprawnie tych niebieskich linii. Obrazek tła dla tych marginesów ma 1px wysokości. Co robię źle?
Zosiek
6.10.2009, 21:12:10
Jeżeli się nie mylę to porostu:
1. Div jest pusty i dlatego nie ma żadnego rozmiaru. Podając w px dajesz maksymalny jego rozmiar. A w 100% lub w auto dajesz mu rozmiar taki ile będzie znaków w tym divie.
2. Zrób background dla main_body albo kontener (o szerokości takiej jak ci pasuje, i na dwóch końcach daj te niebieska znaczki) Ustaw go jako background i poustawiaj jak chcesz.
3. To białe co wychodzi poza to jest kontener
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.