Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS][HTML] Pomoc dla początkującego.
kat_ek
post
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 (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
kat_ek
post
Post #2





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:

(IMG:http://www.asgglowno.ayz.pl/admin/strona.png)

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

Posty w temacie
- kat_ek   [CSS][HTML] Pomoc dla początkującego.   6.10.2009, 12:25:43
- - Zosiek   #main_body width o 20px za dużo. Polecam książkę h...   6.10.2009, 12:58:18
- - kat_ek   No tak, nie wróciłem uwagi na marginesy po 10px. T...   6.10.2009, 15:24:31
- - Zosiek   Jeżeli masz cały czas tekst bez spacji to co się d...   6.10.2009, 16:22:36
- - kat_ek   W sumie to co piszesz jest logiczne, mało jest tak...   6.10.2009, 20:29:09
- - Zosiek   Jeżeli się nie mylę to porostu: 1. Div jest pusty ...   6.10.2009, 21:12:10

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

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