• 締切済み

ウェブデザイナー、コーダーの方へ

jqery をプラグインしたらナビゲーションが押せずz-indentの配置場所と数値がわかりません。どなたか詳しい方、教えてください。 ソースはで文字数の関係で省略して重要なところ以外省略してあります。 htmlは $(function(){ $('.particales').particleground({ //要素の指定 dotColor: '#ffffff',　　　　//ドットの色 lineColor: '#ffffff', //線の色 particleRadius: 5 //ドットのサイズ }); $( '#dl-menu' ).dlmenu(); $("#toggle").click(function(){ $("#menu").slideToggle(); return false; }); $(window).resize(function(){ var win = $(window).width(); var p =660; if(win > p){ $("#menu").show(); } else { $("#menu").hide(); } }); var win = $(window).width(); var p = 660; if(win < p)$(function(){ $("#menu li a").click(function(){ $("#menu").hide(); }); }); }); </script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <script type="text/javascript" src="./lib/html5/html5shiv-printshiv.js"></script> <script type="text/javascript" src="./lib/html5/css3-mediaqueries.js"></script> <link rel="stylesheet" type="text/css" hr<a href = "index.html"></a>ef="./css/ie8.css" media="screen" /> </head> <body> <div id="layout_area" class="particales"> <header id="header_area"> <div id="logo_area"> <!--<img src="./img/logo.png" alt="logo" width="80" height="103" />--> </div> <div id="title_area"> <h1>タイトル </div> <nav id="menu-box"> <div id="toggle"><a href="#">MENU</a></div> <ul id="menu"> <li><a href="./index.html"/>HOME</a></li> <li><a href="./about/about.html"/>home</a></li> <li><a href="./fuji/fuji.html">hime</a></li> <li><a href="./product/product.html">home</a></li> <li><a href="#">home</a></li> <li><a href="./contact/contact.html">home</a></li> </ul> </nav> </header> <div id="home_right_area"> <img src="./img/area01_icn07.png" alt="ホームコメント"/> </div> <footer id="footer_area"> <small>&copy 2017　ALL RIGHTS RESERVED</small> <div id="place00"> </div></footer> </div> cssは .pg-canvas { position:fixed; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; z-index:0; } /* TEMPLATE +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ Retina parts */ @media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min-resolution:1.5dppx){ } /* TEMPLATE Retina parts end*/ /* INTERFACE */ body{ -webkit-text-size-adjust:100%; background-color:white; margin:0px; padding:0px; font-family:"游明朝", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "ＭＳ 明朝", serif; } .pg-canvas { position:fixed; top:0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; display: block; z-index:0; } #layout_area{ max-width:1680px; background-image:url("../img/main_004.jpg"); background-repeat:no-repeat; background-position:center-top; background-size:cover; height:100%; margin:0 auto; } #header_area{} #logo_area{ padding:10px 10px; } #title_area{ text-align:center; margin-top:0px; } #sub_title_area{ text-align:center; margin-top:-40px; } #sub{ font-size:16px; text-align:center; } #home_right_area { text-align:right; margin:100px 120px 0 0; display:block; } #menu { width: 100%; max-width:1680px; margin:0 auto; padding:0; display:block; } #menu li{ display:block; float: left; width: 16.6666667%; margin: 0; padding:0; } #menu li a { display: block; padding:0 20px 0 20px; background-color:; color:white; text-align: center; text-decoration: none; border-right:1px solid #4baacb; } #menu li:last-child a{ border: none; } #menu li a:link{ color:white; } #menu li a:hover{ color:blueviolet; } #toggle { display: none; } です。 .bg-canvasがparticlegroundというjqeryです よろしくお願いします。

  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

  • hymat
  • ベストアンサー率58% (95/162)
回答No.1

http://www.kerenor.jp/css3-mediaqueries-js/ の件じゃないですかね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSS　 IEバグ　リストの後の隙間を消したい

    よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>

  • テキストの揃え方について

    CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }

    • ベストアンサー
    • CSS
  • ドロップダウンメニュー

    ドロップダウンメニュについてお伺いします。下記、サンプルがWebにあったのですが メニュー1、メニュー2、メニュー3をマウスオーバーした時に選択肢が表示されます。 しかしながら横に最大3個未満の場合、余分なスペースができてしまいます。 この余分なスペースを出さないで存在する選択肢の分だけ表示表示させるようなことは できるのでしょうか。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #header-wrapper { height: 60px; } #header { height: 60px; } #site-title { padding: 10px 0 0 0; } h5 { margin-top: 20px; } #main { clear: left; margin: 20px auto; padding: 5px 20px; width: 900px; } h3 { font-size: 20px; } #sample ul { list-style:none; } #menu li { position: relative; float: left; margin: 0; padding: 5px; width: 200px; height: 20px; border: solid 1px #ccc; font-weight: bold; } #menu li:hover { color: #fff; background: #333; } #menu li ul { display: none; position: absolute; top: 30px; left: -1px; padding: 5px; width: 600px; background: #eee; border: solid 1px #ccc; } #menu li ul li { float:left; margin: 0; padding: 0; width: 200px; border: none; } #menu li ul li a { display: inline-block; width: 200px; height: 20px; } #menu li ul li a:hover { background: #999; color: #fff; } </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7");</script> <script type="text/javascript"> $(function() { $("#menu li").hover(function() { $(this).children('ul').show(); //$('#menu li ul').css('width', '200px'); }, function() { $(this).children('ul').hide(); }); }); </script> </head> <body class="archive date col-2-right fixed loggedin browser-chrome"> <div id="page"> <div id="main"> <div id="sample"> <ul id="menu"> <li id="menu1">メニュー1 <ul> <li><a href="#">サブメニュー1-1</a></li> </ul> </li> <li id="menu2">メニュー2 <ul> <li><a href="#">サブメニュー2-1</a></li> <li><a href="#">サブメニュー2-2</a></li> </ul> </li> <li id="menu3">メニュー3 <ul> <li><a href="#">サブメニュー3-1</a></li> <li><a href="#">サブメニュー3-2</a></li> <li><a href="#">サブメニュー3-3</a></li> <li><a href="#">サブメニュー3-4</a></li> </ul> </li> </ul> </div> </div><!--main--> </div><!--page--> </body> </html>

    • 締切済み
    • CSS
  • リストタグを用いた縦メニューで画像に隙間ができます（IE6）

    いつも皆さまには助けていただきありがとうございます。 さてまた今回も質問で申し訳ないのですが、リストタグを用いて縦のメニューを作成しています。 IE6でのみメニュー画像の上下に隙間が出来る現象が発生して困っております。（本当は隙間なくしたい） こちらの質問を参考にして左メニューの画像に「display:block;」や「vertical-align:bottom;」を付けてみましたが、変化なしです。 #left img{ border:none; display:block; vertical-align:bottom; } と入れたんですが、記入がおかしいでしょうか？ 色々調べてみましたが、これ以上どういじって良いのかよく分かりません。 一部省略していますがソースを載せますので間違いをご指摘いただければ大変助かります。 よろしくお願いします。 【HTML】 <html> <head> <link rel="stylesheet" href="css/ie6.css" type="text/css" /> <title>タイトル</title> </head> <body> <div id="container"> <!--ヘッダー部分--> <div id="header"> <div id="headerImg" title="タイトル"> </div><!--id:headerImgEnd--> <div id="headerMenu"> <ul> <li></li> <li></li> <li></a></li> </ul> </div><!--headerMenuEnd--> </div><!--id#headerEnd--> <div id="contents"> <!--左メニュー--> <div id="left"> <div id="left_menu"> <ul> <li><a href="a.html" id="a" title="a">a</a></li> </ul> <ul> <li id="b" title="b"></li> <li><a href="c.html" id="c" title="c"></a></li> <li><a href="d.html" id="d" title="d"></ul> </div><!--id:left_menuEnd--> </div><!--id:leftEnd--> <!--メイン--> <div id="main"> </div><!--mainEnd--> <!--フッター--> <div id="footer"> </div><!--id:containerEnd--> </div> </body> </html> 【CSS】 body{ margin:0; padding:0; text-align:center; font-size:14px; } #container{ margin:0 auto; width:800px; text-align:left; borer:solid 1px #999; } #header{ width:800px; } div#headerImg{ width:800px; height:138px; background-image:url(img/title.gif); background-color:#00FFcc; } div#headerMenu{ width:800px; } #contents{ width:800px; } /*左メニュー*/ #left{ float:left; width:180px; } #left_menu ul{ list-style:none; padding:0; margin:0; } #a{ background-image:url(../img/a.gif); width:180px; height:69px; display:block; margin-top:0px; margin-left:0px; } #b{ background-image:url(../img/b.gif); background-repeat:no-repeat; width:180px; height:30px; display:block; margin-top:0px; margin-left:0px; } #c{ background-image:url(../img/c.gif); background-repeat:no-repeat; width:180px; height:25px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#c:hover{ background-image:url(../img/c02.gif); background-repeat:no-repeat; } #d{ background-image:url(../img/d.gif); background-repeat:no-repeat; width:180px; height:24px; list-style:none; display:block; margin-top:0px; margin-left:0px; } a#d:hover{ background-image:url(../img/d02.gif); background-repeat:no-repeat; } /*メイン*/ #main{ float:right; width:620px; margin:-14px 0 0 0; } /*フッター*/ #footer{ clear:both; width:800px; height:47px; }

    • ベストアンサー
    • HTML
  • メニューボタンの背景が表示しない

    ｃｓｓでメニューボタンの背景をhoverで変更しようと思っています。 が、最初からHP上にメニューボタンが表示されません。 たびたびHPを作っていますが、今回表示されない原因がわからず、 非常に困っています。 《html》 <body id="top"> <!--　ヘッダーここから　--> <div id="wrap"> <div id="header"> <img src="./images/title.png"> </div> <!--　ナビボタンここから --> <div id="navi"> <ul id="menu"> <li><a href="top.html" >TOP</a></li> <li><a href="menu.html" >メニュー＆料金</a></li> <li><a href="access.html" >アクセス</a></li> <li><a href="question.html" >お問い合わせ</a></li> </ul> </div> <!-- コンテンツここから　--> <div id="contents"> 以下　省略 《css》 #navi{ width: 750px; height:45px; margin: 0px; } #menu { margin: 0; padding :0; list-style-type : none; } #menu li { margin:0; float:left; } #menu li a{ display:block; width: 150px height: 43px; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; } どこが間違っているのか指摘していただけないでしょうか。

    • ベストアンサー
    • 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; }

  • メニューをJavaScriptで一括更新させたい

    いつもお世話になっております。 ページが増えてしまったので、 横並びのメニューをjavaScriptで一括更新できるようにしたいのですが、 JavaScriptが勉強不足でうまく記述できません。（これから勉強していくつもりです） 今回は急ぎのため時間がなく… どうかアドバイス等、記述を教えていただけないでしょうか？ 宜しくお願いいたします。 現在メニューはこのように１ページごと書いてあります。 <div id="globalnavi"> <ul> <li id="menu1"><a href="#">Home</a></li> <li id="menu2"><a href="#">menu</a></li> <li id="menu3"><a href="#">menu</a></li> <li id="menu4"><a href="#">menu</a></li> <li id="menu5"><a href="#">menu</a></li> <li id="menu6"><a href="#">menu</a></li> <li id="menu7"><a href="#">menu</a></li> </ul> </div> CSS↓----------------------------------------------- #globalnavi{ margin: 0; padding: 0; width: ***; height: 40px; } #globalnavi ul{ list-style-type: none; margin: 0; padding: 0; } #globalnavi li{ text-indent: -9999px; float:left; width: 100px; margin: 0; padding: 0; } #globalnavi a{ display: block; width: 100%; height: 40px; background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a{background-position: 0 0;} #menu2 a{background-position: -100px 0;} #menu3 a{background-position: -200px 0;} #menu4 a{background-position: -300px 0;} #menu5 a{background-position: -400px 0;} #menu6 a{background-position: -500px 0;} #menu7 a{background-position: -600px 0;} #globalnavi a:hover{ background-image: url(画像のパス); background-repeat: no-repeat; } #menu1 a:hover{background-position: 0 -40px;} #menu2 a:hover{background-position: -100px -40px;} #menu3 a:hover{background-position: -200px -40px;} #menu4 a:hover{background-position: -300px -40px;} #menu5 a:hover{background-position: -400px -40px;} #menu6 a:hover{background-position: -500px -40px;} #menu7 a:hover{background-position: -600px -40px;}

  • CSS #containerについて

    えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }

    • 締切済み
    • CSS
  • firefoxでのリストについて

    今までIEばかりでしたので、firefoxで表示した際のデザインの崩れについてなかなか理解できずにいます。 詳しい方にアドバイスを頂ければ幸いです。 divで１つ、大きな枠を作り、その中に2つのDIVを横に並べています。 左側のみwidthの指定をし、そのなかにリストで作ったメニューを入れています。問題はこのメニューで、メニューの下に画像や文字などを普通に続けて書きたいのですが、メニューの後に書いたものが、メニューの後ろ側に表示されてしまいます。 分かりにくいと思いますが、要するに、メニューと重なってしまう状態です。メニューの後に書いた文章が、メニューが存在しない場合の位置に表示され、その上にメニューが覆いかぶさるように重なって表示されています。 どうすればいいのでしょうか？ 下記がCSSとHTMLです。 CSSーーーーーーーーーーー #big{ margin:auto; padding: 0px; background-color:#ff0000; WIDTH: 800px; height: 100%; } #left{ FLOAT: left; WIDTH: 180px; height: 100%; margin-right: 50px; margin-left: 0px; text-align: center; background-color: #FFFFFF; } #center{ text-align: left; background-color: #ffffff; } ul.menu { margin-left: 0px; margin-right: 0px; margin-top: 5px; margin-bottom: 5px; padding: 0px; height: 40px; width: 150px; /* 幅 */ background-color: #ffffff; list-style-type: none; } ul.menu li { margin: 0; padding: 0; font-size: 15px; /* 文字サイズ */ font-weight: bold; } ul.menu li a { padding: 11px 20px; display: block; color: #000099; 　　　　 background-image: url(menubotan.gif); text-decoration: none; } ul.menu li a:hover { color: #d63300; background-image: url(menubotan2.gif); } htmlーーーーーーーーーーー <div id="big"> <div id="left"> <UL class="menu"> <li><a href="index.html">TOPページ</a></li> <li><A href="mainpage.html" target="_self">メインページ</A></li> <li><A href="matsuri.html" target="_self">祭りについて</A></li> <li><A href="sannka.html" target="_self">参加申し込み</A></li> <li><A href="kanbu.html" target="_self">幹部紹介</A></li> <li><A href="syozaiti.html" target="_self">所在地</A></li> <li><A href="pics.html" target="_self">動画・写真館</A></li> <li><A href="bbs.html" target="_self">掲示板</A></li> <li><A href="links.html" target="_self">リンク集</A></li> <li><A href="otoiawase.html" target="_self">お問い合わせ</A></li> </ul> <br> ここに書いた文字をメニューに続けて表示させたいのです。 </div> <div id="center"> メイン内容 </div> </div>

    • ベストアンサー
    • HTML
  • IE でカラム落ちします。

    CSS 初心者です。 pagebodyの中に ２カラム（mainContentとsidebar1）レイアウトをしたいのですが、 IE6だけ左のmainContentがカラム落ちしてしまいます。 検索して色々試したのですが、私には理解ができず。 教えていただけると助かります。 ーーーーーcssーーーーーーー #container { width: 800px; background: #FFFFFF; margin: 0 auto; text-align: left; } #pagebody{ width: 780px; background: #D6E3FF; } #mainContent { float: leftt; width:600px; padding:0; background: #fff; } #sidebar1 { float: right; width:170px; background: #D6E3FF; } -------html------------- <body> <div id="container"> <!--navi上--> <script src="../js/h_navi.js" type="text/javascript"></script> <div id="pagebody"> <div id="sidebar1"> <ul> <li id="menu1"><a href="#">専属プロヂュース</a></li> <li id="menu2"><a href="#">出演依頼</a></li> <li id="menu3"><a href="#">メンバー紹介</a></li> <li id="menu4"><a href="#">ニュース</a></li> <li id="menu5"><a href="#">最新ニュースはこちらから</a></li> </ul> </div> <!-- end #sidebar1 --> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>テキスト</p> <p>テキスト.</p> <h2>見出し </h2> <p>テキスト</p> <!-- end #mainContent --></div><br class="clearfloat" /></div><script src="../js/footer.js" type="text/javascript"></script> </div> </body> よろしくお願いします。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する