[CSS]

お世話になってます。

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

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

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

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

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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/03/03 13:15:59
  • 終了:--

回答(3件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012005/03/03 13:26:53

ポイント10pt

ダミーです。

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

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

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

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

id:notjust

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

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

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

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

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

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

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

2005/03/03 13:31:25
id:GEN111 No.2

GEN111回答回数472ベストアンサー獲得回数582005/03/03 14:32:30

ポイント10pt

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

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

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

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

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

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

id:notjust

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

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

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

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

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

2005/03/03 15:16:12
id:amanoftaste No.3

amanoftaste回答回数42ベストアンサー獲得回数02005/03/05 16:56:39

ポイント40pt

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」もだめなようでした。)

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

id:notjust

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

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

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

2005/03/05 22:06:01

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません