人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

[CSS]
お世話になってます。

CSSで段組みをつくっています。

なるべくdivボックスを使わない
floatでなく、positionを使う
センタリングをautoでする

以上を(なるべく)考慮してやってみているのですが、
どうにもセンタリングがうまく行きません。
ボックスの中にいれないとセンタリングができないのです。

なにかいい方法はありますでしょうか?
よろしくお願いします。

こちらをどうぞ。
http://www.geocities.jp/notjustknee/hatenaq005.html

●質問者: notjust
●カテゴリ:コンピュータ 趣味・スポーツ
✍キーワード:CSS センタリング ボックス 考慮
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● kn1967
●10ポイント

http://www.hatena.ne.jp/

はてな

ダミーです。

FireFoxで表示すればセンタリングできてますよ。でもIEでは無理ですね。

IEの場合も考慮するならば

body { margin:0px auto; text-align:center;}

といったようにtext-alignが必要になりますので加えてみてください。

◎質問者からの返答

あ、すいません、説明たりない…。

これはボックスの中にぶちこんであるので、なるはずのつもりで作ったんです。

それが、なってないのは恥ずかしいのですが…。

これは全部、div=”inbox”の中にいれてしまっていて、それをセンタリングするつもりでした。それしか思いつかなかった…。

そうではなくて、ボックスとかにいれないで、個々の要素をautoでセンタリングするのはどうするのか?

が、知りたいことだったりします。

説明ヘタな上に例まで間違っててすいません…。


2 ● GEN111
●10ポイント

http://s-w-s.pobox.ne.jp/test/sample.html

例えば左の本文(?)のある dl 要素と右のメニューの ul 要素は互いの幅を知らないので、

親ボックス無しというのはちょっと思いつきません。

サンプルは幅と位置を % 指定にしてみましたが、

ブラウザの大きさを変えれば当然幅も変わりますし、

テキストだけならともかく、画像を使うと不具合が出るでしょう。

現状のCSSでは親ボックスの使用はやむを得ないのではないでしょうか。

◎質問者からの返答

そうなんですよね、やっぱりダメなのかな。

そう、可変幅ならできるんですよね、うーん。

CSS始めたばっかなんですが、ボックス使わないなんて画期的!とか勝手に思っちゃって。

もうちょっと回答待ってみます。

サンプルまで作っていただき、ありがとうございました。


3 ● amanoftaste
●40ポイント

http://www.hatena.ne.jp/1109823359#

人力検索はてな - [CSS] お世話になってます。 CSSで段組みをつくっています。 なるべくdivボックスを使わない floatでなく、positionを使う センタリングをautoでする 以上を(なるべく)考..

<html>

<head>

<title>CSSをためすページ</title>

<style>

*{

padding:0px;

margin:0px;

font-style: normal;

font-weight: normal;

}

dd{

margin:0px;

}

body {

width:100%;

text-align:center;

}

body *{

text-align:left;

margin:0px auto;

}

h1{

width: 750px;

height: 60px;

position: relative;

color: #666;

background-color: #666;

}

.notmenu,h2,h3{

width: 750px;

padding-right:250px;

margin:0px auto;

z-index:1;

position:relative;

top:-70px; /* ここのサイズがクセモノですね メニューのサイズに合わせないと */

left:auto;

}

h2,h3,.notmenu *{

background-color: #EEEECC;

}

.notmenu dt{

color: #FF3333;

}

p{ padding: 5px;}

#menu{

width: 750px;

height:70px; /* 仮にです */

padding-left:500px;

margin:0px auto;

z-index:5;

position:relative;

top:auto;

left:auto;

}

#menu *{

background-color: #EEEEEE;

}

.notmenu ol{

list-style: none;

padding:5px 5px 5px 10px;

width: 80%;

border: 1px solid #CCC;

}

</style>

</head>

<body>

<h1>はてな質問</h1>

<dl id=”menu”>

<dt>メニュー</dt>

<dt>メニュー</dt>

<dt>メニュー</dt>

<dt>メニュー</dt>

</dl>

<h2>はてな質問用のページ</h2>

<h3>2005/03/03</h3>

<dl class=”notmenu”>

<dt>divボックスを使わないでセンタリングしたい</dt>

<dd>

<p>ようこそお越しいただきました。よろしくお願いします。</p>

<p>今見ていただいているような段組みを、</p>

<p>

<ol>

<li>・div要素を(なるべく)使わない</li>

<li>・floatを(なるべく)使わない</li>

<li>・できれば、両端のマージンをautoでセンタリングしたい</li>

</ol>

</p>

<p>でやりたいと思ってます。</p>

<p>ところが、なにかボックスの中に入れないとセンタリングがautoでとれないのです。あと、ボックスの中にいれないとうまくpositionもとれない…。</p>

<p>なにかいい方法はありますか?よろしくお願いします。</p>

</dd>

</dl>

</body>

</html>

http://www.hatena.ne.jp/1109823359#

人力検索はてな - [CSS] お世話になってます。 CSSで段組みをつくっています。 なるべくdivボックスを使わない floatでなく、positionを使う センタリングをautoでする 以上を(なるべく)考..

とりあえずやってみました。

メニューのたてのサイズが分からないとだめですね。

メニューの「ul」をセンタリングするとIEで不審な動作をしたので「dl」に変えました。

(「ol」もだめなようでした。)

長くなってしまってすみません。

◎質問者からの返答

丁寧にありがとうございます。

メニューのheight定まらないと厳しいですよね…。うーん。

まるっとdivにいれちゃえば楽なのだけど。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ