Табы в новом профиле
От: adontz Грузия http://adontz.wordpress.com/
Дата: 24.08.12 11:14
Оценка: +1
Новый профиль замечательный, но можно чтобы выделенный таб был визуально выше остальных?
A journey of a thousand miles must begin with a single step © Lau Tsu
Re: Табы в новом профиле
От: AndrewVK Россия http://blogs.rsdn.org/avk
Дата: 24.08.12 11:28
Оценка:
Здравствуйте, adontz, Вы писали:

A>Новый профиль замечательный, но можно чтобы выделенный таб был визуально выше остальных?


Нарисуй разметку. Я не спец в этом, а на просьбу о помощи никто не откликнулся.
... << RSDN@Home 1.2.0 alpha 5 rev. 65 on Windows 7 6.1.7601.65536>>
AVK Blog
Re[2]: Табы в новом профиле
От: adontz Грузия http://adontz.wordpress.com/
Дата: 24.08.12 12:26
Оценка:
Здравствуйте, AndrewVK, Вы писали:

AVK>Нарисуй разметку. Я не спец в этом, а на просьбу о помощи никто не откликнулся.


AccountInfo.css
  Скрытый текст
body {
color: black;
font-size: 13px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
}

h1 {
font-size: 180%;
margin-bottom: 0
}

div#body {
width: 1070px;
padding: 10px;
margin: 0 auto;
}

div#header {
width: 1070px;
border-bottom: 1px solid #4580A0;
color: #4580A0;
}

span#header-nick {
font-size: 24px;
font-weight: bolder;
margin-right: 20px;
}

.header-refs {
font-size: 11px;
}

img.header-refs {
vertical-align: text-bottom;
margin-left: 10px;
border: 0;
}

div#header-spacer {
height: 10px;
}

div#picture-box {
float: left;
margin-right: 10px;
}

div#rate-box {
text-align: center;
font-size: 15px;
padding: 5px 5px
}

div#tabs {
float: left;
width: 880px;
}

div#tabs-header {
height: 30px;
border-bottom: 1px solid #4580A0;
}

img#tab-loading-img {
position: relative;
left: 175px;
top: 50px;
}

div#data, .data-field, .data-value {
color: black;
}

td.data-field,td.data-value {
padding: 4px 10px;
font-size: 12px;
}

table.data {
border-spacing: 0
}

.data-field {
font-weight: normal;
color: #65a7cb;
}

td.data-field {
width: 170px;
border-right: 1px solid #4580A0;
text-align: left;
}

.note {
font-weight: normal;
color: gray;
}

div#self-descript {
clear: both;
border: 1px solid #4580A0;
position: absolute;
top: 230px;
width: 1030px;
}

/*!
* jQuery UI Tabs 1.8.22
*
* Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Licensed under MIT license.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Tabs#theming
*/

.ui-tabs {
padding: .2em;
position: relative;
zoom: 1;
} /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */

.ui-tabs .ui-tabs-nav {
margin: 0;
padding: .2em .2em 0;
}

.ui-tabs .ui-tabs-nav li {
border-bottom: 0 !important;
float: left;
list-style: none;
margin: 0 .2em 1px 0;
padding: 0;
position: relative;
top: 3px;
white-space: nowrap;
}

.ui-tabs .ui-tabs-nav li a {
float: left;
padding: 4px 16px;
text-decoration: none;
font-size: 14px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
margin-bottom: 4px;
padding-bottom: 1px;
top: 0px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
cursor: text;
border-top: 1px solid #4580A0;
border-left: 1px solid #4580A0;
border-right: 1px solid #4580A0;
border-bottom: 1px solid white;
color: #4587AB;
background-color: white;
height: 19px;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
cursor: pointer;
border-top: 1px solid #4580A0;
border-left: 1px solid #4580A0;
border-right: 1px solid #4580A0;
color: gray;
background-color: #cfe5f0;
height: 16px;
} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */

.ui-tabs .ui-tabs-panel {
background: none;
border-width: 0;
display: block;
padding: 3px 3px;
}

.ui-tabs .ui-tabs-hide {
display: none !important;
}
A journey of a thousand miles must begin with a single step © Lau Tsu
Re[3]: Табы в новом профиле
От: rameel https://github.com/rsdn/CodeJam
Дата: 24.08.12 13:23
Оценка: 15 (1)
Здравствуйте, adontz, Вы писали:

AVK>>Нарисуй разметку. Я не спец в этом, а на просьбу о помощи никто не откликнулся.


A>AccountInfo.css

  Скрытый текст
skipped

Не очень качественно — сместилась горизонтальная линия, и в выделенном табе есть зазор на стыке в левом нижнем углу.


Вот мое предложение, что нужно поправить в стилях:
.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    margin-bottom: 0;
    top: -4px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
    padding-top: 8px;
    height: 20px;
}

.ui-tabs .ui-tabs-panel {
    padding: 8px 3px 3px;
}

/* это чтобы верхняя разделительная линия была визуально одинаковой ширины, а то этот момент не очень аккуратно выглядит */
div#header {
    width: 1053px;
}


Выглядит будет так:


  AccountInfo.css (код полностью)
body {
    color: black;
    font-size: 13px;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
}

h1 {
    font-size: 180%;
    margin-bottom: 0
}

div#body {
    width: 1070px;
    padding: 10px;
    margin: 0 auto;
}

div#header {
    width: 1053px;
    border-bottom: 1px solid #4580A0;
    color: #4580A0;
}

span#header-nick {
    font-size: 24px;
    font-weight: bolder;
    margin-right: 20px;
}

.header-refs {
    font-size: 11px;
}

img.header-refs {
    vertical-align: text-bottom;
    margin-left: 10px;
    border: 0;
}

div#header-spacer {
    height: 10px;
}

div#picture-box {
    float: left;
    margin-right: 10px;
}

div#rate-box {
    text-align: center;
    font-size: 15px;
    padding: 5px 5px
}

div#tabs {
    float: left;
    width: 880px;
}

div#tabs-header {
    height: 30px;
    border-bottom: 1px solid #4580A0;
}

img#tab-loading-img {
    position: relative;
    left: 175px;
    top: 50px;
}

div#data, .data-field, .data-value {
    color: black;
}

td.data-field,td.data-value {
    padding: 4px 10px;
    font-size: 12px;
}

table.data {
    border-spacing: 0
}

.data-field {
    font-weight: normal;
    color: #65a7cb;
}

td.data-field {
    width: 170px;
    border-right: 1px solid #4580A0;
    text-align: left;
}

.note {
    font-weight: normal;
    color: gray;
}

div#self-descript {
    clear: both;
    border: 1px solid #4580A0;
    position: absolute;
    top: 230px;
    width: 1030px;
}

/*!
 * jQuery UI Tabs 1.8.22
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
* Licensed under MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tabs#theming
 */

.ui-tabs {
    padding: .2em;
    position: relative;
    zoom: 1;
} /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */

.ui-tabs .ui-tabs-nav {
    margin: 0;
    padding: .2em .2em 0;
}

.ui-tabs .ui-tabs-nav li {
    border-bottom: 0 !important;
    float: left;
    list-style: none;
    margin: 0 .2em 1px 0;
    padding: 0;
    position: relative;
    top: 0px;
    white-space: nowrap;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: 4px 16px;
    text-decoration: none;
    font-size: 14px;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    margin-bottom: 0;
    padding-bottom: 1px;
    top: -4px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: text;
    border-top: 1px solid #4580A0;
    border-left: 1px solid #4580A0;
    border-right: 1px solid #4580A0;
    color: #4587AB;
    background-color: white;
    padding-top: 8px;
    height: 20px;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
    border-top: 1px solid #4580A0;
    border-left: 1px solid #4580A0;
    border-right: 1px solid #4580A0;
    color: gray;
    background-color: #cfe5f0;
    height: 19px;
} /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */

.ui-tabs .ui-tabs-panel {
    background: none;
    border-width: 0;
    display: block;
    padding: 8px 3px 3px;
}

.ui-tabs .ui-tabs-hide {
     display: none !important;
}
... << RSDN@Home 1.2.0 alpha 5 rev. 66>>
Re[4]: Табы в новом профиле
От: AndrewVK Россия http://blogs.rsdn.org/avk
Дата: 24.08.12 22:09
Оценка:
Здравствуйте, rameel, Вы писали:

R>Вот мое предложение, что нужно поправить в стилях:


В IE9 как то не фонтан, ошибко на один пиксель. В Хроме нормально.
... << RSDN@Home 1.2.0 alpha 5 rev. 65 on Windows 7 6.1.7601.65536>>
AVK Blog
Re[5]: Табы в новом профиле
От: rameel https://github.com/rsdn/CodeJam
Дата: 25.08.12 11:27
Оценка:
Здравствуйте, AndrewVK, Вы писали:

AVK>В IE9 как то не фонтан, ошибко на один пиксель. В Хроме нормально.


И точно, да и в хроме косяк один вылез, плюс я еще в опере не проверял. К вечеру постараюсь сделать
... << RSDN@Home 1.2.0 alpha 5 rev. 66>>
 
Подождите ...
Wait...
Пока на собственное сообщение не было ответов, его можно удалить.