- ベストアンサー
ブラウザの文字サイズを変更すると画像がはみ出る
- ブラウザの文字サイズを変更すると、メニューの画像が表示されない問題について解決方法を教えてください。
- スタイルシートを使用して、メニューの画像が文字サイズの変更に影響されないように設定する方法を教えてください。
- ブラウザの文字サイズを変更すると、メニューの画像がはみ出る問題が発生しています。どうすれば正しく表示されるようになるのでしょうか?
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- スタイルシート a:activeで画像を変える
スタイルシートの設定で画像メニューの切替を行おうとしていたんですが a.activeの設定の時のみ画像切替の反応が見られません。 どうしたらいいでしょうか? 切替はclip:rect(top right bottom left)を使って一枚の画像の表示範囲で切り換えています。 【htmlメニュー部分】 <div class="MENU"> <a href="./"><img src="btn001.png"></a> </div> <div class="MENU"> <a href="./"><img src="btn002.png"></a> </div> 【スタイルシート部分】 IMG.MENU{ position:absolute; } DIV.MENU{ border:none; position:relative; float:left; } DIV.MENU A:link IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:visited IMG{ clip:rect(0px 133px 25px 0px); top:0px; } DIV.MENU A:hover IMG{ clip:rect(50px 133px 75px 0px); top:-50px; } DIV.MENU A:active IMG{ clip:rect(25px 133px 50px 0px); top:-25px; } よろしくお願いします。
- ベストアンサー
- CSS
- フレーム使用時のメニューバーについて
フレームを使ったホームページを作成しました。 フレームのファイル名をindex.htmlに index.htmlだったファイルをtop.htmlにかえて アップロードしたところ、 メニューバーがきちんと表示されません。 パソコン上で確認するときは問題ないので 理由が分かりません。 どなたか教えてください。 メニューのHTMLは <style type="text/css"><!-- body {background-color:firebrick} div.menutitle {color:white; font-family:'Comic Sans MS'; font-size:40px; font-weight:bold; border-bottom-style:dotted; border-bottom-color:white; margin-bottom:30px} a:link {color:white} a:visited {color:yellow} a {text-decoration:none; font-size:18px; font-weight:bold;} div.menu {font-family:'Arial'; background-color:maroon; padding-left:5px; padding-top:7px; padding-bottom:7px; margin-bottom:10px} --!></style> </head> <body> <div class="menutitle" lang="en">menu</div> <div class="menu"> <a href="top.html" target="main">top</a></div> <div class="menu"> <a href="">gallary</a></div> <div class="menu"> <a href="http://8520.teacup.com/**/bbs" target="main">bbs</a></div> <div class="menu"> <a href="">link</a></div> </body> </html> です。よろしくおねがいします。
- ベストアンサー
- HTML
- wordpress でのhtml 記述とCSS
wordpressのテーマを作成しているのですが、 PHP内のhtml記述で、メニューリストを横並びに表示させたくて 投稿ページと固定ページをリストメニューにしています。 が、投稿ページのli要素が横並びになってくれません。 どこが間違っているのでしょうか。 【html】 <ul> <span class="menu"><?php wp_list_categories('title_li='); ?></span> <li class="menu"><a href=#" target="_self">Stance</a></li> <li class="menu"><a href="#" target="_self">Artists</a></li> <li class="menu"><a href="#" target="_self">Disc</a></li> <li class="menu"><a href="#" target="_self">Video</a></li> <li class="menu"><a href="#" target="_self">Contact</a></li> <li class="menu"><a href="#" target="_blank">teitter</a></li> </ul> 【css】 .menu{ display:inline; margin-right:85px; text-decoration:none; list-style-type: none; }
- 締切済み
- ブログ
- メニューボタン
ホームページ作成初心者です。 よろしくお願いします。 メニューボタンのことで質問させてください。 テーブルにて横方向にボタン画像を並べました。 ボタン画像はスタイルシートで指定しております(リンクテキストは別) <html> <head> <style type="text/css"><!-- table{ border-collapse:collapse; } .td1{ background-image:url(menu01.gif); padding:0px; border:0px solid #0000FF; background-color:#FFFFFF; width:90px; height:25px; font-size:12px; } --></style> </head> <body> <table> <tr> <td class="td1"><a href="">トップページ</a></td> <td class="td1"><a href="">次のページ</a></td> <td class="td1"><a href="">その次のページ</a></td> </tr> </table> </body> </html> このような場合で、リンクもしくはボタン画像にマウスポインタを 乗せると画像が入れ替わるというようなことは出来ますか? もし、お分かりの方がいましたら教えて下さい。 宜しくお願いします。
- ベストアンサー
- HTML
- フレームを使って細いメニューを作りたいです。
フレームを使って細いメニューを作りたいです。 フレームを使って下のほうに細いメニューを表示したいと思っています。 しかし文字の上に一行分くらいの隙間が開いてしまい、 メニューの文字がスクロールしないと表示されません。 メニューの作り方も調べましたが、ここまで細いものについてはわかりませんでした。 どうしたら上手く表示できるでしょうか。 完成ページ↓ <html> <head> <title></title> </head> <frameset rows="*,3%" frameborder="NO" border="0"> <frame src="PageTop.html"> <frame src="Menu.html" noresize scrolling="NO"> <norames><P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </frameset> </html> PageTop.html↓ <html> <head> <title></title> </head> <body></body> </html> Menu.html↓ <html> <head> <title></title> <style type="text/css"> <!-- p { text-decoration: none; } --> </style> </head> <p> <body bgcolor="#696969" link="#696969" alink="#696969" vlink="#696969"> <font face="Kartika"><div style="font size:20px;"> <target="1" href="">Top</a> <target="1" href="">About</a> <target="1" href="">Main</a> <target="1" href="">Blog</a> <target="1" href="">Link</a> <target="_top" href="">Index</a> </font></p> </body> </html> 至らない点がありましたらご指摘ください。 よろしくお願い致します。
- ベストアンサー
- HTML
- ウィンドウサイズと文字の表示位置指定
縦2分割フレーム(フレームサイズは固定)のページの左側のコンテンツメニュー一覧を置いてます。 文字は今現在左寄せ指定です。 そのメニュー一覧文字の見え方を、左寄せ・ウィンドウ底辺合わせのデザインにしたいと思ってます。 その場合閲覧する方が任意の大きさにウィンドウの縦サイズを変えても、「底辺合わせ」を保つにはどうしたら良いでしょうか? (ウィンドウに下部に文字が固定される感じです) 背景画像とかだとできるのですが文字も可能でしょうか? 現在タグは以下です。 . . . <BODY> <P align="right"><BR> <A href="***.html" target="1">1</A><BR> <A href="***.html" target="1">1</A><BR> <A href="***.html" target="1">1</A><BR> </P> </BODY> </HTML>
- 締切済み
- HTML
- スタイルシートでリンクターゲットの指定
<a href="" target="_blank"> スタイルシート(class)で上記のようにリンクターゲットを指定することは可能なのでしょうか? 文法チェックでは、「<A> の属性 `TARGET` はあまり薦められない属性です」とあります。ですので、スタイルシートで指定できればと思っています。
- ベストアンサー
- その他(プログラミング・開発)
- <緊急>テーブルを使わないで作るには?
お世話になります。 <table width="740" cellspacing="0"> <tr valign="middle"> <td width="367"></td> <td></td> </tr> <tr valign="middle" bgcolor="FFFFCE"> <td> <a href="A073.htm" target="_parent" class="style132">・ あああ</a></td> <td> <a href="A017.htm" target="_parent" class="style132">・ いいい</a></td> </tr> <tr valign="middle" bgcolor="FFCCFF"> <td> <a href="A069.htm" target="_parent" class="style132">・ ううう</a></td> <td> <a href="A043.htm" target="_parent" class="style132">・ えええ</a></td> </tr> <td></td> </tr> <tr valign="middle"> <td></td> <td></td> </tr> </table> こちらをテーブルタグを使わない形に変更したいと思っています。 どなたかお知恵をお貸しください、よろしくお願いいたします。
- ベストアンサー
- HTML
- 初心者です 画像横に文字を入れたい css
web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul> <li><a href="index.htm"><img src="画像"width=""height=""></a></li> <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li> <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}
- ベストアンサー
- その他(インターネット・Webサービス)
- 訪問済リンクを未訪問の状態に再び戻す方法
質問お願いします。 フレームで上部に組んだメニューボタンの訪問済リンクが、 ページを移動するごとに訪問済みが増えて、 どのページを現在、訪問しているのかわからなくなります。 訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン7つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> <li><a href="../new/top.html" target="main" class="c"></a></li> <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
お礼
詳しい説明ありがとうございました。 ブロック要素とインライン要素について理解できました。 問題も解決できました。 大変勉強になりました。ありがとうございました!