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>
| |