Chesse

Огромное спасибо!

Я пытаюсь сделать меню заезжающих друг на друга закладок, но у меня не получается сделать их по размеру блока. Вот так это должно выглядень: Видите, одна закладка как бы заезжает на другую. И при этом они равномерно распределены по блоку. А у меня происходит смещение. Увеличение размеров блоков-закладок или изменение самого блока результатов не принесли. У меня получается так: Уже всё перепробовала, не получается сделать, как надо. Может я вообще не в ту степь ушла, но помогите, пожалуйста, сделать меню как надо. Код html: <var> <!-- 2 --> <div id="m1"> <!-- 2.a --> Главная <br/> страница </div> <div id="m2"> <!-- 2.b --> Блок 1 </div> <div id="m3"> <!-- 2.c --> Блок 2 </div> <div id="m4"> <!-- 2.d --> Блок 3 </div> <div id="m5"> <!-- 2.e --> Блок 4 </div> <div id="m6"> <!-- 2.f --> Блок 5 </div> <div id="m7"> <!-- 2.g --> Блок 6 </div> <div id="m8"> <!-- 2.h --> Блок 7 </div> <div id="m9"> <!-- 2.h --> Блок 8 </div></var><div id="content"> <!-- 3 --> <div id="contex_meny"> <!-- 3.a --> </div> <div id="text"> <!-- 3.b --> </div> </div> Код css: var { display: block; width: 840px; height: 45px; text-align: center; font-style: normal; font-weight: bold; text-shadow: white 0 1px 0, white 0 -1px 0, white -1px 1px 0, white 1px -1px 0; vertical-align: center; margin:0 auto;} #m1 { width: 11%; height: 100%; float:left; background-color: red; -moz-border-radius: 10px 20px 0 0; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 10px 20px 0 0; /* закругл. для старых Chrome и Safari */ -khtml-border-radius: 10px 20px 0 0; /* закр.для брауз.Konquerer сист. Linux */ border-radius: 10px 20px 0 0; /* закругление углов для всех, кто понимает */ position: relative; } #m2 { width: 11%; height: 45px; float:left; background-color: #ff8c00; line-height:37px; position: relative; right: 20px; } #m3 { width: 11%; height: 100%; float: left; background-color: yellow; line-height: 37px; position: relative; right: 40px; } #m4 { width: 12%; height: 100%; float: left; background-color: #00ff00; position: relative; right: 60px; } #m5 { width: 11%; height: 100%; float: left; background-color: #00bfff; position: relative; right: 80px; } #m6 { width: 11%; height: 100%; float: left; background-color: #0000ff; position: relative; right: 100px; } #m7 { width: 11%; height: 100%; float: left; background-color: #9400d3; line-height:37px; position: relative; right: 120px; } #m8 { width: 11%; height: 100%; float: left; background-color: #ff1493; line-height:37px; position: relative; right: 140px; } #m9 { width: 11%; height: 100%; float: left; background-color: red; position: relative; right: 160px; } #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{ -moz-border-radius: 0 20px 0 0; /* закругление для старых Mozilla Firefox */ -webkit-border-radius: 0 20px 0 0; /* закругл. для старых Chrome и Safari */ -khtml-border-radius: 0 20px 0 0; /* закругл.для брауз.Konquerer сист. Linux */ border-radius: 0 20px 0 0; } #m1 { z-index: 10; } #m2 { z-index: 9; } #m3 { z-index: 8; } #m4 { z-index: 7; } #m5 { z-index: 6; } #m6 { z-index: 5; } #m7 { z-index: 4; } #m8 { z-index: 3; } #m9 { z-index: 2; }#content { float:none; display: block; margin:0 auto; width: 840px;} #contex_meny { float:none; background-color: #ff8c00; height: 25px; text-align: center; color: white; } #text { border: 3px solid #ff8c00; padding: 10px; }Перепробовала много всего, это последняя вариация при попытке решить проблему и такая же безуспешная. Что я делаю не так?