Ｐａｇｅ 990 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼中央寄せにするとmenuがずれるのを何とかしたいんです Chris 05/4/8(金) 13:26 ┗Re:中央寄せにするとmenuがずれるのを何とかしたいんです モノ 05/4/8(金) 15:25 ┗Re:中央寄せにするとmenuがずれるのを何とかしたいんです Chris 05/4/10(日) 15:18 ┗Re:中央寄せにするとmenuがずれるのを何とかしたいんです カヅサツ 05/4/11(月) 13:27 ─────────────────────────────────────── ■題名 ： 中央寄せにするとmenuがずれるのを何とかしたいんです ■名前 ： Chris ■日付 ： 05/4/8(金) 13:26 -------------------------------------------------------------------------
| 今、CSSを使ってHPを作っているのですが。 div.center {text-align: center; } で画面全体を中央寄せにした場合 menuの部分に position: absolute;を使うと ずれてしまいます。 position: relative;を使えば小さくしなければ大丈夫なのですが 通常表示される場所に大きなスペースが出来てしまいます 何か方法はないでしょうか？ HPのソースを書かないとやはり駄目ですか？ |
| ▼Chrisさん： >HPのソースを書かないとやはり駄目ですか？ ソースがそれだけしかないのなら そこから判断するしかないですが そうではないですよね。 複数の要素が記述され、 それらに対しても様々なスタイルが定義されているわけで 一部を抜粋して「これどう？」っていっても 提示された部分がおかしくなければ原因は突き止められません。 |
| ▼モノさん： >複数の要素が記述され、 >それらに対しても様々なスタイルが定義されているわけで >一部を抜粋して「これどう？」っていっても >提示された部分がおかしくなければ原因は突き止められません。 確かにそうですね、すみませんでした。 おかしいところが何箇所もありますが HPのソース貼っておきます <html> <head> <meta http-equiv="Content-Type"content"text/html;charset=Shift_JIS"> <meta http-equiv="Content-Style-Type"content"text/css"> <title>Test</title> <style type="text/css"> <!-- body {/*背景色、背景の設定*/ background-color : white; background-image : url(img/sky.jpg); background-repeat : no-repeat; background-attachment : fixed;background-position : 100% 0%; scrollbar-3dlight-color:#0000FF; scrollbar-arrow-color:#0000CD; scrollbar-base-color:; scrollbar-track-color:#F5F5F5; scrollbar-darkshadow-color:#00008B; scrollbar-face-color:#FFFFFF; scrollbar-highlight-color:#0000FF; scrollbar-shadow-color:#191970} } h1 {/*サブタイトル部分の設定*/ padding: 5px; border: 2px dashed #000000; text-align: left; font:16px "MS UI Gothic"; color: black; } h2 {/*記事の部分の設定*/ width: 470px; padding: 10px; margin: 5px 0px 5px 86px; border:4px double black; font:20px "MS UI Gothic"; color: #000000; background-color: #ffffff; } h3 {/*枠の設定*/ width: 650px; padding: 20px; border-top: 2px solid black; border-right: 2px solid black; border-bottom: 2px solid black; border-left: 2px solid black; background-color: #ffffff; filter:Alpha(Style=0 Opacity=70); } h4 {/*下部分の設定*/ width: 650px; font: 13px "MS UI Gothic"; margin-top: 10px; padding: 10px; border-top: 2px solid black; border-right: 2px solid black; border-bottom: 2px solid black; border-left: 2px solid black; filter:Alpha(Style=0 Opacity=70); } em {/*タイトル&強調*/ font: 500 14px/2em "MS UI Gothic"; } div {/*divで囲んだところの設定*/ font: 13px "MS UI Gothic"; filter:Alpha(Style=0 Opacity=70); } div.cen {/*中央寄せ*/ text-align: center; } p {/*フォント、文字色*/ font: 13px "MS UI Gothic"; text-align: left; color:black; } a {/*リンクのスタイルの設定*/ background: transparent; color: #000080; text-decoration: none; font: 16px "MS UI Gothic"; } a:active,a:hover {/*リンクのスタイルの設定*/ background: transparent; color: #4169e1; text-decoration: underline; font: 16px "MS UI Gothic"; } #menu {/*メニューの設定*/ position: relative; z-index: 2; top: 269px; right: 258px; margin: 1px; padding: 0px; } #menu ul li {display: inline} #menu ul{/*メニューの設定*/ width: 133px; margin: 5px 5px; padding: 0px; list-style-tyep: none; border: 1px solid #000000; font-size: 13px; background: #f8f8ff; clor; #fff; } #menu a:link,#menu a:visited{/*メニュー内のスタイルの設定*/ width: 131px; margin: 0px padding: 4px; border-top: 1px solid #333333; border-right: 1px solid #999999; border-bottom: 1px solid #999999; border-left: 1px solid #333333; display; black; background: #f8f8ff; clor; #fff; font:16px "MS UI Gothic"; } #menu a:hover{/*メニュー内のスタイルの設定*/ margin: 0px padding: 4px; border-top: 1px solid #111; border-right: 1px solid #eee; border-bottom: 1px solid #eee; border-left: 1px solid #111; display; black; background: #ffffff; clor; #ccc; font:16px "MS UI Gothic"; } --> </style> </head> <body> <div class="cen"> <div id="menu"> <ul class=""title"> <em>HPのタイトル</em> </ul> <ul class="menulist> <li id="top"><a href="#">TOP</a></li><br> <li id="about"><a href="#">ABAUT</a></li><br> <li id="diary"><a href="#">DIARY</a></li><br> <li id="bbs"><a href="#">BBS</a></li><br> <li id="link"><a href="#">LINK</a></li><br> </ul> <ul class="menulist> <li id="bbs"> TestTestTest<br> TestTestTest<br> TestTestTest<br> TestTestTest<br> TestTestTest</li> </ul></div> <h3><h2> <h1>記事のタイトル</h1> <p>TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest </p> <h1>記事のタイトル</h1> <p>TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest TestTestTestTestTestTestTestTestTestTestTestTEstTestTestTestTestTest </p> <h1>更新履歴</h1> <IFRAME src="rog.html" name="kowaza_iframe" width="440" height="100" frameborder="0" scrolling="AUTO"> </IFRAME> </h3></h2> <h4>コピーライトや詳細な情報を書くスペース</h4> </body> </html> |
| ええと、ul, li, h1, h2, h3 要素の使い方が致命的に間違っています。 http://www.asahi-net.or.jp/~sd5a-ucd/www/ http://www.kanzaki.com/docs/htminfo.html とりあえずこのあたりを治すのが先決と思います。 |