- 締切済み
囲っているメニューの下にtwitterを載せたい
今スタイルシートでホームページを作っていて、メニューの下にtwitterを載せたいと思っているんです。 メニューは div#menu{ float:left; margin:0 auto; padding:10px; width:200px; border:1px dotted black; } という設定（？）にしています。 メニューの中に入れてしまうとtwitterもドットに囲まれてしまいます。 なのでメニューの下に表示させたいのです。 何も気にせずにタグを入力すると真横に表示されてしまってデザインが崩れてしまうんです。 訳が分からなくて申し訳ありません。 添付画像を見ていただければ分かりやすいかと思います。 よろしくお願いします。
- hamu72
- お礼率63% (7/11)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
関連するQ&A
- Fire foxで2カラムの表示が乱れる
こんにちは。 閲覧していただいてありがとうございます。 現在会社のサイトをコーディングしています。 IEでは問題なく表示されるのですが Fire foxで確認したところ、2カラムの部分の表示が乱れてしまいます。 具体的に言うと、 メニュー（左側）の横にメイン（右側）が並ぶ状態が メニュー（左側）の下に回り込んでしまう状態です。 floatの設定に問題があるのかなと思うのですが どうも分かりません； 以下がソースになります。 申し訳ないのですが、少し急いでいるので お早めにご教授いただけると助かりますm(_ _)m ＜HTMLソース＞ <div id="layout"> <div id="header">ヘッダー</div> <div id="contents"> <div id="menu">メニュー（左側）</div> <div id="mein">メイン（右側）</div> </div> <div id="footer">フッター</div> </div> ＜CSSソース＞ #layout{ margin:0px; padding:0px; width:762px; text-align:left; background-color:#fff; border-right:1px solid #ccc; border-left:1px solid #ccc; } #header{ margin:0px; padding:0px; } #contents{ margin:0px; padding:0px; width:760px; } #menu{ margin:0px; padding:0px; width:190px; line-height:1.5em; float:left; background-color:#f4f4f4; border-right:1px dotted #ccc; border-left:1px dotted #ccc; border-bottom:1px dotted #ccc; } #mein{ margin:0px; padding:15px; width:550px; float:left; } #footer{ margin:0px; padding-left:195px; width:760px; clear:both; border-top:1px dotted #ccc; line-height:1.3em; }
- ベストアンサー
- HTML
- IE6で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。 〈html〉 <html> <body> <div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div> <div class="header"><a href="#" border="0"> <div class="rogo"> </div> </a> <div id="globalnavi"> <ul> <li id="menu1"><a href="#">メニュー1</a></li> <li id="menu2"><a href="#" >メニュー2</a></li> <li id="menu3"><a href="#">メニュー3</a></li> <li id="menu4"><a href="#">メニュー4</a></li> <li id="menu5"><a href="#">メニュー5</a></li> <li id="menu6"><a href="#">メニュー6</a></li> </ul> </div> <div class="main"></div> </div> </body> </html> <CSS> .headbg { height:400px; width: 100%; min-width:900px; border:0px solid #F00; position:absolute; top:66px; left:0; overflow:hidden; background: url(head_bg_bg.jpg); background-repeat:repeat-x; } .rogo { background-image: url(rogo.jpg); background-repeat: no-repeat; height: 160px; width: 160px; padding: 0px; margin-top: 8px; margin-right: 0px; margin-bottom: 11px; margin-left: 33px; position: relative; border: 0px solid #000; clear: both; float: left; position:relative; } .header { width: 900px; height:300px; padding:0px; margin-left: auto; margin-right:auto; text-align:left; margin-top:0px; border:0px solid red; } .main { height:920px; width: 900px; min-width:900px; background-color:#ffffff; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto; text-align: center; margin-top:65px; } #globalnavi { margin-left:auto; margin-right:auto; margin-top:-170px; text-align:left; top:0px; left:0px; padding:0px; width:700px; height:52px; list-style:none; overflow:hidden; border: 0px solid red; float:right; clear:both; } #globalnavi ul { list-style-type: none; margin: 0; padding: 0; height: 52px; overflow: hidden; } #globalnavi li { text-indent: -9999px; float:left; width: 116px; height: 52px; margin: 0; padding-right: 0px; border:0px solid #333; } #globalnavi a { display: block; position: relative; width: 100%; height: 52px; } #menu1 a { background: url(menu1_active.jpg) no-repeat 0 0; left:0px; margin-left:0px; } #menu2 a { background: url(menu2.jpg) no-repeat 0 0; margin-left:0px; } #menu3 a { background: url(menu3.jpg) no-repeat 0 0; margin-left:0px; } #menu4 a { background: url(menu4.jpg) no-repeat 0 0; margin-left:0px; } #menu5 a { background: url(menu5.jpg) no-repeat 0 0; margin-left:15px; } #menu6 a { background: url(menu6.jpg) no-repeat 0 0; margin-left:15px; }
- ベストアンサー
- ネットトラブル
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- CSSでページ作成、Firefoxでうまく表示できません
ご教授いただけますでしょうか。 CSSでページ作成を試みていますが、IEでは思ったとおりに表示されますが、Firefoxでは崩れてしまいます。 内容は、大枠の中に、ヘッダーと左右のフロート（左：メニュー、右：内容）のシンプルなデザインです。 以下、CSS部分です。 /* 大枠 */ #container { width: 800px; margin-right: auto; margin-left: auto; margin-top: 0px; margin-bottom: 0px; background-color: #FFFFFF; font-size: 13px; border-left: 1px #663333 solid; border-right: 1px #663333 solid; border-top: 1px #663333 solid; border-bottom: 1px #663333 solid; padding: 5px; text-align: left; } /* ヘッダー */ .header { width: auto; height: auto; background: url(img/header.jpg) repeat-x; margin: 0px; } /* メニュー */ .left { float:left; width:20%; background-color:#ffffff; padding: 5px; } /* 内容 */ .right { float:right; width:75%; background-color:yellow; padding: 5px; } ここからHTMLに書き込んだものです。 <div id="container"> <div class="header"> ヘッダー </div> <div class="left"> メニュー </div> <div class="right"> 内容 </div> </div> Firefoxでは、大枠にあたる container 部分が、ヘッダーしか囲まず、メニューと内容部分がその下に表示されます。 どこがおかしいか、ご指摘いただければ幸いです。 どうぞよろしくお願い申し上げます。
- ベストアンサー
- CSS
- IEとFirefoxの見え方のずれにおけるCSSの解決法（liタグ）
こんにちは、質問させて下さい。 現在 li タグを使って、メニュー（画像）を作っていたのですが、 IEでは表示されるのですが、firefoxだとどうしても左に余白が出てしまいます。 マーカーボックスの指定が消えていないのかな、と素人ながらに思うのですが、それが正しいのか、正しくとも正しくなくとも、ではどう直せばいいのか分かりません。 どうぞご回答お願いいたします。 以下は、そのliに関連するCSSと、ソースです。 ■CSS #div{ width: 458px; float: left; text-align: center; border-top-width: 2px; border-bottom-width: 2px; border-top-style: dotted; border-bottom-style: dotted; border-top-color: #333333; border-bottom-color: #333333; padding-top: 10px; padding-bottom: 10px; margin-bottom: 15px; margin-right: auto; margin-left: auto; padding-left: 10px; } #div ul{ list-style-type:none; display: block; width: 432px; text-align: center; margin: 0px; } #div li { float: left; height: 200px; width: 140px; margin-right: 4px; margin-bottom: 10px; margin-top: 0px; margin-left: 0px; } #div li img{ border:none; ■html <div> <ul> <li><a href="1.html"><img src="image/menu1.jpg" alt="品"></a></li> <li><a href="2.html"><img src="image/menu2.jpg" alt="品"></a></li> <li><a href="3.html"><img src="image/menu3.jpg" alt="品"></a></li> <li><a href="4.html"><img src="image/menu4.jpg" alt="品" /></a></li> <li><a href="5.html"><img src="image/menu5.jpg" alt="品"></a></li> <li><a href="6.html"><img src="image/menu6.jpg" alt="商"></a></li> </ul> </div> 宜しくお願いいたします。
- ベストアンサー
- HTML
- floatとclearを使ったレイアウト作成について
http://www.ario-nishiarai.jp/ 上記のサイトのようなページ中央より下のレイアウトを作りたいと思い、下記のようにコーディングしました。 <html> <head> <title>Ｗｅｂ</title> <style type="text/css"> .container {text-align:left;width:760px;margin:0px auto;background-color:#FFFFFF;} .content1 {width:760px; height:200; padding:0px; border:1px solid #999999;} .content2 {width:760px;padding:0px;border-right:1px solid #999999; border-bottom:1px solid #999999; border-left:1px solid #999999; margin:0;} .box1 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box2 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box3 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box4 {width:180px; float:left; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px; margin-bottom:10px;} .box5 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .box6 {width:220px; float:right; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .news {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;} .topics {width:350px; height:200; overflow:auto; border-top:1px solid #CCCCCC; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; margin-top:5px; margin-left:5px;}solid #CCCCCC; margin-top:5px; margin-left:5px;} </style> </head> <body> <div class="container"> <div class="content1"> 画像 </div> <div class="content2"> <!--左側--> <div class="box1"> タイトル<br /> メニュー </div> <div class="box2"> タイトル<br /> メニュー </div> <div class="box3"> タイトル<br /> メニュー </div> <div class="box4"> タイトル<br /> メニュー </div> <!--中央--> <div class="news"> あ </div> <div class="topics"> い </div> <!--右側--> <div class="box5"> う </div> <div class="box6"> え </div> </div> </div> </body> </html> box1、box2、box3、box4のボックスは左側に、news、topicsのボックスは中央に、box5、box6のボックスは右側にレイアウトしたいと思っています。 floatとclearを使って作成するのだと思うのですが、どうコーディングしたら良いのかわかりません。 どこをどう直したら良いかアドバイスいただけますようお願いします。
- ベストアンサー
- HTML
- ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。 どこが間違っておりますか？ アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
- IE6でfloatされない。
IE6でfloatされない。 横幅950pxのコンテンツの中に divで3つのboxを作って横一列に並べているのですが ie7,8, firefoxでは意図した通りに表示されますがie6ではdiv id="c"（下記ソース）がfloatされません、どなたか解決策をご指導お願いします。 <div id="a"><img src="img/left.png" width="403" height="240" alt="スペース左" title="" /></div> <div id="b"><iframe name="iframe3" id="iframe3" frameborder="0" scrolling="no" src="home.html" title="******">*******</iframe></div> <div id="c"><img src="img/right.png" width="403" height="240" alt="スペース右" title="" /></div> css記述は下記の通りです #a{ 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 : 403px; height : 240px; float : left; display : inline; } #b{ 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 : 144px; height : 240px; float : left; display : inline; } #c{ 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 : 403px; height : 240px; float : left; display : inline; } #iframe3{ border-width : 0px 0px 0px 0px; margin-left : 0px; width : 144px; height : 240px; padding-top : 0px; overflow : hidden; margin-top : 0px; margin-right : 0px; margin-bottom : 0px; padding-bottom : 0px; padding-left : 0px; padding-right : 0px; } 宜しくお願いします。
- 締切済み
- HTML
- CSSでの破線の表示方法
下記のような破線をボトムまで引きたいです。 http://designbeans.com/ div#sub{ width: 200px; margin-top: 30px; margin-left: 10px; border-right: 0.1em dotted #333333; float: left; } と記述したのですが、ボトムまで引いていません。どうすればボトムまで引けるのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- 改行がある場合不揃いになる
以下のように改行があっても下線を揃えられる方法ってないでしょうか？ <dl> <dt>あああ</dt> <dd>いいい</dd> <dt>ううう<br />ううう</dt> <dd>えええ</dd> <dt>おおお</dt> <dd>かかか</dd> </dl> dl { padding: 0.5em 0; width: 390px; } dl dt { float: left; width: 65px; margin-bottom: 15px; padding: 5px 0 8px 15px; clear: both; border-bottom: 1px dotted #736357; } dl dd { margin-left: 80px; margin-bottom: 15px; padding: 5px 0 8px 10px; width: 289px; border-left: 1px dotted #736357; border-bottom: 1px dotted #736357; } 現在このような状況なのですが改行が入ると下線(border-bottom)がずれるのでバランスが悪く なってしまいます。 全てdlでくくってやれば問題ないのですが上記の場合でも揃えられる方法がありましたら 教えてください。
- 締切済み
- HTML
お礼
遅くなって申し訳ありません。 回答ありがとうございました。 せっかく答えてくださったのですが私の理解力不足のため出来ませんでした。 結局メニューの囲いは削除し、そのまま下に並べました。 ありがとうございました。