- 締切済み
会議室予約システムを作成しているのですが・・・
現在会議室予約システムを作成しているのですが行き詰っています。 どなたか助言をいただけるとありがたいです。 jsp: <%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html:html> <%@ page import="java.util.Calendar" %> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/common.js"></script> <title>会議室予約</title> </head> <body onload="showCalen(0)"> <html:form action="/reservation"> <div id="top"> <div id="header" align="center"> <h1><a href="login.html">グループウェアシステム「ソシナ」</a></h1> </div><!-- header end --> <div align="right"> <p>ID:1 NAME:玉城 巧</p> </div> <div id="menu"> <ul> <li><a href="login.jsp">トップページ</a></li> <li><a href="destination.jsp">行先掲示板</a></li> <li><a href="reservation.jsp">会議室予約</a></li> <li><a href="lunch.jsp">お弁当注文</a></li> <li><a href="small_present_list.jsp">つまらないもの</a></li> <li><a href="password_change.jsp">パスワードの変更</a></li> <li><a href="logout.jsp">ログアウト</a></li> </ul> </div><!-- menu end --> <div id="contents"> <div id="subL"> <div class="section"> <h2>会議室予約</h2> <ul> <li><a href="reservation.jsp">予約状況一覧</a></li> <li><html:link action="/reservation_info">会議室の情報を見る</html:link></li> <li><a href="reservation_add.jsp">会議室を登録する(管理者のみ)</a></li> </ul> </div><!-- section end --><br/> <% Calendar cal = Calendar.getInstance(); Calendar cal2 = Calendar.getInstance(); cal.set(cal.get(Calendar.YEAR),cal.get(Calendar.MONTH),cal.get(Calendar.DATE)); cal2.set(cal.get(Calendar.YEAR),cal.get(Calendar.MONTH),1); int YEAR = cal.get(Calendar.YEAR); int MONTH = cal.get(Calendar.MONTH)+1; int DATE = cal.get(Calendar.DATE); int max = cal.getActualMaximum(Calendar.DATE); int w = cal.get(Calendar.DAY_OF_WEEK); int ww = cal2.get(Calendar.DAY_OF_WEEK); String[] w2 = {"<font style='color:red;'>日</font>", "月", "火", "水", "木", "金", "<font style='color:blue;'>土</font>"}; String WEEK = w2[w-1]; %> <%=YEAR %>/<%=MONTH %>/<%=DATE %>(<%=WEEK %>)<br /> <table border="1"> <tr> <%for(int i=0;i<7;i++){ %> <th><%=w2[i] %></th> <%} %> </tr> <% int k = 0; int l = 0; // カレンダー表 ６行分ループ for(int i=0;i<6;i++){ %> <tr> <% // カレンダー表 曜日列分ループ for(int j=0;j<7;j++){ %> <td style='text-align:center;'> <% // 今月初日の曜日位置 if(i==0 && j==ww-1){ k++; %><html:link action="/reservation_day" property="day" ><u><%=k %></u></html:link><% } // 今月初日以外の時 else{ l = l+k; // 今月月末以降と、カレンダー表１行目をトリム if(l>max || i==0 && j<ww){ %> <% } // 今月日付の範囲の時 else if(l<max){ // 本日日付の時 if(l+1 == DATE){ %><font style='background:#abcdef;font-weight:bold;'><html:link action="/reservation_day" property="day"><u><%=l+1 %></u></html:link></font><% if(l+1==31){ break; } } // 本日以外の時 else{ %><html:link action="/reservation_day" property="day=k" ><u><%= l+1 %></u></html:link><% if(l+1==31){ break; } } } } %> </td> <% }if(l+1==31){ break; } %> </tr> <% } %> </table><br /><br /> カレンダーの日付の情報はどうしたら取れるのか教えていただけるとありがたいです。 どうやったら日付ごとのデータを送れるのでしょうか。 開発環境は Eclipse PostgreSQL Struts です。 よろしくお願いいたします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- LancerVII
- ベストアンサー率51% (1060/2054)
関連するQ&A
- 検索サイト作成について
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- JavaScript
- Ajaxを使った検索サイト作成
今、Ajaxを用いてカスタム検索サイトを作成しています。内容は、検索したいキーワードをテキストボックスに入力し、その結果をタブの中で表示させるようにしています。しかし、何度してみても結果を表示させることができません。どうしたら、結果表示させることができるでしょうか？よろしくお願いします。下がソースです。 <?xml version="1.0" encoding="utf-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Search Site</title> <link rel="stylesheet" type="text/css" href="_css/import.css" media="all" /> <script type="text/javascript" charset="utf-8" src="_js/jquery-1.3.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript" charset="utf-8" src="_js/jquery_ui_tab.js"></script> </head> <body> <div id="header"> <!-- #header --></div> <div id="container"> <div id="read"> <br> </div> <ul> <li><a href="#about" title="about">about</a></li> <li><a href="_ajax/google.html" title="google">google</a></li> <li><a href="_ajax/yahoo.html" title="yahoo">yahoo</a></li> <li><a href="_ajax/goo.html" title="goo">goo</a></li> </ul> <div id="about"> </div> <!-- #container --></div> <div id="footer"> <!-- #footer --></div> </body> </html>
- ベストアンサー
- AJAX
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- 以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに
以下の内容でhtmlを作成し、文字コードをutf-8からeuc-jpに変更したところ ヘッダー フッターが崩れてしまいます。ie6.0 ie7.0 にて（ie8.0 firefox3）では問題なく表示されます。 というか、cssが聞かないのです。 utf-8に戻すと直るのですが、なにか設定が必要なのでしょうか。 メールフォームcgiの関係でeuc-8にする必要があるのです。 よろしくお願いいたします。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>タイトル</title> <meta name="keywords" content="キーワード1,キーワード2,キーワード3" /> <meta name="description" content="テキスト。" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> <body> <div id="bodybox"> <div id="container"> <!-- main --> <div id="main"> </div><!-- /main --> <div id="header"> <div class="head-box"> <h1>テキストテキストテキスト</h1> <p class="oooo"><a href="../"></p> <p class="top-inquiry"><a href="../inquiry/"><span>問合せ</span></a></p> <ul class="top-navi"> <li><a href="../">HOME</a></li> <li><a href="../cy/">テキスト</a></li> </ul> </div> </div><!-- /header --> </div><!-- /container --> </div><!-- /bodybox --> <div id="footer"> <div id="footer-in" class="clearfix"> <div class="fnavibox"> <ul class="fnavi clearfix"> <li><a href="../index.html">テキスト</a></li> <li class="last"><a href="../works/">テキスト</a></li> </ul> <ul class="fnavi clearfix"> <li><a href="/">HOME</a></li> </ul> </div> <!-- /fnavibox --> <div class="banerbox"> <p class="fbox"><img src="../common/images/img-tel1.jpg" alt="" /></p> <p class="fbox-r"><a href="../inquiry/"><img src="../common/images/btn-toi.jpg" alt="テキスト" /></a></p> </div><!-- /banerbox" --> </div> <!-- /footer-in --> <div id="footer-in2" class="clearfix"> <div class="addressbox"> <p class="name">テキスト</p></p> </div><!-- /addressbox --> <!-- /footer-in --> <div id="footer-in3"> <p class="copyright">
- ベストアンサー
- ホームページ作成ソフト
- WEBサイト作成時ヘッダーで読込が反映されない部分
ヘッダー部分について質問させていただきます。 一旦、サイトをDW（ドリームウィーバーCS6）やHPB（ホームページビルダー14）で読み込んで、デスクトップに保存後、確認すると、この部分は何故か表示されていませんでした。データとしても、その後は表示されなくなったようです。 この理由が分かりません。 <!-- #BeginLibraryItem "/Library/header.lbi" -->～<!-- #EndLibraryItem -->が原因だとは推測がつきます。詳しい方がいましたら、よろしくお願いします。 念の為に、下記にHTMLとCSSを出来る限り記載しておきます。 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タイトル</title> <meta name="Keywords" content="キーワード"> <meta name="Description" content="キーワード"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base1.css"> <script type="text/javascript" src="util.js"></script> <script src="swfobject_modified.js" type="text/javascript"></script> </head> <body id="home"> <div id="topmess"><p><strong>ストロング</strong></p></div><!-- #BeginLibraryItem "/Library/header.lbi" --><div id="header"> <h1><a href="https://www.google.co.jp/">題名</a></h1> <ul> <li id="top"><a href="https://www.google.co.jp/">1</a></li> <li id="com"><a href="https://www.google.co.jp/">2</a></li> <li id="pro"><a href="https://www.google.co.jp/">3</a></li> <li id="con"><script type="text/javascript">mailwrite()</script></li> </ul> </div><!-- #EndLibraryItem --><div id="main" class="clearfix"> <table> <tbody> <tr> <td style="text-align:left;"><a href="http://www.10.jpg" target="_parent"><img src="side_coupon04.jpg" width="197" height="98" alt="4"></a></td> <td style="text-align:center;"><a href="http://www.20.jpg" target="_parent"><img src="side_coupon05.jpg" width="197" height="98" alt="5"></a></td> <td style="text-align:right;"><a href="http://www.30.jpg" target="_parent"><img src="side_coupon06.jpg" width="197" height="98" alt="6"></a></td> <td style="text-align:right;"><a href="http://www.40.html" target="_parent"><img src="side_coupon07.jpg" width="197" height="98" alt="7"></a></td> </tr> </tbody> </table> <br> <br> <img src="pro_img14.jpg" width="791" height="80" alt="TEL" class="btmgn20"> <p><font color="BLUE" size="10">TEL: 0123-456-789</font></p><br> <img src="pro_img11.jpg" width="791" height="150" alt="8" class="btmgn20"><br> <img src="pro_img9.jpg" width="791" height="367" alt="9" class="btmgn20"><br> <table> <tbody> <tr> <td style="text-align:left;"><a href="https://www.google.co.jp/" target="_parent"><img src="img12.jpg" width="395" height="120" alt="A"></a></td> <td style="text-align:right;"><a href="https://www.google.co.jp/" target="_parent"><img src="img13.jpg" width="395" height="120" alt="B"></a></td> </tr> </tbody> </table> </div> <!-- #BeginLibraryItem "/Library/footer.lbi" --><div id="footer"> <div id="ft"> <div class="leftarea"> <h3>見出し3</h3> <p>住所<br /> TIME 1：30～24：40<br /> ※<br /> TEL：0123-456-789<br /> FAX：0123-456-789 </p> </div> <div class="rightarea"> <ul> <li class="fst"><a href="https://www.google.co.jp/">8</a></li> <li><a href="https://www.google.co.jp/">9</a></li> <li><a href="https://www.google.co.jp/">10</a></li> <li><script type="text/javascript">mailwrite()</script></li> </ul> <address>コピーライト</address> </div> </div> </div><!-- #EndLibraryItem --> <script type="text/javascript"> <!-- swfobject.registerObject("FlashID"); //--> </script> </body> </html> CSS /* ------------------------------------------------------------------------------------------------------------ 1. Normalize (No need to edit) -------------------------------------------------------------------------------------------------------------*/ html, body, div, a, h1, h2, h3, h4, h5, h6, p, blockquote, pre,img, ol, ul, li, dl, dt, dd, span, abbr, acronym, address, cite, code, del, dfn, em, ins, kbd, q, samp, strong, sub, sup, var, form, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, applet
- ベストアンサー
- ホームページ作成ソフト
- float+IE8で形が崩れます。
float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下のHTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。 何故でしょうか？ これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか？ なかなかうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- HTML
- スマートフォンで見れるようにするには？
ホームページを作ってるのですがスマートフォンで見ると真っ白になってしまいます。何が原因なのかさっぱり分りません。 分る方教えて貰えたら幸いです。 今、サーバー側がメンテナンスしてるのでここにタグ書きます。 訂正箇所ありましたら教えてくださいm(__)mお願いします。 ホームページも見ることは可能なんですがHTMLが少し違うのでこのHTMLで質問します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>bit-home</title> <link href="style1.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1');</script> <script type="text/javascript"> $().ready ( function() { $('#information').load ( 'information.html' ); $('#information2').load ( 'information2.html' ); }); </script> </head> <body> <div id="flame"> <!--ヘッダ--> <div id="head"> <h1><a href="http://www.bit-home.jp/">bit-home</a></h1> </div> <!--ヘッダ終わり--> <!--右のブロック--> <div id="right"> <div class="main"> 広告：劇場版イナズマイレブンGo 究極の絆グリフォン <a href="http://www.inazuma-movie.jp/"><img src="http://bit-home.jp/img/top/top.jpg"></a><br> <br> <h2>bit-homeの内容</h2> <p>僕なりに頑張って作ってみました。<br> ゆっくり見ていってください。<br> </p> </div> <div class="main"> <h2>更新履歴</h2> <p> 2012/04/26 集会撮影→<a href="http://www.bit-home.jp/syukai/img/001.jpg">001.jpg</a><br> 2012/06/11 BBSを報告掲示板として使うことにしました。<br> 2012/06/10 ゲーム日記を更新しました<br> 2012/05/28 プロフィールを更新しました<br> 2012/04/21 LINKを更新しました<br> </p> <br> </div> </div> <!--右のブロック終わり--> <!--左のブロック--> <div id="left"> <div class="leftmain"> <div class="pic"> <div id="information"></div> <br> </div> </div> <div class="leftmain"> <ul> <li><a href="profile.htm">PROFILE</a></li> <li><a href="blog.htm">BLOG</a></li> <li><a href="link.htm">LINK</a></li> <li><a href="http://bit-home.bbs.fc2.com/">BBS</a></li> <li><a href="http://www.bit-home.jp/game_diary/index.html">ゲーム日記</a></li> </ul> </div> </div> <!--左のブロック終わり--> <!--フッタ--> <div id="foot"> <div id="information2"></div> </div> <!--フッタ終わり--> </div> </div> </body> </html>
- 締切済み
- HTML
- 垂直型のドロップダウンメニューの作成方法について
http://jsajax.com/Articles/jQueryDropDownMenu2/1088を参考に下記のソースで垂直型のドロップダウンメニューを作成しました(動作はhttp://jsajax.com/Articles/jQueryDropDownMenu2/1088で「このサンプルを編集して試してみる」をクリックし、画面上部のテキストエリアに下記のソースを貼り付け「編集後クリックして実行！」で試す事が出来ます。 また、ローカルで試す場合は、ヘッダ部分に書かれているjsやcssをhttp://jdsharp.us/jQuery/plugins/jdMenu/やhttp://jquery.com/からダウンロードし、パスを調整していただければ大丈夫です)。 【ソース】 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>jQuery - DropDown Menu - Vertical (jdMenu)</title> <link href="jQuery/jdMenu/jquery.jdMenu.css" rel="stylesheet" type="text/css" /> <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.dimensions.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.positionBy.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.bgiframe.js" type="text/javascript"></script> <script src="jQuery/jdMenu/jquery.jdMenu.js" type="text/javascript"></script> </head> <body> <div> <ul class="jd_menu jd_menu_vertical"> <li class="accessible"><a href="#" class="accessible">第１ ≫</a> <ul> <li><a href="#">第２－１ ≫</a> <ul> <li><a href="#" target="_blank">第２－１－１</a></li> <li><a href="#" target="_blank">第２－１－２</a></li> <li><a href="#" target="_blank">第２－１－３</a></li> <li><a href="#" target="_blank">第２－１－４</a></li> </ul> </li> <li><a href="#">第２－２ ≫</a> <ul> <li><a href="#" target="_blank">第２－２－１</a></li> <li><a href="#" target="_blank">第２－２－２</a></li> <li><a href="#" target="_blank">第２－２－３</a></li> <li><a href="#" target="_blank">第２－２－４</a></li> </ul> </li> <li><a href="#">第２－３ ≫</a> <ul> <li><a href="#" target="_blank">第２－３－１</a></li> <li><a href="#" target="_blank">第２－３－２</a></li> <li><a href="#" target="_blank">第２－３－３</a></li> <li><a href="#" target="_blank">第２－３－４</a></li> </ul> </li> <li><a href="#">第２－４ ≫</a> <ul> <li><a href="#" target="_blank">第２－４－１</a></li> <li><a href="#" target="_blank">第２－４－２</a></li> <li><a href="#" target="_blank">第２－４－３</a></li> <li><a href="#" target="_blank">第２－４－４</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> ただし、実際に作ってみた所、今私が作っているサイトでは第二階層、第三階層の数が多く、 第一階層(上記ソースの「第１」)をマウスオーバーした際、すべての内容が表示されませんでした。 その為、下記のようなこと(縦だけではなく、横のスペースも有効に使いたい)を行いたいと思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 【第二階層(第三階層)の現在のイメージ】 第２－１ 第２－２ 第２－３ 第２－４ 【第二階層(第三階層)のやりたいイメージ】 第２－１ 第２－２ 第２－３ 第２－４ 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像の貼り方教えてほしいです
CSSの画像の貼り方がわかりません body{ background-color: #f2f2f2; padding: 0; margin: 0; } div#container { width: 700px; padding: 0; margin-left: 150px; background-color: white} div#header { background-color: blue; badkground-image: url(画像.jpg); width: 640px; height: 233px ｝ 画像の部分のCSSはこんな感じです。 htmlは <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="roll.css" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <ul> <li><a href="#">web</a></li> <li><a href="#">title1</a></li> <li><a href="#">title2</a></li> <li><a href="#">css</a></li> <li><a href="#">seo</a></li> </ul> </div> <div style="clear:both; "></div> </div> </body> </html> こうなってます。 ここまで何が間違っているかわかりません。 初心者ですがどなたかわかる方よろしくお願いします。
- 締切済み
- HTML
- CSS・IEでボーダーを表示したい
お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- ベストアンサー
- HTML
