ホームページビルダー・グレート初心者講座

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座≠ヨグレート初心者講座 質問掲示板へ

HTML版 過去ログ
| 掲示板を見る | ホームに戻る | ワード検索 | 過去ログ |   

floatとpositionの併用

日時: 2012/05/02 22:06
識別: IDVgsQVLvn/Y2
名前: syatyo

投稿二度目になります、syatyoというものです・・・。

『position : fixed;』の絶対固定のみが使いたいが為にいろいろ悩んでおります。

下記ソースのように背景に色つけていろいろ試しているのですが『 <div id="header">イベント名 </div>
<div id="rinkmenu">

の最上段固定が上手く行きません・・・。※現状rinkmenuの固定以外はそれっぽい形です

無知を承知の上でどなたか理解できる方、ご指南お待ちしております・・・。


以下、下記ソース

<!DOCTYPE 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 http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.6.0 for Windows">
<title></title>
<style type="text/css"><!--

body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0 auto;
padding : 0;
}
#wrapper{
width : 100%;
background-color : maroon;

top : 100px;
}

#header{

font-weight : bold;
background-color : blue;

position : fixed;


width : 100%;
}
#rinkmenu{

color : white;background-color : aqua;
}
#rinkmenu ul{

list-style-type: none;
}
#rinkmenu li{

float: left;
width: 100px;
}
#rinkmenu a{

text-align: center;
display:block;
padding: 0.5em 0;
width: 100%;
background-color: black;
color: white;
}
#rinkmenu a:hover{

background-color: red;
color: white;
}

#container {

width: 800px;
background-color : lime;
margin-top : 40px;
}

#gazou{
float: left;
width : 480px;
background-color : fuchsia;
}
#contents{
float : right;
background-color : red;
width : 300px;
}
#comment{
clear : both;
background-color : yellow;
}

#footer{
background-color : blue;
text-align : right;
font-weight : bold;
width : 100%;
}
#main{

}


--></style>

</head>
<body>
<div id="wrapper">
<div id="header">イベント名 </div>
<div id="rinkmenu">
 <ul>
<li><a href="#">TOP</a></li>
<li><a href="#">参加案内</a></li>
<li><a href="#">リスト</a></li>
<li><a href="#">問い合わせ</a></li>
<li><a href="#">リンク</a> </li>
</ul>
</div>
<div id="container">

<div id="main">
<div id="gazou">イベント画像
</div>
<div id="contents">イベント概要<br>
ツイッター</div>
</div>
<p id="comment">お知らせ</p>
</div>
<p id="footer">注意</p>


</div>

</body>
</html>

Re: floatとpositionの併用 ( No.1 )
日時: 2012/05/07 15:52
名前: INT

idがrinkmenuとheaderの2つをfixedにするなら、
それらを別のコンテナで囲って、それに対してfixedを指定します。

<div id="test">
<div id="header">イベント名 </div>
<div id="rinkmenu">
 <ul>
<li><a href="#">TOP</a></li>
<li><a href="#">参加案内</a></li>
<li><a href="#">リスト</a></li>
<li><a href="#">問い合わせ</a></li>
<li><a href="#">リンク</a> </li>
</ul>
</div>
</div>

で、囲ったidがtestに下のようにするとか。

#test {
width:100%;
position : fixed;
top:0;
left:0;
}


cssとか触るなら、FireFoxのFirebugとか併用すると
変更したものが直接見えるのでわかりやすいです。

ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved