Помощник
|
Помогите расположить вкладки с правой стороны |
Tigor.v
|
Сообщение
#1
|
||
|
|
||
|
|||
ottaviano |
27.1.2011, 23:32;
Ответить: ottaviano
Сообщение
#2
|
|
Tigor.v, как вариант [CSS].container {width: 500px; float:right;}[/CSS]
|
|
|
Tigor.v
|
Сообщение
#3
|
|
ottaviano, спасибо, но к сожалению не вышло
может я что-то не так сделал? я заменил свою строку на твою, привело к смещению всего блока к правой границе еще не совсем правильно выразился (подправлю) необходимо разместить вкладки с боку с права, а не с боку с верху |
|
|
ottaviano |
27.1.2011, 23:51;
Ответить: ottaviano
Сообщение
#4
|
|
|
|
|
Tigor.v
|
Сообщение
#5
|
|
ottaviano, вот тут два примера нужно расположение "кнопок" как на нижнем варианте, но с права, а не с лева.
но именно на том скрипте который я привел выше((( |
|
|
ottaviano |
28.1.2011, 0:17;
Ответить: ottaviano
Сообщение
#6
|
|
|
|
|
Tigor.v
|
Сообщение
#7
|
|
ottaviano, ну он уже стоит, да и симпотичнее выглядит...
|
|
|
ottaviano |
28.1.2011, 1:47;
Ответить: ottaviano
Сообщение
#8
|
|
Tigor.v,
Подкрутил как смог...оцени <style type="text/css">
body { margin: 0; padding: 0; font: 10px normal Verdana, Arial, Helvetica, sans-serif; color: #444; } h1 {font-size: 3em; margin: 20px 0;} .container {width: 500px; height:300px; float:right; margin:25px;} ul.tabs { position:absolute; top:25px; right:25px; width: 32px; height:100%; list-style: none; padding: 0; margin: 0; } ul.tabs li { text-align:center; vertical-align:middle; background: none repeat scroll 0 0 #E0E0E0; border-color: #999 #999 #999 -moz-use-text-color; border-width: 1px medium 1px 1px ; width: 31px; height: 32px; margin: 0; padding: 0; position: relative; float:left; line-height: 31px; height: 31px; border: 1px solid #999; overflow: hidden; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-left: 2px solid #fff; margin-left:-1px; } .tab_container { position: relative; margin-right:62px; border-width:1px; border-style:solid; border-color:#999; width: 467px; height: 100%; background: #fff; -moz-border-radius-bottomright: 5px; -khtml-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -khtml-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } .tab_content img { float: left; margin: 0 20px 20px 0; border: 1px solid #ddd; padding: 5px; } </style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> </head> <body> </body> <div class="container"> <div class="tab_container"> <div id="tab1" class="tab_content"> <h2>1</h2> </div> <div id="tab2" class="tab_content"> <h2>2</h2> </div> <div id="tab3" class="tab_content"> <h2>3</h2> </div> <div id="tab4" class="tab_content"> <h2>4</h2> </div> </div> <ul class="tabs"> <li><a href="#tab1">1</a></li> <li><a href="#tab2">2</a></li> <li><a href="#tab3">3</a></li> <li><a href="#tab4">4</a></li> </ul> </div> |
|
|
Tigor.v
|
Сообщение
#9
|
|
ottaviano, огромнейшее СПАСИБО!! Выручил очень!
|
|
|
ottaviano |
28.1.2011, 2:59;
Ответить: ottaviano
Сообщение
#10
|
|
|
Tigor.v, пожалуйста...
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Помогите вспомнить рекламного бота Телеграм для обмена рекламой | 0 | Mixatraider | 730 | 21.2.2024, 23:42 автор: Mixatraider |
|
Помогите рещить проблему с монитором. Почему низкое разрешение при подключении монитора через displayport? |
0 | Levels | 1702 | 11.12.2020, 0:48 автор: Levels |
|
Помогите кто нибудь получить партнерку Росбанк! | 7 | heisenberg_mw | 2345 | 7.8.2020, 9:28 автор: heisenberg_mw |
|
Помогите найти тему пожалуйста | 7 | virtas | 12535 | 24.7.2020, 17:02 автор: -JamesSmips- |
|
Помогите с поиском доноров | 3 | tehno_music | 3359 | 4.11.2019, 17:15 автор: goblin78 |
Текстовая версия | Сейчас: 25.4.2024, 5:58 |