window
トップページ
> 記事閲覧
floatとpositionの併用
日時: 2012/05/02 22:06
識別:
ID:SUknleu6R5b1
名前:
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とか併用すると
変更したものが直接見えるのでわかりやすいです。
>>引用
返信フォーム
(上記スレッドに返信する場合は以下のフォームから投稿します)
題名
※必須
スレッドをトップへソート
名前
E-Mail
非表示
表示
URL
パスワード
記事メンテ時に使用します (メンテは該当記事の
アイコンをクリック)
返信内容
>>0 > 投稿二度目になります、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>
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定
記事続行中
問題が解決した!
記事を取消したい
・問題が解決したら
解決
を選択して投稿して下さい
HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ(
アイコン)から修正する事ができます。
投稿内容をご確認下さい(記事の削除は出来ません)
クッキー保存