初めまして。
とても基本的なことでお恥ずかしいのですが、
3カラムのレイアウト、及びdivの入れ子等について、行き詰ってしまいました。
どうぞ宜しくお願い致します。
下記のように、3カラムの段組みレイアウトを行いました。
左・右のナビゲーションに、width:150pxで幅指定し、それぞれleft・rightにfloat、
中心部分(#contents)は、左右ナビゲーション分のマージンを設定して、真ん中に配置させる方法です。
HTMLでは、可変?させたい真ん中部分は、ナビゲーションの後に記述すること、とのことでしたので、そのように致しました。
<CSS>
#contents {
margin-left:155px;
margin-right:155px;
}
#left {
float:left;
width:150px;
}
#right {
float:right;
width:150px;
}
<HTML>
<div id="left>あああああああ</div>
<div id="right">いいいいいいい</div>
<div id="contents">ううううううう</div>
ここまでは、問題なく配置させられたのですが、
【#contents】の中に、<div>や<ul>などを使用すると、画像(http://blog.goo.ne.jp/ray-chimin)のような現象が起きます。
ちなみに、【#left】のheightを長く伸ばすと、IEではキレイに並びましたが、firefox等では、やはり崩れます。
と言いましても、それは実験的に行った結果で、【#left】のheightを無駄に長く伸ばすことは避けたいです…(;ω;)
そもそも、【#contents】の中の、「中身の並べ方」の考え方に問題があるのでしょうか…?
可能な限りシンプルに、
正しいCSSの使い方でレイアウトしたいと考えております…!(>_<)
divの不必要な多用?
(ひとつひとつの画像をdivの中に入れたり、
横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造)
は避けたいと思っておりましたが、
もしかして、それがいちばん正しいのでしょうか…?
ご存じの方、どうぞご指南の程宜しくお願い致します!
散文、失礼いたしました!
No.5ベストアンサー
- 回答日時:
これでどうでしょう?
* {
margin:0;
padding:0;
}
body{
text-align:center;
}
img {
border:0px;
}
/* 全体の幅 */
#detail {
width:1024px;
margin:auto;
text-align:left;
}
/* header・main・footerをまとめる */
#container {
}
#contents {
float:left;
width:664px;
}
#left {
float:left;
width:180px;
}
#right {
float:right;
width:180px;
}
#footer {
clear:both;
}
div.bnr190 {
text-align:center;
}
div.bnr190 ul {
width:590px;
margin:atuo;
text-align:left;
}
div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}
この回答への補足
お返事が遅くなってすみません!
今、テストをしてみたのですが…、問題の箇所も変わらず、今度は左右のナビ部分も大きくはみ出してしまいました…。
折角書いて下さったのに、ホントウにすみません…(;ω;)
12/13
色々と調べているうちに、
div.bnr190 ul {
display:inline-block;/*これを追加し、marginに関する記述を削除*/
width:590px;
text-align:left;}
div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}
で、無事に画像(インライン要素)の下のリスト(ブロック要素)もまっすぐに並べることができました…!
何度もいろいろと教えて下さって、本当に×(2)感謝しています(;ω;)
ありがとうございました!
No.4
- 回答日時:
この場合floatを使うとIEと標準ブラウザではプレゼンテーションが大きくずれてしまいます。
3columnの配置にfloatを使うのはお勧めしません。そもそもfloatは本文内で画像などの周囲に本文を回り込ませるための物で、本来の目的外に使うのは??です。率直に
<div class="bodyText">
<h1>見出し</h1>
<p>本文</p>
<p>本文</p>
<ul class="imageList">
<li><img src="[URL" width="" height="" alt=""></li>
<li><img src="[URL" width="" height="" alt=""></li>
<li><img src="[URL" width="" height="" alt=""></li>
</ul>
<hr class="ieBug"><!-- IE対策 -->
<div class="Annotation">
<div class="index">
</div>
<div class="note">
</div>
</div>
</div>
とでもマークアップします。率直に・・・
そのうえで、まずdiv.bodyTextを、position:relative+リキッドスタイルwidth:80%などで指定します。
次いで、div.bodyText > div.Annotation(子セレクタ)、あるいはdiv.bodyText div.Annotation(子孫セレクタ)を絶対配置でtop:0px;で指定し、さらに
div.Annotation > div.index{position:absolute;top:0px;right:-150px;}
div.Annotation > div.note"{position:absolute;top:0px;left:-150px;}
などで指定します。
※先で、2columnにした時もHTMLを書き変えなくて済む。
★本題の画像リストですが、ブラウザによってmarginやpaddingの解釈が異なりますから、ul,liについて、margin,pading,displayの値を初期化しておくと楽です。
div.bodyText ul.imageList,div.bodyText ul.imageList li{
margin:0px; padding:0px;list-stye:none;
display:block;
}
div.bodyText ul.imageList li{
float:left;
width:;/* 違う場合はHTMLの要素内でstyle指定 */
height:;/* ここはすべて同じにする。 */
}
★floatでブロックの外に出てしまう対策
ul.imageList > hr{visibility:hidden} /* 子セレクタ */
ul.imageList hr{visibility:hidden} /* こちら(子孫セレクタ)の方が無難かも */
ご丁寧な回答、ありがとうございました。
>そもそもfloatは本文内で画像などの周囲に本文を回り込ませるための物で、本来の目的外に使うのは??です。
仰っていることの意味は理解できるのですが…、
3カラム実装におけるfloat利用は、某有名どころの参考書を始め、その他のレクチャーサイト様など複数でご掲載なさっている内容ですので、今回の質問の場でその是非に関する論議は、控えさせていただければ…と思います。
今回マークアップしていただいたように記述しますと、
そもそもがわたしの質問内容とは違ったレイアウトとなってしまいました…。
(お書き下さったままのクラス名を使用し、別ファイルでテストを行ってみたのですが…。もしかしたら途中途中の注釈を、わたしが間違って解釈しているのかも知れません。)
ありがとうございました。
No.3
- 回答日時:
floatではありませんでしたか。
一応提示されているソースを見た感じ、ほとんど問題ないように思います。
もしかしたらスタイルのリセットをされているのかもしれませんが、気になったのはul要素にpadding:0;の指定がないことです。
可能性としてはHTMLの記述ミスとかでしょうか。
>IEでは、直上の画像の“改行されるあたりからulごと”右側にズレています…
このあたりがよくわからないので再現できる最低限のソースだけ補足してもらえるともしかしたら回答できるかもしれません。
補足ついでに確認なのですが、問題が出ているブラウザはIEですか?バージョンもわかれば補足おねがいします。
この回答への補足
何度もお手を煩わせてしまってすみません…!
本当にありがとうございます(;ω;)
ちょっと長ったらしくなってしまったのですが、
今回組んでいる内容を、そのまま貼り付けさせていただきました
http://blog.goo.ne.jp/ray-chimin
>気になったのはul要素にpadding:0;の指定がないことです。
ありがとうございます。
CSSの記述のいちばん最初に「*」でpadding:0;設定をしていたので、ひとつひとつのクラス等には記述しておりませんでした。今回のご回答をいただいた後に、念の為ulにも個別で追加してテストしてみましたが、特に変化がありませんでした…(。・ˇдˇ・。)すみません…。
>問題が出ているブラウザはIEですか?バージョンもわかれば補足おねがいします。
問題が出ているのはIE8です。
以上、厚かましい限りですが、お時間のある際にでもどうぞ宜しくお願い致します…!
No.2
- 回答日時:
真ん中のは
margin:0 auto;
もしくは、
float:left;
margin:左のから空けたい分
のが後々楽かなと思います。
崩れる原因は多分ですが。。。li要素は多分floatで横に並べてますよね?
なら親要素の高さには含まれなくなってしまいますので、
ulの中の最後とかに<div style="clear:both"></div>を不細工だけどいれておくか、
ul要素にいわいるクリアフィックスのクラスを追加してやってください。
ちなみにulやliはブロック要素なのでデフォルトではwidth:100%のdivがあると考えて下さい。
クリアフィックス参考URL:
http://coliss.com/articles/build-websites/operat …
読んだだけの回答ですが、どうでしょうか?
>divの不必要な多用?
文法上はよくないっちゃないですが、
あんまり気にしなくていいです。特に最初のうちは。
ただ、
>(ひとつひとつの画像をdivの中に入れたり、横並びのミニバナーを、divの中にdivを入れて…のような入れ子構造)
この程度なら囲う必要はないと思います。
画像いっこいっこ囲うこと自体は、
親要素をつかって疑似トリミングしたりするときによく使われる技です。
この回答への補足
ご丁寧な回答、ホントウにありがとうございます!!
>li要素は多分floatで横に並べてますよね?
それが、
display:inline;を使用しているので、floatは使っていないんです…(>_<)
ですので、今回はclearfixも使っておりません…;;
【190pxバナーを横に3個並べる】ことをしたいのですが、
div.bnr190 ul {
width:590px;
text-align:left;
margin-left:auto;
margin-right:auto;}
div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}
と書いてみたのですが、
Firefoxではキレイに揃っております。
IEでは、直上の画像の“改行されるあたりからulごと”右側にズレています…泣
※ともに#leftは必要以上に伸ばしていません。
何かお気づきの点がございましたら、何度もお手数で本当に申し訳ないのですが
宜しくお願い致します…!
12/13
色々と調べているうちに、
div.bnr190 ul {
display:inline-block;/*これを追加し、marginに関する記述を削除*/
width:590px;
text-align:left;}
div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}
で、無事に画像(インライン要素)の下のリスト(ブロック要素)もまっすぐに並べることができました…!
何度もいろいろと教えて下さって、本当に×(2)感謝しています(;ω;)
ありがとうございました!
No.1
- 回答日時:
ul、li要素にfloat使われていませんか?その場合clearはされましたか?
この回答への補足
ご回答ありがとうございます。
それが、
display:inline;を使用しているので、floatは使っていないんです…(>_<)
ですので、今回はclear等は使っておりません…;;
12/13
色々と調べているうちに、
div.bnr190 ul {
display:inline-block;/*これを追加し、marginに関する記述を削除*/
width:590px;
text-align:left;}
div.bnr190 ul li {
display:inline;
margin-right:6px;
list-style:none;
}
で、無事に画像(インライン要素)の下のリスト(ブロック要素)もまっすぐに並べることができました…!
何度もいろいろと教えて下さって、本当に×(2)感謝しています(;ω;)
ありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSS、width100%でもできる余白
-
cssで「下よせ」ってどうやって...
-
CSS(0の単位)について
-
ページを拡大縮小でborderが消...
-
<div>と<div>の間の10px程の...
-
floatした画像の下揃えについて
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
定義リスト dl dd dt
-
余分な縦スクロールバーが出て...
-
heaerとfooterに背景画像が難し...
-
Flexslider2のカーセルスライダ...
-
CSSでボックスのheightが0になる
-
【スタイルシート?】同行内で...
-
テーブル内の文字が揃わない
-
【CSSについて】リストをフロー...
-
リストを全体的に右寄せにしたい。
-
CSSで余白とパディングに”0”を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報