- ベストアンサー
a name のちょっと上
<a name=""></a> で指定したところにリンクすると、この部分がブラウザの最上部にピッタリつきます。 この指定された部分の上 25px にリンクさせたい場合はどうすればいいでしょうか？ やり方としては、 <a name="omoshiro"></a><div height="25"></div> <div>面白コーナー！</div> もしくは空白 div のかわりに img で透過 gif を入れてやればできますが、 見た目でも 25px の空白ができてしまいます。 ですのでこの空白を作らずにやりたいと思ってますがありますでしょうか？ よろしくお願いします。
- syuricyan
- お礼率65% (541/824)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
padding-topやposition:relativeで位置調整は可能かと思いますが、調整分の空白スペースが気になるということでしょうか？ コンテンツのレイアウト構成が分からないのであれですが、こんな感じで調整してはいかがでしょうか？ <html> <head> <style> #index{ background:#eee; } #index,#contents{ height:1500px; } #title{ padding-top:2em; display:block; } #contents{ position:relative; top:-2em; } </style> </head> <body> <div id="index"> <a href="#title">go contents title</a> </div> <div id="contents"> <a id="title">title</a><br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> contents<br/> </div> </body> </html> aタグにpaddingした分、上方に余白ができるのでaの包括要素の位置をその余白分上方にずらしてます。 注意点としては、包括要素の上のコンテンツ（この例では#index）に余白分、包括要素がかぶるので必要に応じて包括要素の上のコンテンツにpadding-bottomする必要があります。（この例では2em） CSSレイアウトの応用です。
その他の回答 (3)
- s-matu
- ベストアンサー率20% (1/5)
<div><a name="omoshiro" style="padding-top:25px;">面白コーナー！</a></div> ではいかがでしょうか？
- masaota56
- ベストアンサー率41% (58/139)
逆にdivを下げてみるのではどうでしょうか。 <div id="omoshiro" style="position:relative;top:25px;"> 面白コーナー！ </div> ※IDで指定してみました
- yambejp
- ベストアンサー率51% (3827/7415)
少なくともHTMLの仕組みではないでしょう。 javascriptでかなり無茶をすればできそうですが、やめたほうがいいでしょう。 それと<a name="">は順次廃止になっていますので<a id="">に変えた方が よいでしょう
関連するQ&A
- 文字がどうやっても上揃えになってしまう
xhtmlでサイト構築中なんですが、文字が上揃え状態から解除できずにもがいています。 ある部分にこのような要素を書いています。 --------------------------- <div id="a">あいうえお</div> --------------------------- そしてそのCSSを下記のようにしてます。 --------------------------- #a { width:150px; margin:0px; vertical-align:bottom; padding:0px; height: 50px; background: url("img/bg.gif"); background-repeat: no-repeat; background-position:0px 0px; float: left; } --------------------------- これで添付の写真のように文字が最上部にしかなりません。 padding等で指定してもまったくなりません(ToT) 何かヒントでもいいのでアドバイスお願いしますm(_ _)m
- 締切済み
- HTML
- ＣＳＳで自動改行させたくない。
スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね？ ＣＳＳ #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } ＨＴＭＬ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
- ベストアンサー
- CSS
- css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- firefoxでa:hoverのwidth、heigthが効かない
上手く表現できないのですが、ヘッダーのメニュー部分で、カーソルがリンク部分に行くと、背景画像が変わるようにしたいのですが、ＩＥ６と７ではイメージ通りになっていますが、firefoxでは、カーソルがリンク部分に来たとき、a:hoverで指定したwidthとheightの大きさではなく、文字部分の背景だけが変わっています。また、firefoxではpaddingの指定も効いていないみたいです。 色々と調べながら作っているのですが、知識が足りず、どの部分に問題があるのか、ご指摘いただけましたら嬉しいです。 -css- #header{margin:0px; background-image:url(gazou.gif); padding:0px; width:800px;} #header h4{float:left; font-size:130%; text-align:center; background-image:url(gazou.gif); width:159px; margin:0px; height:32px; white-space:nowrap; overflow:hidden;} #header h4 a{text-decoration:none; color:#000064; height:32px; padding-top:8px; padding-bottom:6px; white-space:nowrap;} #header a:hover{text-decoration:underline; background-image:url(gazou2.gif); color:green; width:159px; height:32px; margin:0px; white-space:nowrap;} -html- <div id="header"><A href="a.html"><IMG src="topgazou.jpg" width="800" height="101" border="0"></A><br> <h4><A href="b.html"> ・・・・・</A></h4> <h4><A href="c.html"> ・・・・・</A></h4> <h4><A href="d.html"> ・・・・・</A></h4> <h4><A href="e.html"> ・・・・・</A></h4> <h4><A href="f.html"> ・・・・・</A></h4> </div>
- ベストアンサー
- CSS
- 写真の上0pxにタイトルバーをhtmlで作りたい
HTMLで写真の真上にhtmlで作った色付き棒の中に文字を表現したいです。 それを３列ずつ複数行作成したいです。 ・写真と写真の横幅の間は30pxあける。 ・上下は50pxあける。 ・ウインドウ幅の中央に常に表示 ・ウインドウが写真よりも狭くなってもレイアウトが崩れない このようにしたいと思って、自分で作ってみましたが、 まったくうまくできませんでした。 どのようにすればいいのか教えて下さい。 よろしくお願いいたします。 ～～～～～～ HTML ～～～～～～～ <link href="aa.css" rel="stylesheet" type="text/css" /> <div class="aaa"><!-- と汎用ブロックで囲んで --> <div class="bbb">いのしし<div> <div class="bbb">たつ<div> <a href="" ><img src="" alt="" width="350" height="270" /></a> <a href="" ><img src="" alt="" width="350" height="270" /></a> <div class="ccc">うさぎ<div> <div class="ccc">とら<div> <div class="ccc">たぬき<div> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> <a href="" ><img src="" alt="" width="232" height="166" /></a> </div> ～～～～～～ CSS ～～～～～～～ @charset "Shift_JIS"; a img{ border:none; } div.aaa{ margin-top:0px; width:760px; margin-left:auto; margin-right:auto; text-align:center; } div.bbb{ background-color: #ffcc66; width: 350px; height: 30px; } div.ccc{ background-color: #ffcc66; width: 232px; height: 30px; font-size: 20px; font-color: }
- ベストアンサー
- HTML
- firefoxでfloaｔの調整の仕方CSS
CSSで下記(div)のなかにBOXを3つ並べました、 ie6以上では思い通りに表示されるのですがFireFox（バージョン3.5.3）では一番右端にくるBOXが左端のBOXの下に入ってしまいます。 どなたか解決策を教えていただけますでしょうか？ ----ソース部分--- <div class="setbox1"> <div id="rent1"><a href="eee.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent2"><a href="aaa.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> <div id="rent3"><a href="ccc.html"><img src="img/trans_rent.gif" width="234" height="69" /></a></div> </div> ----以下CSS---- .setbox1{ margin-left : 25px; width : 750px; } #rent1{ margin-top : 20px; margin-left : 0px; float : left; width : 234px; } #rent1 a{ background-image : url(img/rent1.gif); display : block; line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; } #rent1 a:hover{ background-position : left bottom; } #rent1 img{border-width : 0px 0px 0px 0px; } #rent2{ margin-left : 0px; float : left; margin-right : 22px; padding-left : 22px; width : 234px; margin-top : 20px; } #rent2 a{ background-image : url(img/rent2.gif); display : block; background-repeat : no-repeat; line-height : 0px; width : 234px; height : 69px; } #rent2 a:hover{ background-position : left bottom; } #rent2 img{border-width : 0px 0px 0px 0px; } #rent3{ margin-top : 20px; margin-left : 0px; padding-left : 0px; } #rent3 a{ background-image : url(img/rent3.gif); line-height : 0px; background-repeat : no-repeat; width : 234px; height : 69px; display : block; } #rent3 a:hover{ background-position : left bottom; } #rent3 img{border-width : 0px 0px 0px 0px; }
- 締切済み
- HTML
- 重なった画像にクリックイベントを発生させたい
いつも大変勉強させていただいております。 かさなった画像にクリックイベントを発生させたいと 苦心しておりますが、うまくいきません。 スタイルシートのz-indexプロパティーで 重なり位置を指定しました。 以下のような記述です。 <!-- 画像1 --> <DIV style="top:117px;left:360px;position:absolute;z-index:1;"><IMG src="00464.png" width="100" height="100" border="1"></DIV> <!-- 画像2 --> <DIV style="top:117px;left:360px;position:absolute;z-index:2;"><a href="#" OnClick="javascript:ZoomWin('00464.png');"><IMG src="big.gif" width="42" height="41" border="0"></a></DIV> 00464.pngとbig.gifという画像が重なっていて、 それぞれz-indexで指定しています。 big.gifをクリックすると、ZoomWinという関数を 発生させて、新規ウインドウを 立ち上げたいのですが、 リンクすらはれないのです。 z-indexを指定しただけでは、 <a>タグはつかえないのでしょうか？ ほかに代替案があればおしえてください。
- 締切済み
- JavaScript
- 画像の四隅を丸くしたい
html初心者です。 あるメイン画像の左上に、透過gif画像を重ねて表示させたいのですが、そのようなことは可能なんでしょうか・・・ メイン画像は長方形です（通常の画像のように、ふちは角ばっている）。その画像の左上に、透過gif画像を重ねて表示させようとしています。 htmlには： <TABLE> <TR> <TD> <div id="corner"><IMG SRC="images/frame4_03.gif"></div> <div id="inner"><IMG SRC="screen05_04.jpg"></div> </TD> </TR> </TABLE> cssには： #corner{ position:absolute; left:251px; top:98px; width:99px; height:39px; BACKGROUND-COLOR:#FFFFFF; } #inner{ position:absolute; left:251px top:98px; width:999px; height:799px; } と書いています。 WindowsXP、IE7で表示させています。 よろしくおねがいいたします。
- ベストアンサー
- HTML
