Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Menu
DeReK_PL
post
Post #1





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 1.06.2011

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

Witam!
Zrobiłem sobie proste menu w CSS:
(IMG:http://img98.imageshack.us/img98/8007/19337512.png)
Ten prostokącik przy każdym z odnośników zrobiłem za pomocą obramowanie z lewej strony (border-left: 5px solid gray)
A jak mogę zrobić żeby zamiast tych tych prostokącików był kwadracik o wymiarach np. 3x3px?
Oto kod menu:
[HTML] pobierz, plaintext 
  1. #menu {
  2. border-bottom: 1px solid gray;
  3. }
  4.  
  5. #menu ul, ul li {
  6. 	display: block;
  7. }
  8.  
  9. #menu ul {
  10. 	width: 150px;
  11. 	padding: 0;
  12. }
  13.  
  14. #menu ul a:link, ul a:visited {
  15. 	display: block;
  16. 	width: 150px;
  17. 	text-decoration: none;
  18. 	padding: 3px;
  19. 	font-weight: bold;
  20. 	color: black;
  21. 	border-left: 5px solid gray;
  22. }
  23.  
  24. #menu ul a:hover {
  25. 	width: 150px;
  26. 	color: gray;
  27. 	border-left: 5px solid gray;
  28. }
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
aeaeae
post
Post #2





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

Koniecznie 3x3? Łatwym rozwiązaniem byłoby: list-style-type:square
Go to the top of the page
+Quote Post
DeReK_PL
post
Post #3





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 1.06.2011

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

Nawet nie słyszałem o czymś takim ;p
Po prostu chcę żeby to jakoś wyglądało a nie jedna ciągła linia.
.......................................................
Albo nie umiem tego użyć albo mi nie działa list-style-type:square

Ten post edytował DeReK_PL 9.06.2011, 13:56:39
Go to the top of the page
+Quote Post
aeaeae
post
Post #4





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

[HTML] pobierz, plaintext 
  1. <ul style="list-style-type:square">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. <ul>
[HTML] pobierz, plaintext


Tak dobrze? Jeśli nie, to wrzuć html.

Edycja:
http://www.kurshtml.edu.pl/css/typ_stylu,wykazy.html

Ten post edytował aeaeae 9.06.2011, 14:00:59
Go to the top of the page
+Quote Post
DeReK_PL
post
Post #5





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 1.06.2011

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

nic to nie dało, dodam że cała stronka na div'ach robiona
I nie dało by się jednak tego kwadrata 3x3px?
Go to the top of the page
+Quote Post
aeaeae
post
Post #6





Grupa: Zarejestrowani
Postów: 117
Pomógł: 23
Dołączył: 5.03.2011

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

1. ul jest domyślnie elementem blokowym, nie trzeba tego podawać jeśli wcześniej tego nie zmieniałeś
2. To, że nie wyświetlają się kwadraty to wina #menu ul li{display: block} oraz #menu ul{padding: 0}
3. Jeśli kwadraty mają mieć koniecznie 3px x 3px to:
[CSS] pobierz, plaintext 
  1. a{display:block;text-decoration:none}
  2. ul{width:150px;margin:0;padding:0}
  3. ul a:link,ul a:visited {font-weight:bold;color:black}
  4. ul a:hover{color:gray}
  5. li{display:block}
  6. li div{float:left;width:3px;height:3px;margin-top:10px;margin-right:4px;background:red}
  7. a:hover div{background:blue}
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. </head>
  5. <body>
  6. <ul>
  7. <li><a href=""><div></div>1</a></li>
  8. <li><a href=""><div></div>2</a></li>
  9. <li><a href=""><div></div>3</a></li>
  10. <li><a href=""><div></div>4</a></li>
  11. <ul>
  12. </body>
  13. </html>
[HTML] pobierz, plaintext
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: 2.10.2025 - 21:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn