Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Wyśrodkowanie poziomego menu css
moonsterr
post
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 2.08.2009

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

Wiem, że to już było ale tamto mi nie pomagało (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 9)
zeten
post
Post #2





Grupa: Zarejestrowani
Postów: 36
Pomógł: 2
Dołączył: 1.08.2009
Skąd: Katowice, Rybnik

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

Nie chce mi się czytać całego kodu. Do wyśrodkowanie może Ci się przyda zapis margin-left: auto; margin-right: auto;
Go to the top of the page
+Quote Post
moonsterr
post
Post #3





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 2.08.2009

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

Nie pomogło dałem wszędzie i nic
Go to the top of the page
+Quote Post
Fifi209
post
Post #4





Grupa: Zarejestrowani
Postów: 4 655
Pomógł: 556
Dołączył: 17.03.2009
Skąd: Katowice

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

Zamknij znacznik p dopiero po menu. Może to coś pomoże. (IMG:http://forum.php.pl/style_emoticons/default/haha.gif)
Go to the top of the page
+Quote Post
Daiquiri
post
Post #5





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
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.
Go to the top of the page
+Quote Post
moonsterr
post
Post #6





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 2.08.2009

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

Niestety nie pomogło to pewnie w css trzeba coś zrobić
Go to the top of the page
+Quote Post
Daiquiri
post
Post #7





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
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".
Go to the top of the page
+Quote Post
moonsterr
post
Post #8





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 2.08.2009

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

hmm coś jest nie tak kopiuje ten kod css do notatnika a on nie działa
Go to the top of the page
+Quote Post
Daiquiri
post
Post #9





Grupa: Administratorzy
Postów: 1 552
Pomógł: 211
Dołączył: 7.07.2009
Skąd: NJ
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 (IMG:http://forum.php.pl/style_emoticons/default/party.gif)
Go to the top of the page
+Quote Post
moonsterr
post
Post #10





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 2.08.2009

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

Dzięki wielkie!!!!!!!! Już duży krok do przodu (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował moonsterr 3.08.2009, 06:17:33
Go to the top of the page
+Quote Post
« 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 · Linearny+ · Przełącz na: Drzewo

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

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