Двухуровневая навигация

[Joxter]

Привет, вот навигация должна состоять из 2х строк в блоке... Одна слегка выпирать на верх, другая выпирать вниз)

вот html

Спойлер

<div id="navig">
    <ul id="knoptop">
    <li><a href="#">_1111</a></li>
    <li><a href="#">_22222</a></li>
    <li><a href="#">_3333333</a></li>
    <li><a href="#">_1241</a></li>
    <li><a href="#">_22</a></li>
    </ul>  

<ul id="knop">
    <li><a href="#">1111</a></li>
    <li><a href="#">22222</a></li>
    <li><a href="#">3333333</a></li>
    <li><a href="#">222</a></li>
    <li><a href="#">33333</a></li>
    </ul>

</div>

вот css

Спойлер

#navig {
	float:left;
	width:600px;
	border:1px solid #3F0;
	margin-left:50px;
	height:90px;
	margin-top:20px;
}

#knoptop {
    list-style: none; 
    margin: 0; 
    padding: 0;
    font-family: Arial, sans-serif; 
    font-size: 10pt; 	
	position:relative;
	top:-10px;
	left:180px;
	width:390px;
	z-index:1;
}

#knop {
	list-style: none;
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif; 
    font-size: 10pt; /	
	width:450px;
	position:relative;
	top:70px;
	left:0px;
	z-index:1;
}
	
ul li  {
	float:left;
	margin-left:15px;
}



li a {
	display:block;
	padding: 5px;
	text-decoration: none;
	color:#3F0;
	border: 1px solid #ccc;
	background-color: #f0f0f0;
	border-left: none;

}

LI A:hover {
    color: #ffe; 
    background-color: #5488af; 
}

проблема в

...
ul li  {
	float:left;
...

если в первом списке длинна всех ссылок меньше чем длинна блоков, то ссылки из второго списка начинают ставиться сразу после последней из перового списка... а должны четко с новой строки) пробовал разрыв строки, добавление еще одного блока посередине, думаю только таблица поможет, но надеюсь есть решение попроще) Спасибо)

 

[tigra60]

Общий принцип таков:
обеим спискам задаете абсолютную позицию. А для того, чтобы эта позиция отсчитывалась от блока, а не от всего экрана, задаем этому блоку относительную позицию.
Теперь несколько "зачем?":
1. Зачем блоку float:left?
2. Зачем спискам z-index?
3. Зачем ссылкам display:block?

Рекомендую вот такой CSS:

#navig {
position:relative;		
width:600px;
height:90px;
border:1px solid #3F0;
margin-left:50px;
margin-top:20px;
font-family: Arial, sans-serif; 
font-size: 10pt;
}
#knoptop {
list-style: none; 
margin: 0; 
padding: 0;
width:390px;
position:absolute;
top:-10px;
left:180px;
}
#knop {
list-style: none;
margin: 0; 
padding: 0; 
width:450px;
position:absolute;
top:80px;
}
li  {
float:left;
margin-left:15px;
}
li a {
padding: 5px;
text-decoration: none;
color:#3F0;
border: 1px solid #ccc;
background-color: #f0f0f0;
border-left: none;
}
li a:hover {
color: #ffe; 
background-color: #5488af; 
}

И немножко в догонку:
1. Зеленый цвет очень плохо видно.
2. У Вас в CSS вкралась ошибочка: в блоке #knop после font-size: 10pt; стоит слэш, вероятно остаток от комментария. Так что все стили для этого элемента после слеша анулированы.

Удачи!

 

[Joxter]

Спасибо, сейчас попробую.

Теперь несколько "зачем?":
1. Зачем блоку float:left?
2. Зачем спискам z-index?
3. Зачем ссылкам display:block?

У меня ест сайтик, вот хочу его обновить, только полностью с нуля написать.(тот был мой первый, это второй будет)
1. по моей задумке пока он должен быть так, еще буду дорабатывать.
2. чтобы было видно что они поверх блока(в блоке потом все равно картинка будет), без z-index думал так не получился, надо потестить.
3. для красоты^^

1. Зеленый цвет очень плохо видно.
2. У Вас в CSS вкралась ошибочка: в блоке #knop после font-size: 10pt; стоит слэш, вероятно остаток от комментария. Так что все стили для этого элемента после слеша анулированы.

1. я вообще хотел просто набросать чтоб работало, а цвета контрастные выбирал да и вообще о них не думал.
2. да, недочет, Спасибо)

tigra60, Спасибо за помощь, работает!

 

[tigra60]

1. По поводу float:left
Будьте очень внимательны с плавающими блоками, малейший недосмотр и вся верстка летит к чертям!
Всегда подчищайте за плавающими:

<div style="clear:both"></div>

2. По поводу z-index
Если у Вас по тексту идет элемент А, а затем элемент Б, то Б будет всегда выше А. Вот если вам нужно, чтобы А перекрывал Б, тогда нужно или писать его после Б, или использовать z-index.
3. По поводу a {display:block}
W3C запрещает вложение блоковых элементов в строчные.
4. Если я Вам помог, можете добавить "плюсик".

Удачи!