- PR -

Ajaxタブの見出し部分の高さ設定

1|2 次のページへ»
投稿者投稿内容
oka
常連さん
会議室デビュー日: 2007/11/19
投稿数: 25
投稿日時: 2008-02-21 21:33
お世話になります。
VisualStudio2005でWebアプリを作成しています。

Ajax1.0のタブコンテナを使用しており、タブの見出し部分の高さを
高くしたいのですが、どのように記載すればよいでしょうか。
見出し部分のフォントサイズは以下のように設定して、
変更できることを確認しました。

<link href="../StyleSheets/Std.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ajax__tab_xp .ajax__tab_tab { font-size:14px; }
</style>

{ font-size:14px; }の部分を { font-size:16px; height:30px; }のようにしてみたのですが、
エラーは出ないものの見出し部分の高さに変化はありませんでした。

アドバイスをよろしくお願いいたします。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-22 02:09
見出し部分のHTMLソースを見せてください。

それと改変前のオリジナルの見出し部分のCSSもお願いします。
oka
常連さん
会議室デビュー日: 2007/11/19
投稿数: 25
投稿日時: 2008-02-22 22:59
返信ありがとうございます。
マスタページの中のコンテンツプレースホルダ内にタブを配置しており、
HTMLはマスタページに以下のように記載しています。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>

<style type="text/css">
.ajax__tab_xp .ajax__tab_tab { font-size:14px; }
</style>

</head>
<body>
<form id="form1" runat="server">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" >
</asp:contentplaceholder>
</form>
</body>
</html>

※　最初に掲示しましたソースの以下の部分は誤りで、記載していません。
　　この記載無しでフォントサイズは変更できています。
<link href="../StyleSheets/Std.css" rel="stylesheet" type="text/css" />

cssについてですが、AjaxContorolToolKit 1.0をインストール後
改変せずそのまま使用しています。 AjaxControlToolkitフォルダ内のTabsフォルダに
Tabs.cssというファイルがあり、おそらくこれが元になっていると思われます。
Tabs.cssの中身は以下のようになっています。

/* default layout */
.ajax__tab_default .ajax__tab_header {white-space:nowrap;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:11px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;height:21px;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px;background-color:#ffffff;}

/* scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}

よろしくお願いいたします。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-23 01:24
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>

<style type="text/css">
.ajax__tab_xp .ajax__tab_tab { font-size:14px; }
</style>

</head>
<body>
<form id="form1" runat="server">

<asp:contentplaceholder id="ContentPlaceHolder1" runat="server" >
</asp:contentplaceholder>
</form>
</body>
</html>


いえいえ、マスターページだろうとなんだろうと関係無いです。
ASPが処理した後のソース、つまりブラウザ上のHTMLコードが見たいのです。

ASPタグ見たってしょうがないですから。
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-23 01:35
すつれい。こーじゃないや。うーむ、、、

[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-23 01:42 ]
かるあ
ぬし
会議室デビュー日: 2003/11/16
投稿数: 1190
お住まい・勤務地: センガワ→ムサシノ
投稿日時: 2008-02-23 14:45
前にやろうとして断念したことがあります。
タイトル部分の高さを指定するのは大したこと無いんですが、
タブを作るための画像なんかがうまく伸びてくれないんで。。。

_________________
かるあ のメモ と スニペット
oka
常連さん
会議室デビュー日: 2007/11/19
投稿数: 25
投稿日時: 2008-02-24 00:50
返信ありがとうございます。やはり難しいことなのですね。。
ブラウザ上のHTMLは以下のようになっていました。
自分でももう少しいろいろ試してみます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>
無題のページ
</title>
<style type="text/css">
.ajax__tab_xp .ajax__tab_tab { font-size:14px; }
</style>
<link href="/AJAXEnabledWebSite4/WebResource.axd?d=DYaZPghErBvQ8lFWqYf-DBBHi29bjUwU4DWfGguOotfs92VsIQryc95XnhL9uvxz7V0wYB4W8_WNedAlfKGKtg2&t=633310672220000000" type="text/css" rel="stylesheet" /></head>
<body>
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm">
・
・
・
</form>
</body>
</html>
ぴあちゃん
ぬし
会議室デビュー日: 2008/02/07
投稿数: 287
投稿日時: 2008-02-24 03:06
私が見たいところは 「...」の部分です。
例えば、
タブの見出しが「タブ１」「タブ２」「タブ３」だとしたら、

HTML には、
<div ...>タブ１</div>
とか、
<span ...>タブ２</span>
とかプロセッシングされた結果が残るはずですから。

仮にJavaScript で動的にこさえていて、しかも外部ファイルで中身が
どーなってんのか見えない、っていう場合でも、対処の仕方はあります。
難易度飛躍的にアップしますがｗ

<style type="text/css">
.ajax__tab_xp .ajax__tab_tab { font-size:14px; }
</style>

スタイルシートもこれだけじゃないですよね？
もっと一杯あるはず。
仮に上記しか無いなら高さが変更できない理由が知りたいくらいです。

宜しくお願いします。


追記：
つまり、何が知りたいのかと言うと、ASPはXMLを解析して結果をクライアント
のブラウザの表示形式＝HTMLで返すのですよね。
提示された CSS には、クラスプロパティで指定する書式が採用されています
よね。.ajax_tab とか、名前の前に "." があります。
これはつまり、
HTML要素に適用させるには、
<span class="ajax_tab">タブ１</span>
ってやるか、
obj.className = "ajax_tab";
ってやる、つまり、class プロパティに指定する書き方なんです。
だから、展開後のHTML見れば、タブの部分にどのCSSが使われているのかが
分かります。
で、どのCSSが悪さしているのかは、そのHTMLからタブを構成している部分
のCSSをさわってくことで判明しますね。

CSSだけで出来ない場合は、JavaScriptで動的に書き換える必要があるかも
しれませんが、それも視野に入れた上でまずは提示してくらはい。
JavaScript使わない前提なら、ごめんなさいです。できるだけCSSのみで高さ
を変えるのが理想ではありましょうが、、、




[ メッセージ編集済み 編集者: ぴあちゃん 編集日時 2008-02-24 03:17 ]
1|2 次のページへ»

スキルアップ／キャリアアップ（JOB@IT）