Question

Приветствую!

Опробовал на "вкладки", настроил все вот тут http://1221proba.ucoz.com/index/0-2

Далее скопировал весь код на нужный сайт, вот сюда http://www.uyut-nsk.ru/

Вкладки сместились вправо, одна ушла вниз.

Подскажите, плз как выровнять! методом тыка не могу найти причину(

 

/* TabControl Start */ 
p {padding: 7px 0;} 
.sectiontable { 
 width: 100%; 
 background: #ffffff; 
 margin: 0 0 30px; 
} 
ul.tabs { 
 height: 28px; 
 line-height: 25px; 
 list-style: none; 
 border-bottom: 1px solid #DDD; 
 background: #FFF; 
} 
.tabs li { 
 float: left; 
 display: inline; 
 margin: 0 1px -1px 0; 
 padding: 0 4px 1px; 
 color: #777; 
 cursor: pointer; 
 background: #F9F9F9; 
 border: 1px solid #E4E4E4; 
 border-bottom: 1px solid #F9F9F9; 
 position: relative; 
} 
.tabs li:hover, 
.vertical .tabs li:hover { 
 color: #030303; 
 padding: 0 4px; 
 background: #ffffff; 
 border: 1px solid #66a312; 
} 
.tabs li.current { 
 color: #444; 
 background: #ffffff; 
 padding: 0 13px 2px; 
 border: 1px solid #D4D4D4; 
 border-bottom: 1px solid #EFEFEF; 
} 
.box { 
 display: none; 
 border: 1px solid #D4D4D4; 
 border-width: 0 1px 1px; 
 background: #ffffff; 
 padding: 0 12px; 
} 
.box.visible { 
 display: block; 
} 

.section.vertical { 
 width: 440px; 
 border-left: 160px solid #FFF; 
} 
.vertical .tabs { 
 width: 160px; 
 float: left; 
 display: inline; 
 margin: 0 0 0 -160px; 
} 
.vertical .tabs li { 
 padding: 0 13px; 
 margin: 0 0 1px; 
 border: 1px solid #E4E4E4; 
 border-right: 1px solid #F9F9F9; 
 width: 132px; 
 height: 25px; 
} 
.vertical .tabs li:hover { 
 width: 131px; 
} 
.vertical .tabs li.current { 
 width: 133px; 
 color: #444; 
 background: #ffffff; 
 border: 1px solid #D4D4D4; 
 border-right: 1px solid #EFEFEF; 
 margin-right: -1px; 
} 
.vertical .box { 
 border-width: 1px; 
} 
/* TabControl End */

 

Answer 1

Причина в размере шрифта вкладок, на пробном он меньше и все вмещается, на действующем шрифт крупнее и не вместились.

В стилях:

.tabs li { 
 font-size: 12px;
 float: left; 
 display: inline; 
 margin: 0 1px -1px 0; 
 padding: 0 4px 1px; 
 color: #777; 
 cursor: pointer; 
 background: #F9F9F9; 
 border: 1px solid #E4E4E4; 
 border-bottom: 1px solid #F9F9F9; 
 position: relative; 
}

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

Comments

Помогло, спасибо!

Но вкладки все-равно почему то по центру равняются на основном сайте, где то отступ мешается. Не подскажете где?

---

найдите стили:

ul.tabs { 
 margin: 0 auto!important;
 height: 28px; 
 line-height: 25px; 
 list-style: none; 
 border-bottom: 1px solid #DDD; 
 background: #FFF; 
}

добавьте красное, просто ваши другие стили немного конфликтовали с табовскими, с помощью маргина мы эту проблему решим.

---

Приогромнейшее спасибо! :)