Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [xhtml] Div się rozjeżdza
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
eunix
27.12.2006, 12:17:38
Witam,

Na wstępie dodam, że dopiero od niedawna interesuje się tworzeniem stron na div'ach.
W ramach treningu napisałem sobie taki prosty szablon:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.  		"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">
  4. <head>
  5. 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6. 	<meta name="Description" content="Tu wpisz opis zawartości strony" />
  7. 	<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
  8. 	<meta name="Author" content="Tu wpisz swoje imię i nazwisko" />
  9. 	<title>Tu wpisz tytuł strony</title>
  10. 	<style type="text/css">	
  11.  
  12. 	body, html {
  13. 		margin: 0px;
  14. 		padding: 0px;
  15. 		overflow: auto;
  16. 		font-family: Tahoma, Verdana;
  17. 		text-align: center;
  18. 	}
  19.  
  20. 	#container {
  21. 		overflow: hidden;
  22. 		text-align: left;
  23. 		width: 780px;
  24. 		padding: 5px;
  25. 		border-left: 1px solid #dadada;
  26. 		border-right: 1px solid #dadada;
  27. 	}
  28.  
  29. 	#logo {
  30. 		width: 100%;
  31. 		padding: 5px;
  32. 		font-size: 11px;
  33. 		background-color: #fbfbfb;
  34. 		border: 1px solid #dadada;
  35. 	}
  36.  
  37. 	#menu {
  38. 		margin-top: 5px;
  39. 		margin-right: 5px;
  40. 		float: left;
  41. 		width: 30%;
  42. 		padding: 5px;
  43. 		font-size: 11px;
  44. 		background-color: #fbfbfb;
  45. 		border: 1px solid #dadada;
  46. 	}
  47.  
  48. 	#content {
  49. 		margin-top: 5px;
  50. 		float: right;
  51. 		width: 70%;
  52. 		padding: 5px;
  53. 		font-size: 11px;
  54. 		background-color: #fbfbfb;
  55. 		border: 1px solid #dadada;
  56. 	}
  57.  
  58. 	#footer {
  59. 		margin-top: 5px;
  60. 		clear: both;
  61. 		width: 100%;
  62. 		padding: 5px;
  63. 		font-size: 11px;
  64. 		background-color: #fbfbfb;
  65. 		border: 1px solid #dadada;
  66. 	}
  67.  
  68. 	</style>
  69.  
  70. </head>
  71. <body>
  72.  
  73. <div id="container">
  74. 	<div id="logo">logo</div>
  75. 	<div id="menu">menu</div>
  76. 	<div id="content">tekst</div>
  77. 	<div id="footer">stopka</div>
  78. </div>
  79.  
  80.  
  81. </body>
  82. </html>
[HTML] pobierz, plaintext


Jednak, niektóre divy nie są odpowiednio szerokie, div menu wchodzi na pole diva content i ten przez to jest niżej.
Za to divy logo i footer jakby nie uwzględniały padding'a, bo z prawej strony wogóle nie ma przy nich odstępu od diva container.
Mam też pytanie, czemu nie działa border-spacing i border-collapse, chciałem zrobić sobie tak jak w tabeli spacing, żeby wszędzie były równe odstępy, ale nic nie działa.
Strona też nie chce się wyśrodkować, chociaż dałem text-align: center w body.

Pozdrawiam
matlas
27.12.2006, 17:14:05
aby wysrodkowac <div> - a robisz taki myk:

margin-left: auto;
margin-right: auto;
kwiateusz
27.12.2006, 18:07:21
lub po prostu margin: 0 auto winksmiley.jpg
eunix
27.12.2006, 19:45:29
dzięki, działa smile.gif

Cytat
Mam też pytanie, czemu nie działa border-spacing i border-collapse, chciałem zrobić sobie tak jak w tabeli spacing, żeby wszędzie były równe odstępy, ale nic nie działa.

pozostało mi tylko to...
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.