навигация c помошью div

[rxp]

Добрый день форумчане пытаюсь выровнять в div-ах навигацию не получается ровно выровнять div относительно друг друга.

Я пробовал :

1)Каждое меню заключить в div и выровнять их друг относительно друга в css

.nav2 {

position: relative;

padding: 10px;

height: 29px;

width: 165px;

} итд (nav1....)

Выровнять можно , но по вертикали все съезжает(div относительно diva)

2)Вторая идея была div основной а внутри в него менюшки , каждая в своем dive.

(не пробовал еще)

Посоветуйте как в div вы бы решили эту задачу

Как сейчас

Как хочу сделать

Edited June 2, 2011 by rxp

[bref]

Задайте дивам ширину так чтобы в строке помещалось только 3 блока и нижние отступы.

А вообще я бы такое сделал списком или таблицой.

Edited June 2, 2011 by bref

[rxp]

Задайте дивам ширину так чтобы в строке помещалось только 3 блока и нижние отступы.

А вообще я бы такое сделал списком или таблицой.

А почему таблицей лучше? Я так понимаю объединять их в общий div не нужно?

[Vlad]

Решений, как обычно, несколько.

1. Таблица

2. Задать блокам одинаковую ширину и высоту, выстраивать через float

3. Для блоков использовать inline-block и выравнивание через vertical-align. Если картинки разной высоты, то наилучший способ. Если одинаково, то второй метод используется чаще.

[psywalker]

3. Для блоков использовать inline-block и выравнивание через vertical-align. Если картинки разной высоты, то наилучший способ. Если одинаково, то второй метод используется чаще.

Присоединяюсь именно к этому варианту, считаю, что он здесь наиболее уместен.

[rxp]

Решений, как обычно, несколько.

1. Таблица

2. Задать блокам одинаковую ширину и высоту, выстраивать через float

3. Для блоков использовать inline-block и выравнивание через vertical-align. Если картинки разной высоты, то наилучший способ. Если одинаково, то второй метод используется чаще.

Спасибо ,теперь понятно!!!

[rxp]

Ой! забыл спросить они теперь у меня стали в один ряд.

.nav1 {

border: 1px solid #F61F1F;

position:relative;

width: 165px;

height: 29px;

display: inline-block;

}

.nav2 {

border: 1px solid #F61F1F;

position: relative;

width: 165px;

height: 29px;

display: inline-block;

left:20%;

}

.nav3 {

border: 1px solid #F61F1F;

position:relative;

width: 165px;

height: 29px;

display: inline-block;

left:40%;

}

.nav4 {

border: 1px solid #F61F1F;

position:relative;

width: 165px;

height: 29px;

display: inline-block;

}

.nav5 {

border: 1px solid #F61F1F;

position:relative;

width: 165px;

height: 29px;

display: inline-block;

left:40%;

}

Хотя 4 и 5 нужны уже во втором ряду. Как их сдвинуть вниз?

Edited June 2, 2011 by rxp

[Softlink]

Ой! забыл спросить они теперь у меня стали в один ряд.

.nav1 {
border: 1px solid #F61F1F;
position:relative;  
width: 165px;
height: 29px;
display: inline-block;
}


.nav2 {
border: 1px solid #F61F1F;
position: relative;
width: 165px;
height: 29px;
display: inline-block;
left:20%;
}



.nav3 {
border: 1px solid #F61F1F;
position:relative;
width: 165px;
height: 29px;
display: inline-block;
left:40%;
}

.nav4 {
border: 1px solid #F61F1F;
position:relative;
width: 165px;
height: 29px;
display: inline-block;
}



.nav5 {
border: 1px solid #F61F1F;
position:relative;
width: 165px;
height: 29px;
display: inline-block;
left:40%;
}

Хотя 4 и 5 нужны уже во втором ряду. Как их сдвинуть вниз?

для каждой группы\строки сделайте обертку - родительский див

[rxp]

Ой! забыл спросить они теперь у меня стали в один ряд.

.nav1 {
border: 1px solid #F61F1F;
position:relative;  
width: 165px;
height: 29px;
display: inline-block;
}


.nav2 {
border: 1px solid #F61F1F;
position: relative;
width: 165px;
height: 29px;
display: inline-block;
left:20%;
}



.nav3 {
border: 1px solid #F61F1F;
position:relative;
width: 165px;
height: 29px;
display: inline-block;
left:40%;
}

.nav4 {
border: 1px solid #F61F1F;
position:relative;
width: 165px;
height: 29px;
display: inline-block;
}



.nav5 {
border: 1px solid #F61F1F;
position:relative;
width: 165px;
height: 29px;
display: inline-block;
left:40%;
}

Хотя 4 и 5 нужны уже во втором ряду. Как их сдвинуть вниз?

для каждой группы\строки сделайте обертку - родительский див

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

[psywalker]

rxp

В следующий раз код помещай в спец. теги для этого. Пока предупреждение!

[rxp]

rxp

В следующий раз код помещай в спец. теги для этого. Пока предупреждение!

извиняюсь , если честно искал их. Но в итоге решил что их нет

[psywalker]

rxp

В следующий раз код помещай в спец. теги для этого. Пока предупреждение!

извиняюсь , если честно искал их. Но в итоге решил что их нет

http://screencast.com/t/8jkqnCE9s

[rxp]

rxp

В следующий раз код помещай в спец. теги для этого. Пока предупреждение!

извиняюсь , если честно искал их. Но в итоге решил что их нет

http://screencast.com/t/8jkqnCE9s

ок понял!