Проблем с меню

[dan4o]

http://web-tourist.net/login/login/view.php?st=2127
Правя от тозу урок 4тото меню но не ми излиза това което трябва
Как да го направя ?
Ето какизлиза при мен

Кода на менюто :

4 меню

1.Сложете следният код в css файла :
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}


2. Трябва да изтеглите тази картинка и да я сложите в директорията на index файла ви menu4.gif

3. Сложете този код в index файла ви. Той е главното ви меню. Заместете Link 1, Link 2 с вашите идей за менюто, а след a href сложете линка .
<div id="menu4">
<ul>
<li><a href="#1" title="Link 1">Link 1</a></li>
<li><a href="#2" title="Link 2">Link 2</a></li>
<li><a href="#3" title="Link 3">Link 3</a></li>
<li><a href="#4" title="Link 4">Link 4</a></li>
<li><a href="#5" title="Link 5">Link 5</a></li>
</ul>
</div>

 

[adrian]

#menu4 {
list-style: none;
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

 

[dan4o]

пак същата работа

 

[adrian]

#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}

#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

ul {
list-style: none;
}

 

[dan4o]

сега само черните точки се махнаха но очертанието си седи

 

[adrian]

#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-width: 1px;
}

#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(menu4.gif);
padding: 8px 0 0 10px;
}

#menu4 li a:hover {
color: #FFF;
background: url(menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

ul {
margin: 0px;
list-style: none;
}

Кода в червено оправя всичките ти проблеми Рамката става плътно до елементите и точките ги няма

border-size: 1px; го премахнах от кода, защото не можеше да се валидира.

Валидиран CSS
Демо

 

[dan4o]

Добре всичко стана но защо менюто ми е с около 50 пх по на дясно а не е залепено до началото на страницата ?

 

[adrian]

Помислих си, че и за това ще питаш, но ме мързеше да пиша

#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-width: 1px;
}

Кода в червено показва колко е външният отстъп от елемента
Ако го направиш на 0px ще е залепено в началото на страницата ти