- ベストアンサー
ホームページ作成で画像にリンクを設定すると左右に隙間ができ、レイアウトが崩れるのですが。
akuhijrwqの回答
- akuhijrwq
- ベストアンサー率35% (381/1064)
ソースは？
noname#39970
関連するQ&A
- 画像にリンクを張るとレイアウトが崩れます。
はじめまして。 現在、Dreamweaverでホームページを作成しています。 横幅ジャストサイズ（正確には10pxのスペース画像含む）でメニューを並べています。 一通り画像のレイアウトが済んで、いざそれぞれのメニューボタンにリンクを張ると、なぜかボタンの枠が紫色に囲まれ、あげくには少しずつボタンが横に移動してしまいます。 そして、最後のメニューボタンが収まりきらず下に回ってしまいます。ちなみにCSSで作成しています。 ブラウザでプレビューしてみたところ、画像の周りの紫色の枠は残ったままで、最後のボタンは見えません（これはCSSで縦の枠幅を指定しているからとは思うんですが・・・） リンクを張ってもhtmlをいじるだけで、デザイン上はかわらないと思うのですが、そうではないのでしょうか？ 以前も、コードを通常の改行（<br>じゃない）するとレイアウトが崩れた記憶があります・・・ この現象の解決方法などはあるのでしょうか？
- ベストアンサー
- HTML
- 3カラムレイアウトで隙間
下記のように３カラムレイアウトを作っています [css] #wraper { float:left; } #left { float:left; width:180px; margin:0px;} #center { width:450px; margin:0px;} #right { width:120px; margin:0px; } [html] <div id="wrapper"> <div id="left">左メニュー</div> <div id="center">中央メイン</div> </div> <div id="right">右メニュー</div> が、それぞれの段組の間（↓の部分）に3pxほどの隙間があいてしまいます ↓ ↓ [左] [中央] [右] 隙間なくぴったりつけるにはどうすればいいでしょうか。 どうぞよろしくおねがいいたします。
- ベストアンサー
- HTML
- 画像リンクの下に文字を付けたいのですが
画像リンクを複数横に並べ、かつそれぞれの画像の下に文字を表示(それぞれの画像の横幅の範囲内に)させたいのですがどうすればよいでしょうか？ 画像と画像の間にスペースを入れることが出来たらなお良いです。 いろいろ調べてみて、 「<div style="float:left"><img src="1.gif"><br>caption 1</div> <div style="float:left"><img src="2.gif"><br>caption 2</div> <div style="float:left"><img src="3.gif"><br>caption 3</div> <div style="clear:both"></div>」 というタグを見つけましたが、これでは画像にリンクがつけられませんし、なぜか画像と画像の間に段が出来てしまいます。 どなたかよろしくお願いします。
- ベストアンサー
- HTML
- DreamweaveCS5を使ってホームページ作成
の勉強をしています。 私は横幅が画面一杯のサイズのホームページの作成経験が全くありません。 そこで実験的にですが、新規でファイルを作ってDivタグを挿入しCSSの設定で 背景に 適当な色をつけ、カテゴリのボックスのWidthを100％、MarginのTopとBottomを0px、 RightとLeftをautoに設定し保存。 その後ブラウザーでのプレービュー(IE9)で確認してみました。 すると、上と左右に微妙に余白ができます。 この余白を全く無くすにはどう設定すれば良いか教えて下さい。 お詳しい方宜しくお願いします。
- ベストアンサー
- CSS
- IE6で外部リンク画像の下に隙間
IETesterの6で確認していたところ、 外部スタイルシートの画像の下に隙間（10px程）ができてしまいます。 Firefox、IE8、IE7ではこの現象は見られませんでした。 以下記述となります。 /* HTML */ <div id="bg_top01"></div> <div id="contents_box01">あああ</div> <div id="bg_btm01"></div> /* CSS */ #bg_top01 { background:url(../img/bg_top.gif) no-repeat; width:760px; height:6px; } #contents_box01 { background-color:#2F4473; width:716px; padding:0 22px; } #bg_btm01 { background:url(../img/bg_btm.gif) no-repeat; width:760px; height:6px; } 隙間ができるのはbg_top01の下だけです。 他のサイトで「vertical-align: bottom」を入れると直るあったので、入れてみたんですが変わりませんでした。 隙間をなくすのに他に方法がありますでしょうか？ ご助言をお願いいたします。
- ベストアンサー
- HTML
- 画像にリンクを張ったら、レイアウトが崩れました。
ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。 まず、リンクを張らずにやってみました。 HTML部分 <ul id="main_center"> <li id="1"><img src="http://***.jpg" /></li> <li id="2"><img src="http://***.jpg" /></li> <li id="3"><img src="http://***.jpg" /></li> </ul> CSS部分 #main_center #1,#2,#3 { display: block; width: 220px; height: 20px; list-style-type: none; margin-bottom: 10px; } タグは以上の通りでやったところ、問題なく画像が綺麗に並んだのですが、 <ul id="main_center"> <li id="1"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="2"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="3"><a href="http://***/"><img src="http://***.jpg" /></a></li> </ul> といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。 リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。 または、なにかタグが間違っているのでしょうか。 どなたかアドバイスをお願いいたします。
- ベストアンサー
- HTML
- divタグの名前の付け方
基金訓練でWeb制作をしていて、今、ドリームウィーバー(以下、Dw)で自分で作ったWebページのレイアウトを組んでいます。 やっていて疑問に思ったのですが、container、menu、containts、footer・・・有名なものは全て使ってしまったのですが、この他にdivタグをつけたい文章のかたまりや画像などが10個以上(フロートをかけたいので)あります。どのような名称をつければ良いのでしょうか？いくつか省略化(Dwのdivタグ挿入のところ)したものをそのまま名称にすれば良いのでしょうか・・・
- ベストアンサー
- CSS
- ホームページ作成・リンクについて
閲覧ありがとうございます。 ホームページを作成しているのですが、ページリンクの装飾についてお聞きしたいことがあります。 cssでリンクの部分に点線で下線が表示されるように設定しているのですが、 border-bottom-style:dotted; これだと、バナーなどの画像部分にも点線が表示されてしまい、少々不恰好です。 指定した部分だけ下線を表示させなくすためにはどういったタグを入力すればいいのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- 動いている画像へのリンクは可能でしょうか？
画像を動かし、そこにリンクを貼りたいのですが可能でしょうか？ 下のソースの中にリンクを埋め込みたいのですがどうやっても うまくいきません。根本的にやり方がちがうのでしょうか・・・。 document.write("<div id=\"dot["+ m +"]\" style=\"POSITION: absolute; Z-INDEX: " + m +" VISIBILITY: visible; TOP: 10px; LEFT: 10px; width:1;\"><img src=" + img_name + " ></div>");
- ベストアンサー
- JavaScript