Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: html+css+wyśrodkowanie
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Elber
21.02.2008, 13:18:25
css:
[PHP] pobierz, plaintext 
  1. <?php
  2. body {
  3.   margin: 0px 0px 0px 90px;
  4.   padding: 0px;
  5.   font-family: verdana, arial, helvetica, sans-serif;
  6.   font-size: 10px;
  7.   line-height: 20px;
  8.   color: #000;
  9.   background-color: #EEE;
  10. }
  11.  
  12. h1 {
  13.   font-size: 14px;
  14.   font-weight: bold;
  15.   color: #695;
  16. }
  17.  
  18. h2 {
  19.   font-size: 12px;
  20.   font-weight: bold;
  21.   color: #CC9900;
  22. }
  23.  
  24. h3 {
  25.   font-size: 10px;
  26.   font-weight: bold;
  27.   color: #CC9900;
  28. }
  29.  
  30. .title {
  31.   font-size: 20px;
  32.   font-weight: bold;
  33.   color: #695;
  34.   border-left: 5px solid #F90;
  35.   padding-left: 5px;
  36. }
  37.  
  38. .subtitle {
  39.   font-size: 11px;
  40.   font-weight: bold;
  41.   color: #333;
  42.   border-left: 5px solid #FFF;
  43.   padding-left: 5px;
  44. }
  45.  
  46. #lpanel .heading {
  47.   background-color: #94D400;
  48.   font-size: 10px;
  49.   font-weight: bold;
  50.   color: #FFF;
  51.   text-align: center;
  52.   padding: 0px;
  53.   margin-top: 0px;
  54.   margin-bottom: 5px;
  55. }
  56.  
  57. #lpanel a {
  58.   color: #333;
  59.   text-decoration: none;
  60.   font-weight: bold;
  61.   padding-left: 15px;
  62.   background: url('images/b-1.gif') no-repeat center left;
  63. }
  64.  
  65. #lpanel a:hover {
  66.   color: #695;
  67.   background: url('images/b-2.gif') no-repeat center left;
  68. }
  69.  
  70. a {
  71.   color: #695;
  72.   text-decoration: none;
  73.   padding: 1px;
  74. }
  75.  
  76. a:hover {
  77.   color: #666;
  78.   background-color: #EEE;
  79. }
  80.  
  81. img {
  82.   float: right;
  83.   padding-left: 10px;
  84.   padding-right: 10px;
  85. }
  86.  
  87.  
  88. #header {
  89.   width: 856px;
  90.   height: 168px;
  91.   margin: 4px 0px -16px -30px;
  92.   padding: 10px;
  93.   background-color: #FFF;
  94. }
  95.  
  96. #title {
  97.   position: absolute;
  98.   top: 20px;
  99.   left: 20px;
  100.   padding: 10px;
  101.   background-color: #FFF;
  102. }
  103.  
  104. #lpanel {
  105.   position: absolute;
  106.   left: 73px;
  107.   margin: 0px 0px 0px -13px;
  108.   padding: 10px;
  109.   background-color: #FFF;
  110.   width: 161px;
  111. }
  112.  
  113. #content {
  114.   width: 671px;
  115.   margin: 0px 0px 4px 155px;
  116.   padding: 10px;
  117.   background-color: #FFF;
  118.   font-size: 11px;
  119.   font-weight: normal;
  120. }
  121.  
  122. #footer {
  123.   width: 671px;
  124.   margin: 0px 50px 0px 155px;
  125.   padding: 10px;
  126.   background-color: #FFF;
  127.   text-align: right;
  128. }
  129. ?>
[PHP] pobierz, plaintext


html:
[HTML] pobierz, plaintext 
  1. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
  2.   	<link rel="stylesheet" type="text/css" href="style.css" media="screen, print">
  3. 	<link rel="stylesheet" type="text/css" href="CZESCI%20ROLNICZE%20Claas,%20Welger,%20John%20Deere,%20Fendt,%20MF,%20Ursus/image.css"><title>CZĘŚCI ROLNICZE Claas, Welger, John Deere, Fendt, MF, Ursus</title>
  4.  
  5.   <meta name="keywords" content="części rolnicze, CLAAS, WELGER, maszyny rolnicze, Fendt, John Deere, traktor, KOPARKI, czesci do maszyn rolniczych, Ursus, Zetor, MF, Massey Ferguson, ZABAWKI, Krone, Kverneland, Lemken, Agroma">
  6.   <meta name="keyphrases" content="części rolnicze, CLAAS, WELGER, maszyny rolnicze, Fendt, John Deere, traktor, KOPARKI, czesci do maszyn rolniczych, Ursus, Zetor, MF, Massey Ferguson, ZABAWKI, Krone, Kverneland, Lemken, Agroma">
  7.   <meta name="description" content="Części rolnicze i maszyny rolnicze, CLAAS, WELGER, Fendt, John Deere, MF, Krone, Lemken, Rabewerk, Frost, Ursus, Zetor, Bizon, Zabawki i inne">
  8.   <meta name="language" content="pl, polski, polish">
  9.   <meta name="page-topic" content="Części i maszyny rolnicze">
  10.   <meta name="page-type" content="business, biznes">
  11.   <meta name="robots" content="index,follow">
  12.   <meta name="siteinfo" content="robots.txt">
  13.   <meta name="revisit-after" content="1 days">
  14.  
  15. <div id="header">
  16. <object height="168" width="856">
  17. <param name="movie" value="images/banner.swf">
  18. <embed src="CZESCI%20ROLNICZE%20Claas,%20Welger,%20John%20Deere,%20Fendt,%20MF,%20Ursus/banner.swf" height="168" width="856">
  19.  
  20. </object>
  21. </div>
  22. <br style="top: auto;">
  23.  
  24. <div id="lpanel">
  25.  
  26.   <div class="heading">Menu</div>
  27. 	<a href="http:///?url=glowna" title="Link do strony głównej serwisu części rolnicze">Strona Główna</a><br>
  28. 	<a href="http://?url=ofirmie" title="Opis firmy">O firmie</a><br>
  29. 	<a href="http:///?url=uslugi" title="Szczegółowy opis usług">Nasza oferta</a><br>
  30. 	<a href="http://url=dojazd" title="Opis dojazdu do firmy">Dojazd do nas</a><br>
  31. 	<a href="http://?url=kontakt" title="Można się z nami skontaktować telefoniczne i mailowo">Kontakt</a><br>
  32. 	<a href="http:///" title="Sklep"><strong>Sklep-części rolnicze</strong></a><strong><strong><br>
  33. 	<a href="http://" title="Sklep">Ogłoszenia</a>
  34.     	<br></strong>
  35.  
  36.         </strong><h3><strong><font size="2"></font></strong></h3>
  37.  
  38. <strong>	</strong><p minmax_bound="true">
  39. <strong>        <strong minmax_bound="true">
  40.         <font minmax_bound="true" size="2">
  41.  	Świercze</font><br minmax_bound="true">
  42. 	</strong>
  43. 	<font minmax_bound="true" size="2">
  44.  	<br minmax_bound="true">
  45. 	</font><font minmax_bound="true" color="#1f384f"><br minmax_bound="true">
  46. 	<br minmax_bound="true">
  47. 	</font><strong minmax_bound="true">
  48. 	Tel:</strong><br minmax_bound="true">
  49. 	<strong minmax_bound="true">Fax:</strong> 
  50. 	<br minmax_bound="true">
  51. 	<strong minmax_bound="true">E-mail:</strong> 
  52. 	</strong></p>
  53.  
  54. <strong>    </strong><center>
  55. <strong>    <script type="text/javascript">
  56. google_ad_client = "pub-7639359759728800";
  57. google_ad_width = 125;
  58. google_ad_height = 125;
  59. google_ad_format = "125x125_as";
  60. google_ad_type = "text_image";
  61. google_ad_channel = "1641380093";
  62. google_color_border = "FFFFFF";
  63. google_color_bg = "FFF";
  64. google_color_link = "0000FF";
  65. google_color_text = "000000";
  66. google_color_url = "008000";
  67. </script><script type="text/javascript" src="CZESCI%20ROLNICZE%20Claas,%20Welger,%20John%20Deere,%20Fendt,%20MF,%20Ursus/show_ads.js"></script><iframe name="google_ads_frame" src="CZESCI%20ROLNICZE%20Claas,%20Welger,%20John%20Deere,%20Fendt,%20MF,%20Ursus/ads.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="125" scrolling="no" width="125"></iframe>
  68. </strong></center>
  69. </div>
  70.  
  71. <div id="content">
  72. <strong>	
  73. <!-- Tutaj zaczyna się treść -->
  74. <strong><h1>test</h1>
  75. <h2>Claas, Welger, John Deere, MF</h2></strong>
  76. </strong><h3><strong>TANIO, SZYBKO I DOBRZE</strong></h3>
  77. <p><strong>Oferta naszej Firmy to szeroki asortyment części do <a title="Claas - części i maszyny rolnicze" alt="Claas - części i maszyny rolnicze" href="http://ste/">Claas</a>, <a title="CLAAS, WELGER - części rolnicze" alt="CLAAS, WELGER - części rolnicze" href="http://test">Welger</a>, <a title="John Deere części rolnicze" alt="John Deere części rolnicze" href="http://test/">John Deere</a>,
  78. </strong></em></strong></center>
  79. <strong><br>
  80. </strong><h3><strong>CLAAS, WELGER, FENDT
  81. CZESCI W DOBREJ CENIE</strong></h3>
  82. <p><strong></strong></p>
  83.  
  84. <!-- Tutaj kończy się treść -->
  85. <strong><br>
  86.  
  87.   </strong><center>
  88. <strong>    <script type="text/javascript">
  89. google_ad_client = "pub-7639359759728800";
  90. google_ad_width = 468;
  91. google_ad_height = 60;
  92. google_ad_format = "468x60_as";
  93. google_ad_type = "text_image";
  94. google_ad_channel = "1641380093";
  95. google_color_border = "FFFFFF";
  96. google_color_bg = "FFF";
  97. google_color_link = "0000FF";
  98. google_color_text = "000000";
  99. google_color_url = "008000";
  100. </script><script type="text/javascript" src="CZESCI%20ROLNICZE%20Claas,%20Welger,%20John%20Deere,%20Fendt,%20MF,%20Ursus/show_ads.js"></script><iframe name="google_ads_frame" src="CZESCI%20ROLNICZE%20Claas,%20Welger,%20John%20Deere,%20Fendt,%20MF,%20Ursus/ads_002.htm" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="60" scrolling="no" width="468"></iframe>
  101. </strong></center>
  102. </div>
  103.  
  104. <strong>  </strong><div id="footer">
  105.  
  106. <strong>    </strong><div><strong>Copyright Š 2008 by <a href="mailto:test"></a></strong></div>
  107. <strong>    </strong><div><strong>Opracowanie <a href="http://www.test"></a></strong></div>
  108.  
  109. <strong>  </strong></div>
  110.  
  111. <strong>  </strong><div><strong> </strong></div>
  112.  
  113. </body></html>
[HTML] pobierz, plaintext


jak zrobić by na każdym monitorze strona była na środku ekranu, robiłem to i na moim monitorze było ok, ale już np na 21 cali pojawiało się na lewo, co dopisać w kodzie?
grzesiek_g
21.02.2008, 13:29:28
1. Zmień w body margin na 0 (a nie 0 0 0 90px);
2. Obejmij wszystko co chcesz wyśrodkować jakimś divem, nadaj mu jaką chcesz szerokość i margin:0 auto;
3. Nie widzę gdzie otwierasz body, wogóle cała góra jest do niczego, gdzie DOCTYPE, gdzie head? Otwórz sobie chociażby źródło tego forum i zobacz jak ma być, poczytaj kurs: http://kurs.browsehappy.pl/
4. Nie o to pytałeś ale widzę błędy w postaci spacji w katalogach z zasobami - np css, flash. Zmień nazwy katalogów na zapisWielbłądzi albo zapis_z_podkreśleniem.
devnul
21.02.2008, 20:11:22
Cytat
Obejmij wszystko co chcesz wyśrodkować jakimś divem, nadaj mu jaką chcesz szerokość i margin:0 auto;
dodam do tego że trzeba by też nadać styl text-align:leftl a dla elementu nadżędnego text-align:center. Jest to hak na IE które niestety nie stosuje się do standardów. Bez tych dwóch elementół wszystko oczywiscie będzie Ok w przeglądarkach nie MSowych
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.