CSS [ Coda-Slider ]

質問

Coda-Sliderで上にあるタブの位置を下にもってきたいのですが、どうすればいいでしょうか？

↓現状
http://ninaross-custom.com/event/test.html

↓やりたい形
http://ninaross-custom.com/event/test.gif

いろいろやってみたのですが、この箇所だけさっぱりわかりません。
どうかよろしくお願い致します。

回答No.2

ORUKA1951

画面幅が1020pxなら
#stripNav0 {
bottom:0;
left:429px;
position:absolute;
}
でもね。HTMLとスタイルシート全体を根本的に見直さないとウィンドウ幅が変わるとずれるよ。
　CSSのソースを見ると手書きではなく、ツールを使うか、どこかのサンプルのコピーのようですが、あまりにも複雑怪奇です。
　あの1/10以下の行数で期待に沿えるものはできるはず。

お礼

ありがとうございます！
↓少し近づいて参りました。

http://ninaross-custom.com/event/coda-slider/

あとはタブを中央表示できれば完了です。
CSSは以下のように変更しました。

* { margin: 0; padding: 0 }

.stripViewer {
overflow: hidden;
width: 600px;
height: 600px;
background: #FF0000;
}

.panelContainer {
position: relative;
background: #333333;
}

.panel {
float: left;
text-align: left;
width: 600px;
}

#stripNav0 { top: 600; position: absolute; }
}

.stripNav ul li {
float: left;
margin-right: 2px;
}

.stripNav a {
font-size: 11px;
font-weight: bold;
text-align: center;
line-height: 30px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 0 15px;
}

.stripNav li.tab1 a { background: #333333 }
.stripNav li.tab2 a { background: #333333 }
.stripNav li.tab3 a { background: #333333 }

.stripNav li a:hover {
background: #CCFF00;
color: #FFFFFF;
}

.stripNav li a.current {
background: #CCFF00;
color: #FFFFFF;
}

.stripNavL, .stripNavR {
position: absolute;
text-indent: -9000em;
}

補足

できました！
#stripNav0{}を以下のように記述しました。

#stripNav0 { top: 600px; left: 50%; margin: 0 -69px; position: absolute; }

2日間、試行錯誤しましたが、これを境にCSSを勉強しようと思います。
本当にありがとうごさいました！

回答No.1

ORUKA1951

Firefox+Firebugでテストすれば簡単
#stripNav0{}で設定しましょう。

補足

ありがとうございます。
CSSにうとく、まだ解決していないのですが、stripNavを調べてみます。
ちなみにCSSは以下のように記述しています。

* { margin: 0; padding: 0 }

.stripViewer {
overflow: hidden;
width: 600px;
height: 250px;
background: #000000;
}

.stripViewer .panelContainer {
position: relative;
left: 0; top: 0;
}

.stripViewer .panelContainer .panel {
float:left;
width: 600px;
}

.stripViewer .panelContainer .panel .wrapper {
padding: 10px;
}

.stripNav ul li {
float: left;
margin-right: 2px;
}

.stripNav a {
font-size: 11px;
font-weight: bold;
text-align: center;
line-height: 30px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 0 15px;
}

.stripNav li.tab1 a { background: #333333 }
.stripNav li.tab2 a { background: #333333 }
.stripNav li.tab3 a { background: #333333 }

.stripNav li a:hover {
background: #CCFF00;
color: #FFFFFF;
}

.stripNav li a.current {
background: #CCFF00;
color: #FFFFFF;
}

.stripNavL, .stripNavR {
position: absolute;
text-indent: -9000em;
}