YankovskyAndrey

Ищу хорошую компанию в лице дизайнера или .Net программиста склонного к дизайну для создания сайта ирландского паба в Питере. Silverlight и Html+Css. бюджет небольшой, но и работы немного. Одному скучно рисовать. пишите на YankovskyAndrey@gmail.com

спасибо, начинает проясняться с float'ами. хотя а хорошо ли это? я так понял, что это побочные эффекты блочной разметки. мне вообще сильно неприятны абсолютные значения. и вот с этим: уточняю: элементы стыкуются по левому краю, там где заканчивается один элемент, начинается другой. и говоря это, я имею ввиду ширину. |element1 float:left| <- |element2 float:left| <- |element3 float:left| так почему появляется зависимость от высоты элемента? зато в опере нормал) попробуйте выбрать первую вкладкую тогда две другие залезут на пиксель. можно ли это вылечить? смещение на пиксель вверх приводит к катастрофе, о которой мы уже говорили. но ведь есть же хак? должен быть)

не могли бы вы прояснить, как в вашем первом примере работает сдвиг паддинг маргин флоат я так понимаю все элементы с float:left позиционируются только относительно друг друга то же самое с float:right при этом им обоим наплевать на друг друга. то есть в вашем примере они как бы накладываются друг на друга, но вы сдвигаете того который right вниз на фиксированное число пикселей. я конечно не мастер, но после float'ов разметка на измене. любой отступ грозит обернуться геммороем я не понимаю этого .tab-btn { float: left; margin: -34px 10px 0 0; height: 24px; padding: 5px; } как позиционирование по горизонтали связано с высотой. если поменять табы накрывают друг друга залил последнюю версию(добавил ещё дефолтное значение. написано всё правильно, но в хроме ,например, не всегда работает). всё равно там есть заступ, который мне не убрать. всё как-то на честном слове держится

Круто! сейчас свою версию допилю! я по тому же пути шёл, но не знал о float: left и position: relative. при правильных анимациях не удавалось отобразить всё адекватно. по-моему интересно получилось. о применимости промолчим, да и не в этом же дело)

я вообще сильверлайтер. просто интересно)

нет проблем с их сайта пример, работает только под оперой я пока читаю

нашёл работающий пример разбираюсь. для хрома не пашет, под оперой красота. попробуйте собственно неудивительно devOpera домен))

кул. я просто не шарю в html. посмотри пожалуйста пятый пост(дерево из div), можно ли сделать так?

а текст? я ещё в первом посте выложил оба варианта, где либо меняется текст, либо анимируются табы. я пытаюсь заставить их работать вместе.

я с этого примера и вдохновился. НО я хочу чтобы вкладка оставалась нажатой, выбранной. для этого мне ховера не достаточно, мне нужен :target. в этом и проблема. то есть я хочу в этом примере например <li id="faq1"><a href="#faq1">Question 1</a></li> li:target { сдвинуть и изменить цвет } ловится первый id который появляется в документе

вот вот) Можно попробовать пойти немного другим путём. Нужно сделать разметку, в которой сам таб будет находится рядом с блоком. А потом показывать его через .tabItemContent: target > .blockname Правда что-то я не очень уверен, что получится создать такую удобную для CSS разметку. я так и делал сначала. схематично: <div class="tabControl"> <div class="tabItem" id="item1"> <div class="tabItemHeader"> </div> <div class="tabItemContent"> </div> </div> <div class="tabItem" id="item2"> <div class="tabItemHeader"> </div> <div class="tabItemContent"> </div> </div> <div class="tabItem" id="item3"> <div class="tabItemHeader"> </div> <div class="tabItemContent"> </div> </div> </div> но у меня не получилось правильно позиционировать вкладки. как бы заголовки идут в строчку, то есть как я понимаю именно у tabItem в таком случае должно быть проставлено display: inline. Но тогда вместо такого: |^|_|^|____ |..........| |__________| получается |^|_|^| |.| |.| |.|_|.| |_|_|_| ну я думаю вы поняли) я пару дней всего в Html, не понимаю наверное чего-то. вообще есть ещё всякие хитрые штуки типа ~ и + смахивает на регэкспы))) я попробовал, но как-то безуспешно. хорошая статья вообще надо разобраться как работают псевдо классы :hover :target и т.д.

мне надо чтобы и вкладки анимировались(они там смещаются вниз при выборе и меняют цвет), и при этом показывался соответствующий текст. у меня либо одно, либо другое. залил две картинки - как у меня это выглядит в хроме(мало ли у вас работает, а у меня нет) выбрана вторая вкладка, курсор наведён на четвёртую: анимируется вкладка, но текст не отображается наоборот

Всем привет! воодушевлённый этой статьёй, решил сделать свой таб контрол(ваш браузер должен поддерживать всякие модные штуки, эксплорер не покатит) мне нужно дважды обратиться к псевдо селектору :target. Сначала для того, чтобы применить стиль для выбранной вкладки: .tabItemHeader { -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; vertical-align: bottom; display: inline-block; margin: 5px 0px 0px 0px; border-width: 5px; padding: 4px; border-style: solid; border-radius:10px 10px 0 0; border-color: #666666; background: #666666; } .tabItemHeader:target { border-bottom-width: 0px; border-color: #DDDDDD; background: #DDDDDD; } второй раз, чтобы отобразить соответствующий вкладке текст: .tabItemContent { display: none; } .tabItemContent:target { display: block; } собственно проблема. :target сопоставляется id элемента, который не может быть определён дважды. нагляднее из разметки(повторяются id item1, item2, item3, item4) <div id="tabControl"> <div id="tabControlHeadersRow"> <div class="tabItemHeader" id="item1"> <a href="#item1">Item1</a> </div> <div class="tabItemHeader" id="item2"> <a href="#item2">Item2</a> </div> <div class="tabItemHeader" id="item3"> <a href="#item3">Item3</a> </div> <div class="tabItemHeader" id="item4"> <a href="#item4">Item4</a> </div> </div> <div id="tabControlContent"> <div class="tabItemContent" id="item1"> 111111111111 111111111111 111111111111 111111111111 </div> <div class="tabItemContent" id="item2"> 222222222222 222222222222 222222222222 222222222222 </div> <div class="tabItemContent" id="item3"> 333333333333 333333333333 333333333333 333333333333 </div> <div class="tabItemContent" id="item4"> 444444444444 444444444444 444444444444 444444444444 </div> </div> </div> залил вариант, в котором убрал первые id, отвечающие за анимацию заголовков вкладок. чтобы никто не сомневался, текст появляется Спасибо