Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Pomoc dla początkującego.
kat_ek
post 6.10.2009, 12:25:43
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 4.10.2009

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

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
Go to the top of the page
+Quote Post
Zosiek
post 6.10.2009, 12:58:18
Post #2





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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

#main_body
width o 20px za dużo.
Polecam książkę http://helion.pl/ksiazki/csswit.htm


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
kat_ek
post 6.10.2009, 15:24:31
Post #3





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 4.10.2009

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

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.
Go to the top of the page
+Quote Post
Zosiek
post 6.10.2009, 16:22:36
Post #4





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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

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ść.


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
kat_ek
post 6.10.2009, 20:29:09
Post #5





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 4.10.2009

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

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?
Go to the top of the page
+Quote Post
Zosiek
post 6.10.2009, 21:12:10
Post #6





Grupa: Zarejestrowani
Postów: 140
Pomógł: 22
Dołączył: 1.05.2009
Skąd: Będzin

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

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


--------------------
Pamiętaj ja staram się pomóc tobie, a ty może kiedyś pomożesz mnie. :D
Pomogłem Ci?? Jeśli tak to jestem z tego dumny. Jeśli nie to postaram się bardziej - nikt nie jest doskonały :P
Kliknij przycisk Pomógł pod postem, który Ci pomógł.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 7.07.2025 - 12:22
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn