Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Wyśrodkowanie poziomego menu css
Forum PHP.pl > Forum > Przedszkole
moonsterr
2.08.2009, 16:06:13
Wiem, że to już było ale tamto mi nie pomagało sad.gif
Chodzi o to żeby wyśrodkować to menu i żeby miało szerokość 800pixeli
Jeszce jedno w html jest logo a pod nim menu co zrobić żeby nie było tam odstępu?
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>strona</title>
  6. <link href="styles.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <p align="center">  <img src="image_top.jpg" alt="" width="800" height="250" /><br />
  10. </p>
  11. <ul class="navigation">
  12. <li><a href="http://www.hv-designs.co.uk"><em class="home"></em><b>O mnie</b></a></li>
  13. <li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="templates"></em><b>Deekay</b></a></li>
  14. <li><a href="http://www.sb-designs.co.uk"><em class="psd"></em><b>Download</b></a></li>
  15. <li><a href="http://www.hv-designs.co.uk"><em class="tutorials"></em><b>Contact</b></a></li>
  16. <li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="shop"></em><b>Linki</b></a></li>
  17. <li><a href="http://www.hv-designs.co.uk"><em class="contact"></em><b>dodatkowo</b></a></li>
  18. </ul>
  19.  
  20. </body>
  21. </html>
[HTML] pobierz, plaintext

css
[HTML] pobierz, plaintext 
  1. body {
  2. 	margin-left: 0px;
  3. 	margin-top: 0px;
  4. 	margin-right: 0px;
  5. 	margin-bottom: 0px;
  6. 	background-color: #000000;
  7. }
  8.  
  9.  
  10. body,td,th {
  11. 	color: #FFFFFF;
  12. }
  13.  
  14. .style1 {
  15. 	font-size: 36px;
  16. 	font-weight: bold;
  17. }
  18.  
  19.  
  20. .navigation {
  21. 	padding:0 0 0 20px;
  22. 	margin:0;
  23. 	list-style:none;
  24. 	height:40px;
  25. 	background:#1841c8 url(navigation/nav_background.gif);
  26. }
  27. .navigation li {
  28. 	float:left;
  29. }
  30. .navigation li a {
  31. 	display:block;
  32. 	float:left;
  33. 	height:40px;
  34. 	line-height:40px;
  35. 	color:#FFFFFF;
  36. 	text-decoration:none;
  37. 	font-family:arial, verdana, sans-serif;
  38. 	text-align:center;
  39. 	padding:0 0 0 10px;
  40. 	cursor:pointer;
  41. 	font-size:11px;
  42. }
  43. .navigation li a b {
  44. 	float:left;
  45. 	display:block;
  46. 	padding:0 16px 0 8px;
  47. }
  48. .navigation li.current a {
  49. 	color:#FFFFFF;
  50. 	background:url(navigation/nav_hover.gif);
  51. }
  52. .navigation li a:hover {
  53. 	color:#00CCFF;
  54. 	background: url(navigation/nav_hover.gif);
  55. }
  56. .navigation li a em {
  57. 	display:block;
  58. 	float:left;
  59. 	width:30px;
  60. 	height:40px;
  61. }
  62.  
  63.  
  64.  
  65. .navigation li a em.home {
  66. 	background-image: url(nav_icons/icons.png);
  67. 	background-repeat: no-repeat;
  68. 	background-position: center center;
  69. }
  70. .navigation li a em.templates {
  71. 	background-image: url(nav_icons/icons.png);
  72. 	background-repeat: no-repeat;
  73. 	background-position: center center;
  74. }
  75. .navigation li a em.psd {
  76. 	background-image: url(nav_icons/icons.png);
  77. 	background-repeat: no-repeat;
  78. 	background-position: center center;
  79. }
  80. .navigation li a em.tutorials {
  81. 	background-image: url(nav_icons/icons.png);
  82. 	background-repeat: no-repeat;
  83. 	background-position: center center;
  84. }
  85. .navigation li a em.shop {
  86. 	background-image: url(nav_icons/icons.png);
  87. 	background-repeat: no-repeat;
  88. 	background-position: center center;
  89. }
  90. .navigation li a em.contact {
  91. 	background-image: url(nav_icons/icons.png);
  92. 	background-repeat: no-repeat;
  93. 	background-position: center center;
  94. }
[HTML] pobierz, plaintext


Za pomoc z góry dziękuje smile.gif
zeten
2.08.2009, 16:09:38
Nie chce mi się czytać całego kodu. Do wyśrodkowanie może Ci się przyda zapis margin-left: auto; margin-right: auto;
moonsterr
2.08.2009, 16:17:50
Nie pomogło dałem wszędzie i nic
Fifi209
2.08.2009, 16:20:46
Zamknij znacznik p dopiero po menu. Może to coś pomoże. haha.gif
Daiquiri
2.08.2009, 16:32:34
HTML:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>strona</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  8. <body>
  9. <p align="center"> <img src="image_top.jpg" alt="" width="800" height="250" /><br />
  10. </p>
  11.  
  12.  
  13. <div class="wyrowanie">
  14. <ul class="navigation">
  15. <li><a href="http://www.hv-designs.co.uk"><em class="home"></em><b>O mnie</b></a></li>
  16. <li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="templates"></em><b>Deekay</b></a></li>
  17. <li><a href="http://www.sb-designs.co.uk"><em class="psd"></em><b>Download</b></a></li>
  18. <li><a href="http://www.hv-designs.co.uk"><em class="tutorials"></em><b>Contact</b></a></li>
  19. <li><a href="http://www.hv-designs.co.uk/hv_shop"><em class="shop"></em><b>Linki</b></a></li>
  20. <li><a href="http://www.hv-designs.co.uk"><em class="contact"></em><b>dodatkowo</b></a></li>
  21. </ul>
  22. </div>
  23.  
  24. </body>
  25. </html>
[HTML] pobierz, plaintext


CSS: 
[HTML] pobierz, plaintext 
  1. body {
  2. margin-left: 0px;
  3. margin-top: 0px;
  4. margin-right: 0px;
  5. margin-bottom: 0px;
  6. background-color: #000000;
  7. }
  8.  
  9.  
  10. body,td,th {
  11. color: #FFFFFF;
  12. }
  13.  
  14. .style1 {
  15. font-size: 36px;
  16. font-weight: bold;
  17. }
  18.  
  19.  
  20. .navigation {
  21. padding:0 0 0 20px;
  22. margin:0;
  23. list-style:none;
  24. height:40px;
  25. background:#1841c8 url(navigation/nav_background.gif);
  26. }
  27. .navigation li {
  28. float:left;
  29. }
  30. .navigation li a {
  31. display:block;
  32. float:left;
  33. height:40px;
  34. line-height:40px;
  35. color:#FFFFFF;
  36. text-decoration:none;
  37. font-family:arial, verdana, sans-serif;
  38. text-align:center;
  39. padding:0 0 0 10px;
  40. cursor:pointer;
  41. font-size:11px;
  42. }
  43. .navigation li a b {
  44. float:left;
  45. display:block;
  46. padding:0 16px 0 8px;
  47. }
  48. .navigation li.current a {
  49. color:#FFFFFF;
  50. background:url(navigation/nav_hover.gif);
  51. }
  52. .navigation li a:hover {
  53. color:#00CCFF;
  54. background: url(navigation/nav_hover.gif);
  55. }
  56. .navigation li a em {
  57. display:block;
  58. float:left;
  59. width:30px;
  60. height:40px;
  61. }
  62.  
  63.  
  64.  
  65. .navigation li a em.home {
  66. background-image: url(nav_icons/icons.png);
  67. background-repeat: no-repeat;
  68. background-position: center center;
  69. }
  70. .navigation li a em.templates {
  71. background-image: url(nav_icons/icons.png);
  72. background-repeat: no-repeat;
  73. background-position: center center;
  74. }
  75. .navigation li a em.psd {
  76. background-image: url(nav_icons/icons.png);
  77. background-repeat: no-repeat;
  78. background-position: center center;
  79. }
  80. .navigation li a em.tutorials {
  81. background-image: url(nav_icons/icons.png);
  82. background-repeat: no-repeat;
  83. background-position: center center;
  84. }
  85. .navigation li a em.shop {
  86. background-image: url(nav_icons/icons.png);
  87. background-repeat: no-repeat;
  88. background-position: center center;
  89. }
  90. .navigation li a em.contact {
  91. background-image: url(nav_icons/icons.png);
  92. background-repeat: no-repeat;
  93. background-position: center center;
  94. }
  95.  
  96.  
  97. div.wyrowanie {
  98.     width: 800px;
  99.     margin: 0 auto;
  100. }
[HTML] pobierz, plaintext


Mam nadzieję, ze to miałeś na myśli.
moonsterr
2.08.2009, 16:33:43
Niestety nie pomogło to pewnie w css trzeba coś zrobić
Daiquiri
2.08.2009, 16:35:18
A pod jaką przeglądarką? U mnie pod FF działa (nie mam teraz dostępu do IE).

Owszem do CSSa dodałam ostatniego DIVa "wyrownanie".
moonsterr
2.08.2009, 16:52:58
hmm coś jest nie tak kopiuje ten kod css do notatnika a on nie działa
Daiquiri
2.08.2009, 16:53:17
Mój błąd! Dodałam Ci w imporcie stylu style.css a Ty miałeś styles.css - być może nie importujesz teraz tego stylu (o ile skopiowałeś całość do swojego pliku).

W innym przypadku ja widzę na środeczku szeroki na 800px niebieski pasek z menu party.gif
moonsterr
2.08.2009, 17:01:33
Dzięki wielkie!!!!!!!! Już duży krok do przodu aaevil.gif

Teraz muszę tak zrobić żeby te napisy były na środku a one są tak z 40 pixeli z lewej strony a ja bym chciał na środku biggrin.gif a i jak w temacie na początku jeszcze że, jak jest obrazek a pod nim menu to żeby nie było żadnego odstępu smile.gif
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.