• 締切済み

ホームページ作成

ナビゲーションを作成中なのですが、教えてください。 CSSで作ってみたんですが一番右と左の白の線の１ｐｘを消したいんですが なにかいい方法ありますか？ CSSは #navi { list-style-type:none; width:750px; margin: 0; padding: 0; border-left-width: 1px; border-left-style: solid; border-left-color: #FFF; } ul#navi li { float:left; width:150px; font-family: "A-OTF 新ゴ Pr5 EL"; font-size: 14px; } ul#navi li a { display:block; padding-top:5px; padding-bottom:5px; text-align:center; text-decoration:none; color:#FFF; width:149px; border-right-width: 1px; border-right-style: solid; border-right-color: #FFF; background-image: url(../images/templete/navi2.gif); です。 よろしくお願いします。

みんなの回答

  • salonpath
  • ベストアンサー率48% (194/399)
回答No.1

>CSSで作ってみた ならborderの指定を削除すれば。。。?

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • スタイルシートでのメニュー作成で

    今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に10px程空間を入れたいのですがどのようにすれば良いでしょうか。 CSS内の#menuに「margin-left:10px」としても反映されません。 ■■　CSS　■■ #menu {margin: 12px; padding: 0px; width: 180px; border-top: 1px solid #080240; border-right: 1px solid #080240; border-left: 1px solid #080240; font-size: 100%; } #menu ul {margin: 0px; padding: 0px; list-style: none; } #menu li {margin: 0px; padding: 0px; } ■■　HTML　■■ <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> </ul> アドバイスいただけると助かります。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 画像を使ったドロップダウンメニュー

    ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }

  • display:table;を多段表示させたい

    <style> .navi { display:table; } .navi li:nth-child(3n+1) { display:table-row; color:#F00; } .navi li { display:table-cell; width:50%; } /* 色づけ */ * {margin:0;padding:0;list-style:none;} .navi {width:600px;border-top:solid 1px #CCC;border-left:solid 1px #CCC;margin:0 auto;} .navi li {border-right:solid 1px #CCC;border-bottom:solid 1px #CCC;padding:5px;} </style> <ul class="navi"> <li>a</li> <li>b</li> <li>c</li> <li>d</li> <li>e</li> <li>ｆ</li> </ul> こうすると、1,4,7,10…番目の要素が改行されますが、 <li></li>に何も入れないようにしなければならず、 行き詰ってしまいました。 table要素で多段表示させることはできないのでしょうか？

    • 締切済み
    • CSS
  • 階層型ドロップダウンメニューのサブ項目CSSの背景色の指定について

    メニューバーにサブ項目を作り、hover,active,時のbackground-colorを指定したいのですが、うまくいきません。 ◆http://haradesignroom.jp/0909menu_bar/0909renewal/kaisoumenu/index.html Web制作関連の雑誌に出ていたフォーマットを元に上記のメニューバーを作りました。 第一階層には背景画像を配し、hover,activeのときに別画像を設定しました。 ６項目のうち、サブメニューがある（商品情報など）にマウスをおくと、グレーの背景色のサブメニューが表示されるまでは良いのですが、サブメニュー各項目にマウスを置くと、第一階層のhoverの画像が表示されてしまいます。またサブメニューの下欄の項目が表示されません。 サブメニューがhover、active状態のときに、さらに別色（＃FFCCCC）で指定したいのですが、CSSの書き方がわかりません。 どなたかご教示お願いいたします。 【CSS】 * { margin: 0; padding: 0; } body { font-family: Helvetica, Sans-Serif; font-size: 12px; padding-bottom: 15px; } #page-wrap { width: 800px; margin-top: 25px; margin-right: auto; margin-bottom: 25px; margin-left: auto; } a { text-decoration: none; } ul { list-style: none; background-repeat: repeat-x; } p { margin: 15px 0; } /* LEVEL ONE*/ ul.dropdown { position: relative; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; } ul.dropdown li { font-weight: bold; float: left; background-image: url(../images/menu_bk.jpg); height: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCC99; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } ul.dropdown a:hover { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown a:active { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown li a { display: block; color: #666666; border-right-style: none; border-left-style: none; padding-top: 20px; padding-right: 30px; padding-bottom: 4px; padding-left: 30px; border-top-style: none; border-bottom-style: none; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li:first-child a { border-left: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { color: #666666; position: relative; background-color: #D2D2D2; } ul.dropdown li.hover a { color: #993333; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; color: #FFFFFF; border-bottom: 1px solid #ccc; float: none; background-repeat: repeat-x; background-image: url(../images/transparent02.jpg); float:none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; color: #FFFFFF; } /* LEVEL THREE*/ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; color: #FFFFFF; } ◆　長々申し訳ありませんが、どなたかよろしく　お願いいたします。◆

  • CSSで枠線の太さを変えるとき

    CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが１pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします（CSSは初心者程度のレベルです）。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================

    • ベストアンサー
    • CSS
  • 【CSSについて】リストをフロートするとfirefoxでボーダーが消える

    お世話になっております。 今回は、CSSの質問です。 IE6.0とFF3.0の違いなのですが、ソースを以下に記述します。 ***HTML*** <ul id="navi"> <li><a href="#">風景</a></li> <li><a href="#"> 生き物</a></li> <li><a href="#">建物</a></li> <li><a href="#">乗り物</a></li> </ul> ***CSS*** #navi { margin-left: 0px; padding-left: 0px; list-style-type: none; width: 600px; border-right: 1px solid #333333; } #navi li { float: left; border-left: 1px solid #000000; border-top: 1px solid #333333; border-bottom: 1px solid #000000; width: 149px; } #navi a { display: block; background-color: #ff9900; color: #FFFFFF; text-decoration: none; width: 149px; line-height: 30px; text-align: center; font-size: 12px; font-weight: bold; letter-spacing: 0.5em; } #navi a:hover { background: #00FFFF; color: #000000; } IEではボーダーで区切られたナビがキレイに表示されますが、FFでは右端のボーダーが消えてしまいます。 これもハックしなきゃならないものですか？ とりあえず、背景に画像を使用することで逃げられるのですが、すっきりしませんので対処法を教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • レイアウト、フッターが崩れてしまいます。

    横800pxの外枠にフッター部分を枠内の下に綺麗に収まるよう配置したいのですが、ブラウザーで確認するとフッター部が上に配置されてたり、mainのテキスト部分や外枠のレイアウトが表示されてなかったり、崩れてしまいます。またｓａｆａｒｉ、firefoxを使って確認してるのですが、同じように表示されません。どこが間違っているのか、教えて頂けると助かります。 ＊html <body> <div id="wrapper"> <div id="headir"> <h1>The highest hiphop design All group</h1> <div class="logo"><img src="＃”></div> </div> <span id="menu"><ul><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li><li><img src＝”＃" alt="＃" width="200" height="100" /></li><li><img src="＃" alt="＃" width="200" height="100" /></li></ul></span> <h2><img src="＃" alt="＃" /></h2> <span id="sidemenu"> <ul> <li><a href="#">TOP</a></li> <br /> <li><a href="#">NEW</a></li> <br /> <li><a href="#">Line</a></li> <br /> <li><a href="#">Fine</a></li> <br /> <li><a href="#">Mail</a></li> <br /> <li><a href="#">TOP02</a></li> <br /> <li><a href="#">NEW02</a></li> <br /> <li><a href="#">Line02</a></li> <br /> <li><a href="#">Fine02</a></li> <br /> <li><a href="#">Mail02</a></li> </ul> </span> <div id="main"> ～～ ～～ </div> <div id="footer"> <span align="center">&copy;＃</span> </div> </div> </body> </html> ＊css body { font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; margin:0px; padding:0px; } #wrapper { margin: auto; padding:auto; height: 100%; width: 800px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-left-color: #000000; border-bottom-style: solid; border-bottom-color: #000000; } #headir { padding: 0px; margin:0px; height: 220px; width: 800px; } #headir h1{ margin: 0px; padding: 0px; height:20px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-size:small; text-align: left; } .logo{ padding-bottom:20px;} #menu ul { padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; width:800px; height:100px; list-style-type : none; } #menu li{ display:inline; padding-bottom:20px; } span#sidemenu { height: 300px; width: 50px; float:left; margin-top: -19px; margin-right: 8px; margin-bottom: 0px; margin-left: 0px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000; font-size: smaller; } span#sidemenu li{ list-style-type:none; text-indent: -30px; } span#sidemenu{ padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; } div#main { margin-top: 20px; margin-right: 40px; margin-left:30px; margin-bottom:20px; font-size: small; text-align: left; left: 150px; light: 50px; height: 400px; width: 600px; } div#main　p { padding-left:10px; padding-light:20px; padding-top:10px; padding-bottom:20px; } #footer{ height:３0px; width:100%; background-color: #CC9933; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border: 1; border-left-width: 1px; border-left: 1; z-index: 2; position: relative; margin: 0; padding: 20px 0 0 20px; }

  • 2階層目の現在ページをナビで表示させるには

    こんにちわ。 WORDPRESSでホームページを作成しております。 添付画像の様にグローバルナビで現在の位置を背景色緑で表示してるのですが、1階層目の時しか表示されません。 ＷＯＲＫＳの2階層目である「コンサルティング」も同様にしたいのですが、2階層目も反映してくれるにはどの様なPHPを記述すればいいのでしょうか。 ---------ＰＨＰ記述--------- <ul id="nav"> <li<?php if(is_home()){echo ' class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> --------------------------- ---------ＣＳＳ（ＣＳＳは関係ないと思いますが、一応）------------------ #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 110px; text-decoration: none; color: #333333; border-top: 1px solid #fff } #nav li a:hover { color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; border-top: 1px solid #00645C } --------------------------- また、ページ内リンクをしたいのですが、絶対パスで単純にサーバーにアップされてるＵＲＬを記述する方法しかないのでしょうか。

    • 締切済み
    • PHP
  • ドリームウィーバーでリスト作成すると余白ができる

    ドリームウィーバーで、CSSでサイドナビをつくっています。 リストをたてにし、1項目づつボーダーでかこっています。 IE でも　ファイアーフォックスでもきれいに表示されるのですが、 ドリームウィーバー上では、左に余白ができる分、右に飛び出し、 その横のボックスが下にずれるということが起こっています。 ご指導お願いします。 ～html <div id="sidenavi"><img src="img/sidenavi.jpg" width="180" height="165"> <ul> <li> AAAAAAA</li> <li class="menu">BBBBBB</li> <li class="menu">CCCCCCC</li> <li class="menu">DDDDDDD</li> <li>HTML</li> <li>プログラム</li> </ul> </div> ～CSS #sidenavi { float: left; height: 600px; width: 180px; margin: 0px 0px 0px 2px; padding: 0px; background-color: #FFFFFF; background-image: url(img/rose.jpg); background-repeat: repeat-y; } ul { padding: 5 0 0 0px; margin: 0px; list-style-type: none; background-position: left; text-align: left; } li { width: 180px; height:25px; margin: 0 0 0 0px; padding: 5 0 0 10px; background-color: #DD041A; text-align: left; font-size: 14px; font-family: "ＭＳ Ｐゴシック", "Osaka"; border-top: 1px solid #CC0099; border-right: 1px none #CC0099; border-bottom: 1px solid #CC0099; border-left: 1px none #CC0099; color: #FFFFFF; font-weight: bold; } .menu{ margin-left: 0px; padding-left:19px; background-color: #ffffff; width: 180px; font-weight: normal; color: #333333; }

  • ホームページ作成について。

    いつも、お世話になっております。 今回、一からサイトを作るのに当たってぶち当たった壁があり どうしても自力では解決出来そうに無いので、皆様のお力をお貸し下さい。 写真を展示するページを二分割上下のフレームを作ってるんですが このフレームの下・・メニュー部分の文字同士がどうしても重なってしまうんです・・。 メニュー部分はスタイルシートを使用してるんですが、幅や高さや上下左右(marginやpadding等) をいくら調節しても、重なってしまいます。 http://cilo.web.fc2.com/photo-studio-room.html 上のURLが問題のページです・・。 そして下のが問題のスタイルシートです・・。 html{ scrollbar-arrow-color:#ccc; scrollbar-face-color:#fff; scrollbar-highlight-color:#fff; scrollbar-3dlight-color:#ccc; scrollbar-track-color:#fff; scrollbar-shadow-color:#ccc; scrollbar-darkshadow-color:#fff; } body{ background-image: url(); background-color:#fff; background-position:right top; background-repeat: no-repeat; background-attachment: fixed; padding:0; margin:0; text-align:left; } #sub{ width:980px; height:800%; } .main{ margin:10px 20px 10px 0px; padding:0px 0px 70px 0px; text-align:left; font-size:12px; line-height:1px; font-family:Verdana,Osaka,'MS P Gothic'; color:#999; } h1{ font-size:12px; color:#666666; text-align:right; font-decoration:none; font-weight:normal; font-family:'Georgia',Verdana,Osaka,'MS P Gothic'; margin:0px 270px 20px 0px; padding:0px 80px 0px 0px; } h2{ font-size:12px; color:#666; font-family:Georgia,Verdana,Osaka,'MS P Gothic'; font-weight:normal; text-align:left; letter-spacing:10px; line-height:20px; text-decoration:none; margin:30px 0px 0px 10px; padding:5px 13px; } h3{ font-size:11px; color:#333; text-decoration:underline; margin:5px 10px; padding:0px 9px; } /* メニュー部分の設定 */ #menu { text-align:center; letter-spacing:3px; } #menu ul{ list-style:none; margin:50px 0px 0px 0px; padding:0px; } #menu li{ display:inline; } #menu li a{ display:block; color:#666; border:1px solid #666; background-color:#fff; margin:10px 55px 0px 35px; padding:5px; } #menu li a:hover{ background:none; } /* テキスト設定 */ .1{ line-height:15px; padding:10px 10px 0px 10px; } /* メルフォ設定 */ form table{ margin-left:30px; } td.name{ width:8em;color:#000; text-align:right; padding:5px; float:left; } input.name{ width:20em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } input.url{ width:25em; height:2em; color:#000; font-size:10px; line-height:15px; background:transparent; border-style:solid; border-color:#000; border-width:0 0 1px 0; } textarea.text{ font-size:10px; line-height:15px; border:solid #000 1px; margin:0.5em 0; padding:0.5em; } td.post{ text-align: center; } input.post{ width:60px; height:21px; color:#000; font-size:10px; line-height:12px; background:transparent; border:solid #000 1px; text-align:center; margin:0.5em 0 0 1em; padding:0; } /*　リンク　*/ a{ text-decoration:none; } a:link{ color:#999; } a:active { color:#999; } a:visited{ color:#999; } a:hover{ color:#00ccff; } /* 画像のボーダーを0にする */ img { border:none } /* カーソル設定 */ body{cursor:url();} a{cursor:url();} ご回答よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する