- 締切済み
Flashファイルの上にナビゲーションを配置したい
W750px×H300px のFlashファイルの左上に、W180pxの<ul>～</ul>でできたナビゲーションを配置したいのですが、Flashの下側にいってしまい、表示できません。 これは、できないことなのでしょうか？ <ul>～</ul>はcssのposition:absolute; で配置しようとしています。 すみませんが、お分かりになる方よろしくお願いします！
- みんなの回答 （1）
- 専門家の回答
みんなの回答
関連するQ&A
- FOOTERを３カラムで配置したい
こんにちは。いつもお世話になっています。 質問は題名の通りです。footerを3カラム使い、3列で配置したいと考えています。 CSS ---- /* フッター */ div#FOOTER { width:100%; border-top: 1px solid #204460; border-bottom: 4px solid #204460; background: #507EA1 ; } div#FOOTERleft{ position:absolute; left:0; width:33%; } } div#FOOTERmiddle{ position:absolute; width:34%; margin-left:33%; margin-right:33%; } div#FOOTERright{ position:absolute; right:0; width:33%; } --- html <div id="FOOTER"> <div id="FOOTERleft"> <h2>連絡先</h2> <ul> <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li> </ul> </div> <div id="FOOTERmiddle"> <h2>連絡先</h2> <ul> <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li> </ul> </div> <div id="FOOTERright"> <h2>連絡先</h2> <ul> <li id="FOOTER01"><a href="#PAGETOP">TOP</a></li> </ul> </div> </div> と書いたのですが、なぜかFOOTERleftとFOOTERmiddleの間に隙間ができ、FOOTERrightは他2つの下側に配置されます。 手元のWeb標準の教科書を参考に頑張ってみましたが、うまくできませんでした。 どなたか正常に配置することができる書き方を教えてください。 どうかよろしくお願いします。
- ベストアンサー
- CSS
- ナビゲーションを横並びにして真ん中配置にしたい
ナビゲーションをulタグを使って作り、横並びにしています。 さらにそれをブラウザの真ん中に配置したいのですが、真ん中になってくれません。 HTMLは以下のようにしています。 <div id="menu_top"> <ul> <li>Profile</li> <li>Information</li> <li>History</li> <li>Invitation</li> </ul> </div> CSSは以下のとおりです。 #menu_top{ margin:auto; width:90%; height:20px; text-align: center; } #menu_top li{ float:left; list-style-type:none; margin:15px; } あとbody要素にはtext-align:centerを入れています。 現状では、ナビゲーション自体は横並びになるものの、左に寄っています。横並びのまま、真ん中に表示させるにはどのようにしたらいいでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- wordpressナビゲーションの固定をしたい
wordpressテンプレートtwentytwelveを使用しています。 このナビゲーションメニュー（main-navigation）を、リキッドデザインではなく、ブラウザサイズを縮小しても、メニューボタンを縦に改行しないように固定にしたいのですが、方法がわかりません。 いろいろと方法を試したのですが、解決の糸口がつかめません。 どなたかお分かりになる方いらっしゃいますでしょうか？ ----------------------------------------------- /* Assistive text */ .assistive-text, .site .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); } .main-navigation .assistive-text:focus { background: #fff; border: 2px solid #333; border-radius: 3px; clip: auto !important; color: #000; display: block; font-size: 12px; padding: 12px; position: absolute; top: 5px; left: 5px; z-index: 100000; /* Above WP toolbar */ } /* Navigation Menu */ .main-navigation { margin-top: 24px; margin-top: 1.714285714rem; text-align: center; } .main-navigation li { margin-top: 24px; margin-top: 1.714285714rem; font-size: 12px; font-size: 0.857142857rem; line-height: 1.42857143; } .main-navigation a { color: #5e5e5e; } .main-navigation a:hover { color: #21759b; } .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { display: none; } .main-navigation ul.nav-menu.toggled-on, .menu-toggle { display: inline-block; }
- ベストアンサー
- CSS
- cssでのナビゲーションのレイアウトについて
ナビゲーション用のロゴとメニュー用ボタンをflashで作り、cssでレイアウトを試みているのですが、希望の通りにできません。 希望のレイアウトは、 ※ヘッダー（サイズ：760×59.8PX）の左端にロゴマーク（126×59.8PX）、その右側にメニュー用のボタンを配置。 ※メニューボタンは全部で３つあり、A（サイズ：80×36PX）、B（75×34.2PX）、C（75×36.3PX）で、ロゴの右側になるべく等間隔で配置したい。 というものです。 これまでに試したのは、 １、<header>内に、ロゴとメニューのボタンを全てリスト化して配置し、一つずつmarginのサイズ調整。結果、IEではヘッダーのサイズが上下に広がり、ロゴの下側にメニューが３つ並びます。 FireFoxでは、ヘッダーのサイズは指定のままですが、メニューがヘッダーの下側に並んでしまいます。 ２、次に、ロゴとメニューを左右にfloatで振り分けようとしたところ、IEでは全てのボタンがヘッダー内の左上に固まってしまい、FFでは、メニューボタンが本文にかぶさってしまいました。 長い質問になってしまって申し訳ありませんが、改善点をご指摘いただけないでしょうか？よろしくお願いいたします。
- ベストアンサー
- CSS
- marginとナビゲーションの位置がずれる
質問初投稿で、現在webデザインを勉強中の者です。 あまり慣れていないので文章の拙さはご容赦ください。 現在自主制作中のWebサイトがあるのですが、 ナビゲーションをposition:fixedで固定に画面の下に配置するように設定しています。 そのまま上部に画像を配置しようと、margin-left;などで調節していたのですが、 ナビゲーションの位置がズレてしまい不自然な空白や、ナビゲーションそのものが消えるという状態になってしまいました。 margin-leftを1pxでも入れると右端から消えてしまいます。 paddingやposition:absoluteなどの別の方法も試してみましたがmarginと同じ状態になってしまいます。 もしかしたら別の画像を上に配置しているので、それが原因かもしれません。 どうしても自分では解決できないので、解決方法を教えていただきたいです。 画像はmargin-leftに数値を入力した時のものです。 #footer { margin: 0px; padding: 0px; position: fixed; left: 0%; bottom: 20px; width: 100%; height:44px; } #item{ margin-left:34px; margin-right:34px; margin-top:34px; } #fruits{ margin-left:34px; }
- 締切済み
- CSS
- positionの設定の仕方について
中央に1つの大きな画像を配置。 そしてその画像の左右の任意の位置に、リストを配置しようと考えています。 しかし、以下のような表記にしましたがリストが思うように配置されません。 職場ではリストの配置まではうまく行きました。 が、自宅の環境で見ると、職場とはどこかの設定が違っているのか、DW8上では配置されているのですが、ブラウザ上(IE、Ff)ではリストが全く動いていません。 画像はきちんと配置されています。 どうしてこういう違いがでるのかさっぱり分からず、質問させてもらいました。 よろしくお願いします。 <!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"> <head><title>ポジションタグ練習用ページ </title> <link href="css/position2.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="position"> <ul> <li id="01"><a href="1.htm">あいうえお</a></li> <li id="02"><a href="2.html">かきくけこ</a></li> </ul> <img src="images/flower.jpg" alt="花" width="260" height="402" id="img"> </div> </body> </html> -------------------- #position { position: relative; left: 0px; top: 0px; } #img { position: relative; height: 402px; width: 260px; left: 85px; top: 0px; } #01 { position: absolute; height: 20px; width: 100px; left: -11px; top: 0px; background: #FFFFCC; } #02 { position: absolute; height: 20px; width: 100px; left: 360px; top: 26px; background: #FFCC99; }
- ベストアンサー
- HTML
- 要素の配置方法について・・・
要素を直接配置する方法として、 CSSのpositionで指定する方法がありますよね。 今、XHTML1.0Trasionalでホームページを作っているのですが、 position:relative; top:0px; left:0px; と指定してもうまくいきません。（ピクセルは今だけ0にしました） position:absolute;でもやってみたのですが、 変わりませんでした。 だれか、この解決策を知っている方はおらっしゃるでしょうか？ 知っていたのなら、ぜひお教えください。 ただ単に、私が間違っていたと言う事もありえますので、 うちでは、ちゃんとなったよ！ という人もおられましたら、 是非ご回答お願いします。
- 締切済み
- HTML
- CSSで左右の中央配置
CSSでのレイアウトを考えております。 ┌──────────────┐ │MainBox(W760px) │ │┌─────┐┌─────┐│ ││boxA ││boxB ││ ││(W300px) ││(W300px) ││ │└─────┘└─────┘│ │ │ └──────────────┘ ↑このようなかんじなのですが、 boxAとboxBの配置はabsoluteを使って成功したのですが、MainBoxごとプラウザの横幅を変えても左右の中央配置にしたいのですが、どのようにしたらよろしいのでしょうか？ 同じような質問を参考にしてみたのですが、うまくいきませんでした。すいませんが、どなたか助けてください。
- ベストアンサー
- HTML
- potitionがよくわかりません＞＜
positionがよくわかりません。 【 HTML 】 <div> <h1>携帯はひとり2台の時代へ</h1> <h2>使い分ける人急増</h2> </div> 【 CSS 】 div{ width: 500px; height: 100px; background-image: url("title.jpg"); background-repeat: no-repeat; } h1 { position: absolute; top: 28px; left: 100px; font-size: 30px; } h2 { position: absolute; top: 2px; left: 12px; font-size: 14px; } ニュース番組のようなテロップ(CSSのbackground-image)に、見出し(HTMLのH1～H2)を載せていこうと考えています。これでブラウザで表示したら、文字が背景に載って大成功です。 それで、div以前にいろんな要素を配置したら、配置が崩れました＞＜。topやleftの配置はブラウザの表示領域を基準としているみたいです。divを基準にしたいのですが、どうすればよいでしょうか。
- 締切済み
- CSS
- CSS質問：大手サイトを見ると何故ナビゲーションはリスト(<ul>、<li>)でつくられているんでしょうか？
CSSコーディングで質問です。 大手の企業サイトを見ると、どこもナビゲーションはリスト(<ul>、<li>)でつくられていますが、これは何故なんでしょうか？ 全部position:absoluteではどこかに難点でもあるのかな・・・ メインナビゲーションは10項目以上あるのですが、それ以外に別の場所に「お問い合わせ」「サイトマップ」「会員登録」などのナビゲーションがデザイン的にみて不規則な位置に並べる必要があります。 absoluteで全部やればダメかなと思うのですがどこかにダメな点があるんでしょうね。 もしかしてSEO的に見ると必要だとかあるのかな・・・ 宜しくお願い致します。
- ベストアンサー
- HTML
