- 締切済み
CSSでメニュー横並びの方法
ただいま、自社サイトを制作中なのですが、 グローバルメニューを横に並べるところでつまづいています。 イメージしているグローバルメニューはこんな感じです。 http://antenna7.com/ 文字だけ画像で下のラインはcssのborderで入れたいと考えています。 またメニュー数は5つで1つの幅は180px、それぞれに15pxずつ間隔を 空けたいと考えています。(1番左は15px空けない) 自分なりに調べたのですが、<ul><li>でやるべきなのかどうなのか、 どのように組めばよいのか分かりません。 皆様、お忙しいところ申し訳ございませんが、至急よろしくお願い致します。
- yutmpo
- お礼率33% (2/6)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
>グローバルメニューを横に並べるところでつまづいています。 と ><ul><li>でやるべきなのかどうなのか、 は、根本的に無関係です。--HTMLマークアップでもっとも肝要な部分== HTMLのマークアップは、文書構造にしたがって行うべきですから、デザインとは無関係にナビゲーションリンクなら、ulやol,dlでマークアップ(HTML5ならnav)すべきです。 プレゼンテーションは、それとは独立して文書構造にしたがって正しくマークアップされたHTMLをスクリーンブラウザでどのように描画するかを決めるもの。 Q: ナビゲーションリンクのリストはどのようにマークアップすべきか？ HTML4.01以前ならリストで、HTML5ならnavで Q: ナビゲーションリンクを横並びで並べたい list-styleをnoneにして、項目をブロックにし、floatで並べる。 Style Sheets in HTML documents (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html )
- outbrave
- ベストアンサー率60% (231/380)
ほとんどおわかりのようですが イメージされたサイトは、<ul><li>ですね、ソースを見れば全部わかります。 幅は、width だし、間隔は、margin で設定できます。 css も border もご存知のようですから、わからない部分を質問されてはいかがですか。
関連するQ&A
- メニューの横並びで改行されてしまう。
ul li を使用して、横並びのメニューを作成したいのですが、 最後の項目が、横に並びきれなくて、下の段に移ってしまいます。 border幅や、marginも計算してpxで指定しているつもりですが、上手くいきません(TдT) 何故ですかね？ HTML <body> <div id="wrapper"> <header> <nav> <ul> <li><a href="#">about</a></li> <li><a href="#">information</a></li> <li><a href="#">party</a></li> <li><a href="#">access</a></li> <li><a href="#">contact</a></li> </ul> </nav> </header> <!-- /wrapper --></div> CSS #wrapper { width: 985px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; } nav ul { list-style-type:none; } nav li { float:left; width:190px; border: 1px #ffb366 solid; text-align:center; margin-right:5px; }
- ベストアンサー
- CSS
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px 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:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートでのメニュー作成で
今回初めてテーブルを使わずスタイルシートでナビゲーションを作成しているのですが 下記の方法ではメニュー内のテキストが左に寄ってしまいます。 出来ればすっかり左寄せではなく、左に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
- 横並びのメニューボタンについて
float:leftでメニューボタンを横並びにしています。 表示を100％にするとうまく並ぶのですが、 100％以上にすると左端に隙間が、 100％未満にすると、ある時点からメニューボタンが2列になってしまいます。 これを回避する方法はあるでしょうか。 <<html>> <body> <div id="wrap"> <img src="image/photo1.jpg"> <div id="navi"> <!-- ナビボタン ここから --> <ul class="menu"> <li><a href="index.html" >ホーム</a></li> <li><a href="page1.html" >ページ１</a></li> <li><a href="page2.html" >ページ２</a></li> <li><a href="page3.html" >ページ３</a></li> <li><a href="page4.html" >ページ４</a></li> <li><a href="page5.html" >ページ５</a></li> </ul> </div> <!-- /navi --> </div> <!-- /wrap --> </body> <<css>> body { text-align: center; background-color:#EEEEEE; font-size: 12px; margin-top: -10px } #wrap{ margin: 0 auto; text-align: left; background-color: #ffffff; width: 752px; border: 1px solid #404040; border-collapse: collapse; padding: 0; } .navi{ width:750px; } ul.menu { margin: -5 0 0 0px; padding :0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 125px; line-height: 30px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(menu1.jpg); background-repeat: no-repeat; color: #ffffff; font-size: 12px; } ul.menu li a:hover{ background-image: url(menu2.jpg); color: #404040; } よろしくお願いします。
- ベストアンサー
- HTML
- CSSで画像を横並びに
CSSで画像を3枚横並びにしたいのですが、 IEで見ると右肩下がりになってしまいます。 詳しくないので、教えていただけると幸いです。 ◆html <ul> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgl30 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgr42 mgt10"></a></li> <li><img src="images/xx.gif" alt="" width="118" height="189" border="0" class="fleft mgt10"></a></li> </ul> ◆css .fleft { float:left } .mgr42{ margin-right:42px } .mgl30{ margin-left:30px } .mgt10{ margin-top:10px }
- ベストアンサー
- CSS
- CSSでプルダウンメニュー
お世話になります。 添付画像のようなプルダウンメニューを作りたいです。 http://css-eblog.com/csstechnique/css-8.html こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。 問題はマウスオーバーさせたい画像の高さ（60px）とプルダウンで出てくるもの（画像は使用せずCSSで背景色をしたバー状になっています）の高さ（20px）が異なることです。 添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。 ※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。 そこでソースの値を .menu ul li a { display: block; height: 20px;←ココ padding:3px; } と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。 知識がなくどうしていいのかサッパリ分かりません。 どうか助けて下さい！ 下記ソースです。 /* CSS*/ .menu { margin:0px auto; padding:0px; width:760px; height:60px; } .menu ul li { float: left; position: relative; margin-right: 0px; width: 128px; height: 20px; list-style:none; } .menu ul li table { border-collapse: collapse; border: none; font-size: 10px; padding: 0; position: absolute; top: 0; left: 0; } .menu ul li ul { visibility: hidden; overflow: hidden; position: absolute; top:60px; left: 0px; width: 128px; height:20px; z-index: 100; } .menu ul li ul li { margin-bottom: 0; width: 128px; height: 20px; } .menu ul li a { display: block; height: 60px; padding:3px; } .menu ul li a:hover { position: relative; z-index: 100; } .menu ul li:hover ul , .menu ul li a:hover ul { visibility: visible; overflow: visible; height: auto; z-index: 10; } .menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;} .menu li.sub { background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;} a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/ a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;} a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;} a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;} <!--html--> <div class="menu"> <ul> <li class="test"><a href="test.html"><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="sub"><a href="test.html" class="sub">リンク先1</a></li> <li class="sub"><a href="test2.html" class="sub">リンク先2</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 長文申し訳ありません。よろしくお願い致します。
- ベストアンサー
- CSS
- ＣＳＳレイアウト マージンについて
下記のタグにてメインスペースを両側10pxにしたいのですが、うまくいきません。 下記のようなレイアウトにてうまくmarginなどを行う場合は どのようにしたらよろしいでしょうか？ なお簡単にタグを記載してくださいますと幸いです。 ＣＳＳ body { margin:3em; color:#339900; background:#ffffff; } h1 { padding:0.1em; text-align:center; leter-specing:1em; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .mainspace { background:#aaaaaa; width:480px; margin-right:10px; margin-left:10px ; position:absolute; left:260px; } .leftmenu { background:#bbbbbb; width:200px; position:absolute; left:50px; } .rightmenu { background:#cccccc; width:200px; position:absolute; right:50px; } ＨＴＭＬ <h1>メインタイトル</h1> <div class="mainspace"> <h2>サブタイトル</h2> <p> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> </p> </div> <div class="leftmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> <div class="rightmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div>
- ベストアンサー
- HTML
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- 【CSS】float横並びメニューに余白ができてしまいます
リストをfoat:leftさせ横並びのメニューを作っています．下記画像の赤枠の幅に（包含されているdivのボーダーを赤線にしています）メニューをぴったり収めたいのですが，左右に余白ができてしまいます． いろいろネット等で調べてみましたが原因がわかりません．ご教授よろしくおねがいします． ------CSSソース----------------------------------------------------- /*グローバルナビゲーション */ .globalnavi{ width:770px; height:30px; margin:0; padding:0; border:1px solid #cc0000; } .gloabalnavi ul{ height:30px; margin:0; padding:0; background:#ffffff; list-style:none; } .globalnavi li{ float:left; margin:0; padding:0; } .globalnavi span{ display:none; } .globalnavi a{ height:30px; display:block; background-repeat:no-repeat; } li#m1{ width:154px; background-image:url(../image2/menu1.gif); background-position:0px -30px; } li#m1 a{ background-image:url(../image2/menu1.gif); } li#m1 a:hover{ background-image:none; } li#m2{ width:154px; background-image:url(../image2/menu2.gif); background-position:0px -30px; } li#m2 a{ background-image:url(../image2/menu2.gif); } li#m2 a:hover{ background-image:none; } li#m3{ width:154px; background-image:url(../image2/menu3.gif); background-position:0px -30px; } li#m3 a{ background-image:url(../image2/menu3.gif); } li#m3 a:hover{ background-image:none; } li#m4{ width:154px; background-image:url(../image2/menu4.gif); background-position:0px -30px; } li#m4 a{ background-image:url(../image2/menu4.gif); } li#m4 a:hover{ background-image:none; } li#m5{ width:100px; background-image:url(../image2/menu5.gif); background-position:0px -30px; } li#m5 a{ background-image:url(../image2/menu5.gif); } li#m5 a:hover{ background-image:none; } ------------------------------------------------------------------ -----HTML ソース-------------------------------------------------- <div class="globalnavi"> <ul> <li id="m1" title="研究室紹介へのリンク"><a href="#"><span>大学紹介</span></a></li> <li id="m2" title="スタッフへのリンク"><a href="#"><span>スタッフ</span></a></li> <li id="m3" title="研究設備へのリンク"><a href="#"><span>研究設備</span></a></li> <li id="m4" title="アーカイブへのリンク"><a href="#"><span>アーカイブ</span></a></li> <li id="m5" title="外部リンクへのリンク"><a href="#"><span>リンク</span></a></li> </ul> </div><!--div globalnavi finish--> ------------------------------------------------------------------
- ベストアンサー
- HTML
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
