Резиновая вёрстка

[Dimanchik87]

Сложность(для меня)состоит в следующем:

надо сделать вот так http://ifotki.info/12/73628095a1a76f6604d94e349a1dedd7b279f8138503600.jpg.html макет нужен резиновый.Т.е. если я правильно понимаю размеры закладок нужно задать в процентах,но как угадать,чтобы они растянулись на всю ширину центрального блока.Решение необходимо только средствами Html

и Css

P.s.есть вероятность,что я чего-то не догоняю

[psics]

думаю в твоем случае не было бы желательно делать вкладки резиновыми, лучше сделать фиксированными. Почему? Будет короткое слово во вкладке, а экран монитора пользователя большой, будет огроменная вкладка по длине и почти пустая.

А если решишь делать резиновыми вкладки, я думаю следует взать 1/7 от ширины - 15% приблизительно (6 вкладок + отступы). Могу ошибаться, но вообще фиксированная ширина для сайта мне кажется предпочтительнее...

[Dimanchik87]

думаю в твоем случае не было бы желательно делать вкладки резиновыми, лучше сделать фиксированными. Почему? Будет короткое слово во вкладке, а экран монитора пользователя большой, будет огроменная вкладка по длине и почти пустая.

А если решишь делать резиновыми вкладки, я думаю следует взать 1/7 от ширины - 15% приблизительно (6 вкладок + отступы). Могу ошибаться, но вообще фиксированная ширина для сайта мне кажется предпочтительнее...

Я пытался задавть вкладки шириной 15% и отступы по 2%,вродев сумме 100%,но почему-то не влезает последний блок...

Не понимаю почему,ширина же должна браться от родителя,у него задана ширина 60% в свою очередь у body 100% в теории всё должно работать,а на практике нет.

[npofopr]

http://www.xiper.net/collect/html-and-css-tricks/navigation/rubber-menu.html

для текста внутри делаете text-overflow: ellipsis

[Vadimka]

при резиновой верстке стоит обращать внимание на такие моменты: ширина задаётся в процентах, а рамки задаются в px если есть. отсюда могут быть проблемы с тем что что-то не уместилось. например как у вас 7 вкладок 15% ширина + 2 отступ, и того 17% на вкладку, 17*6=102 уже перебор, через last-of-type можно убрать отступ у последнего, тогда ровно 100% НО!!! если у вас у каждой вкладки по 1px-ной рамки, то это к 100% + 14px лишних, отсюда и возможно и съезжает.

[psics]

Попробуй задать по 1% я думаю ничего страшного если 5% будут ничем не заняты

[Dimanchik87]

Всем огромное спасибо.Нашёл вариант

#active{

margin-left:0;

}/*первый пункт*/

.center_menu{

width:14%;

padding:1px;

border:2px solid black;

background:#8bb69f;

float:left;

margin-left:2%;

text-align:center;

}/*все пункты*/

#last{

float:right;

margin-left:auto;/*последний*/

Edited December 18, 2012 by Dimanchik87