ページの固定の方法
-
0 名前： コウ ： 2006/03/09 23:44
- 説明が難しいのですが、ぺーじをdiv属性で縦２分割(３０％・７０％）にして
みたのですが、ブラウザーで確認すると、画面左にお気に入りメニューを
表示していないときは、思ったとおりの構成に表示されますが、にお気に
入りメニューを表示すると、画面右側（７０％）部分が下に回りこんで
しまいます。ほかの人のＨＰをみると、ちゃんと表示されているようです。
いろいろ試しましたが、わかりません。
どうかよい方法を教えてください。
-
1 名前： カヅサツ ： 2006/03/09 23:44
- 該当のウェブページの URL がわかれば、検証できるかもしれません。
-
2 名前： コウ ： 2006/03/09 23:44
- お手数をかけますが、ＵＲＬを記述しておきます。
もし、わかれば教えてください。
http://petseikatsu.web.fc2.com
です。よろしくおねがいします。
-
3 名前： 神崎 ： 2006/03/09 23:44 ［URL］
- iframeのwidthがピクセルで指定されているので、
ウインドウサイズが小さくなっても左側のdivのwidthが変更されませんから、
１画面に収まらなければ下に表示されるようになりますね。
（サイドバーに関係なく、ウインドウサイズの問題です）
iframeのwidthもstylesheetで%指定して、左側のDIVもウインドウサイズに合わせて伸縮させることなら出来ます。
DIV同士が重なるようにするなら、
float:leftを消して、
position:fixed;
right:0px
としたり、（IEとGeckoで表示方法が変わります）
もし、右にスクロールさせるようにするなら、
この際position:absoluteにしてしまうとか、テーブルで作るとか。。。
strictなHTMLでは、横にスクロールするのはダメだったと思いますので、
CSSではposition以外の指定では出来ないと思います。
-
4 名前： カヅサツ ： 2006/03/09 23:44
- iframe要素と、チャット用のオブジェクトの横幅がピクセル単位で指定されているため、ウィンドウサイズがこれらの合計以下ですと、回り込みされません。
少し視点を変えてみましょう。
・iframe要素にリンク先を表示したいわけでもなさそうなので、止める。代わりに CSS で、似たような見栄えを指定。width の指定はしない。
・#main と #menu をさらに #whole でくくり、position: relative; とする。
・#main の右側に、260px ほど margin を取る（#menu の場所を確保）。
・#menu に position: absolute; する。top, right の基点は、「position: static でない、最も近い親要素」つまり #whole になる。
-
5 名前： カヅサツ ： 2006/03/09 23:44
- <!DOCTIPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-Type" content="text/html; charset=Shift JIS">
<meta name="description" content="犬と楽しく生活する為の情報と商品紹介、子犬の選び方、しつけ方法、わからない事Q&A集">
<meta name="keyword" contant="犬の購入先、犬の選び方、しつけ方法、基本的なしつけ">
<title>犬と生活する為のペット生活便利帳</title>
<link rel="stylesheet" type="text/css" href="index.style.css">
</head>
<body>
<h1><img src="icon006.gif" width="32" height="32" alt="">
犬と生活する為のペット生活便利帳</h1>
<div id="whole">
<div id="main">
<!-- FC2カウンター ここから -->
<p class="counter"><script type="text/javascript"
src="http://counter1.fc2.com/counter.php?id=276985"></script></p>
<!-- FC2カウンター ここまで -->
<h2 class="diary">コンちゃん一家のワイワイ生活</h2>
<div id="diary">
<h3>2006年3月07日</h3>
<p>明日から、雨が降りそう＞＜</p>
<p style="margin: 400px 0px;">テスト(削除)</p>
</div>
<ul class="mydogs">
<li><img src="kon.jpg" width="100" alt="" title="コン５歳父"></li>
<li><img src="elly.jpg" width="100" alt="" title="エリー６歳母"></li>
<li><img src="rin.jpg" width="100" alt="" title="リン４歳長女"></li>
<li><img src="kevin.jpg" width="100" alt="" title="ケビン４歳次男"></li>
</ul>
<h2>♪カワイイ犬達と愉快な生活を送ろう♪</h2>
<p>人間を癒してくれるカワイイ犬達。</p>
<p>犬ってとってもかわいいですよね。１匹ではかわいそうかな〜とか思ってもう１匹って考えてる人もたくさんいるんじゃないですか？</p>
<p>(略)</p>
<h2>犬と生活Q&A</h2>
<dl>
<dt>Q、<em>一人住まいで、犬は飼わない方がいい？</em></dt>
<dd>A、好ましい環境ではありませんが、最近では犬と一緒に行ける場所が増えています。毎日必ず家に帰ることが出来れば特に問題はないでしょう。</dd>
<dd>食事や散歩に関しては、特に毎日決まった時間じゃなくてもかまいません。</dd>
</dl>
</div>
-
6 名前： カヅサツ ： 2006/03/09 23:44
- <div id="menu">
<h3><img src="button191.gif" width="17" height="17" alt="">チャットをする</h2>
<p class="chat"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="200" height="350" id="w2">
<param name="allowScriptAccess" value="always">
<param name="movie"
value="http://chat2.fc2.com/ch/w2.swf?id=276985&url=http://chat2.fc2.com/ch/">
<param name="quality" value="high">
<param name="bgcolor" value="#ffffff">
</object></p>
<h3>犬を飼うための正しい知識</h3>
<ul class="menu">
<li><a href="kokorogamae.html">犬を飼う心構え</a></li>
</ul>
<h3>遊ぶ・楽しむ</h3>
<ul class="menu banner">
<li><a href="rink.html"><img src="icon007.gif" alt="リンク"></li>
<li><a href=" http://bbs7.fc2.com/php/e.php/mydogfeeld/"><img src="icon015.gif" alt="掲示板"></a></li>
</ul>
</div>
</div>
</body>
</html>
-
7 名前： カヅサツ ： 2006/03/09 23:44
- /* index.style.css */
body{
color: black;
background-color: #FFFFFF;
}
h1{
color: #800000;
background-color: #FFA500;
font-family: "HG創英角ﾎﾟｯﾌﾟ体";
padding: 0.3em;
}
h2{
font-family: monospace;
color: #800000;
border-width: 4px 0px;
border-style: solid;
border-color: #FFA500;
padding: 1.5em 2em;
}
h3{
background: #FFA500;
color: white;
text-align: center;
padding: 0.3em;
}
h1 img,
h2 img,
h3 img{
vertical-align: middle;
}
p{
line-height: 1.5;
margin: 0px 2em;
}
dl{
margin: 1em 2em;
line-height: 1.5;
}
dd{
margin: 0em;
}
a:link{
color: blue;
}
a:visited{
color: purple;
}
a:link img,
a:visited img{
border-width: 0px;
}
em{
font-style: normal;
text-decoration: underline;
}
div#whole{
position: relative;
}
div#main{
margin-right: 260px;
}
div#main p.counter{
margin: 0px;
}
div#diary{
color: black;
background-color: #ffffcc;
border-width: 2px;
border-style: inset;
border-color: white;
margin: 0em 2em;
padding: 5px;
height: 20em;
overflow: auto;
}
div#menu{
color: black;
background-image: url(bg037.gif);
background-color: #FFFFE0;
font-size: x-small;
padding: 10px;
position: absolute;
top: 2px;
right: 20px;
bottom: 0px;
left: auto;
}
p.chat{
margin: 0em;
text-align: center;
}
ul.mydogs{
margin: 1em 2em;
padding: 0em;
}
ul.mydogs li{
margin: 0em;
padding: 0em 1em 0em 0em;
list-style-type: none;
display: inline;
}
ul.mydogs img{
border-width: 1px;
border-style: solid;
border-color: black;
}
ul.menu{
margin: 1em 2em;
padding: 0em;
line-height: 1.5;
}
ul.menu li{
margin: 0em;
list-style-type: none;
}
ul.banner{
text-align: center;
}
ul.banner img{
width: 120px;
height: 25px;
}
-
8 名前： カヅサツ ： 2006/03/09 23:44
- ちなみに私の家も、黒タンの Mダックスです。
-
9 名前： コウ ： 2006/03/09 23:44
- カヅサツさん。 神崎さん。
お忙しい中、本当に有り難うございます。感謝のしようがありません。
何度も何度もあたまを下げても足りないくらいです。まだまだ初心者で
何もわからない私に、こんなに丁寧に教えていただけて、
本当に助かりました。まずは、そのとおりに行ってみようと思います。
時間は仕事の合間や帰宅してからの作業なのでかなり、かかるとおもいますが
がんばって完成させていきます。また、質問することもあるかもしれませんが
、懲りずによろしくお願いもうしあげます。まずは、感謝まで。
カヅサツさんも、ダックス飼ってるんですね。また、暇つぶしに日記でも
読みに来てください。
