Forum PHP.pl > [CSS] Menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS] Menu

DeReK_PL

9.06.2011, 13:28:36

Witam!
Zrobiłem sobie proste menu w CSS:

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 
#menu {
border-bottom: 1px solid gray;
}
 
#menu ul, ul li {
	display: block;
}
 
#menu ul {
	width: 150px;
	padding: 0;
}
 
#menu ul a:link, ul a:visited {
	display: block;
	width: 150px;
	text-decoration: none;
	padding: 3px;
	font-weight: bold;
	color: black;
	border-left: 5px solid gray;
}
 
#menu ul a:hover {
	width: 150px;
	color: gray;
	border-left: 5px solid gray;
}
[HTML] pobierz, plaintext

aeaeae

9.06.2011, 13:35:47

Koniecznie 3x3? Łatwym rozwiązaniem byłoby: list-style-type:square

DeReK_PL

9.06.2011, 13:47:18

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

aeaeae

9.06.2011, 13:59:21

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

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

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

DeReK_PL

9.06.2011, 14:06:55

nic to nie dało, dodam że cała stronka na div'ach robiona
I nie dało by się jednak tego kwadrata 3x3px?

aeaeae

9.06.2011, 14:54:57

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 
a{display:block;text-decoration:none}
ul{width:150px;margin:0;padding:0}
ul a:link,ul a:visited {font-weight:bold;color:black}
ul a:hover{color:gray}
li{display:block}
li div{float:left;width:3px;height:3px;margin-top:10px;margin-right:4px;background:red}
a:hover div{background:blue}
[CSS] pobierz, plaintext

[HTML] pobierz, plaintext 
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a href=""><div></div>1</a></li>
<li><a href=""><div></div>2</a></li>
<li><a href=""><div></div>3</a></li>
<li><a href=""><div></div>4</a></li>
<ul>
</body>
</html>
[HTML] pobierz, plaintext

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.