- 締切済み
1カラムの段組について(mainの中のdiv要素について)
こんばんは。 今サイト作りをしているのですが、mainの中のdiv要素が反映されないんです。最初はmainのmarginを0pxにして、divの所にmargin:10px;などにして、余白調整を行おうとしたのですが、反映されないんです。それでmainの所を20pxにした所、main部分は反映されましたが、div要素は反映されないままです。 間違いがありましたらご指摘お願いします。 CSS部 a:link{color:#181818; text-decoration:none;} a:visited{color:#383838; text-decoration:none;} a:active{color:#181818; text-decoration:none;} a:hover{color:#4c4c80; text-decoration:none;} body { margin:0px; padding:0px; font: 12px "ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3", Osaka; background-image:url("backimage3.gif"); } #header { width:700px; height:250px; } #layout { width:700px; margin: 0px ; background-image:url("backimage3_3.gif"); } #main { margin:20px; } div.sample1{ background-color: transparent; margin: 30px; text-align:left; color:#181818; font-size:12px; } div.sample2{ background-color:transparent; margin: 20px; text-align:left; color:#181818; font-size:12px; } HTML部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link href="css.css" rel="stylesheet" type="text/css"> <title>サンプル</title> </head> <body> <div id="layout"> <!--メニュー ここから--> <div id="header"> <img src="webtitle3.gif" alt="map" usemap="#map1" /> <map name="map1">中略</map> </div> <!--メニュー ここまで--> <!--中身 ここから--> <div id="main"> <div class="sample2"> ファースト<br> ファースト <div class="sample1"> セカンドセカンド </div> サードサード </div> </div> <!--中身 ここまで--> </div> </body> </html> 分かりにくい説明で申し訳ありません。もし何か補足説明がいるようでしたら是非仰って下さい！ それでは失礼します。
- RiodeJanei
- お礼率29% (48/163)
- CSS
- 回答数2
- ありがとう数8
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- golive001
- ベストアンサー率54% (20/37)
ソースを見た感じですが、やりたいことはこういったことなのではないでしょうか？ <html> <head> <title>leyout test</title> <style type="text/css"> *{ margin:0; padding:0; } #wrapper{ width:700px; background:red; border:1px solid black; } #header{ width:700px; height:250px; background:green; border:1px solid black; } #main{ margin:20px; background:pink; border:1px solid black; } #sample1{ margin:30px; background:yellow; border:1px solid black; } #sample2{ margin:20px; background:blue; border:1px solid black; } </style> </head> <body> <div id="wrapper"> <div id="header">header</div> <div id="main"> <div id="sample1">sample1</div> <div id="sample2">sample2</div> </div> </div> </body> </html> いずれにしても、backgroundプロパティとborderプロパティを併用して、marginとpaddingの関係を再確認した方が良いです。
- quads
- ベストアンサー率35% (90/257)
検証する前に。 > <link href="css.css" rel="stylesheet" type="text/css"> 全角スペースが紛れています。 > mainの中のdiv要素が反映されないんです。 反映されないとはどういう意味でしょうか。
補足
> <link href="css.css" rel="stylesheet" type="text/css"> 申し訳ありません！失礼しました！ > mainの中のdiv要素が反映されないんです。 これは、例えば div.sample1{ background-color: transparent; margin: 30px; text-align:left; color:#181818; font-size:12px; } で設定しているのですが、実際に、<div class="sample1">と書いて 文章や画像を囲っても、その部分に書いたmarginなどが反映されないんです。 こんな説明でよろしいでしょうか・・・？
関連するQ&A
- カラムで段組と段組の間に隙間が埋ができる
カラムで段組と段組の間に隙間ができてしまい無くせません。 menuとtop,accsentなどの間に隙間ができてしまいます。 助けてください。 style.css /*html ボディー*/ html{height:100%; overflow:hidden;} body{ margin:0px;height:100%; width: 100%; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive;} .cur{font-family:cursive;} .ser{font-family:serif;} /*フレーム スタイル*/ div#menu{float:left; width:100px; height:100%; background-color:#666633;} div#top{height:10%; width:; background-color:#ff9933;} div#accent{height:3%; width:; background-color:#999933;} div#navi{height:6%; wsidth:; background-color:#ff9933;} div#main{margin-left:100px; height:; width:; background-color:#ffff99;} div#base{position:relative; width:100%; height:91%; background-color:#ffff99;} div#bottom{clera:both; height:9%; width:100%; background-color:#999933; } HTMLのほうは <HTML> <HEAD> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <TITLE></TITLE> </HEAD> <BODY> <div id="base"> <div id="menu"> menu </div> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> <div id="bottom"> bottom </div> </BODY> </HTML> このような感じになります お願いします。
- ベストアンサー
- HTML
- ボックスの高さを揃える、について
こんばんは。 私は今CSSでHPを作っているのですが、左側にメニュー画像、右側に 内容、といった風にしたいのですが、左側だけに壁紙を貼り付けようと しているのですが、上手く出来ません。 左側のボックスにmin-heightを付けたりしたのですが、それですと右のページの長さが変わると意味が無くなってしまいます・・・。 何処が間違っていましたら、ご指摘お願いします。 HTML部 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="css.css" type="text/css"> <title>あ/title> </head> <body> <div id="wrapper"> <div id="layout"> <div id="side"> <img src="menu.gif" usemap="#map1" alt="menu"> <map name="map1"> (ここは略させて頂きます)</map> </div> <div id="main"> <div class="sample1"> <img src="webtitle2.gif" alt="title"> </div> </div> </div> </div> </body> </html> CSS部 * {margin: 0px; padding: 0px;} #wrapper {padding: 0px;} #layout {width: 850px; background-image: url("sidewall2.gif"); background-repeat: repeat-y; background-attachment: fixed;} #side {float:left; width: 150px; margin-left:0px; margin-top:0px;} #main { float:right; width: 700px;} div.sample1{background-color: transparent; margin:10px; text-align:left; color:#282828; font-size:13px;}
- ベストアンサー
- HTML
- divでくくった中の要素にa link
以下のdivでくくった中の要素にa link等の カラーの指定をしたいのですが、どのように記述したらよいでしょうか。 div.main { width: 560px; padding-top: 15px; padding-left: 20px; line-height: 130%; } --------------- div指定していないところでは a:link, a:visited { color: #000000; font-size: 12px; line-height: 120%; text-decoration: none; } a:hover { color: #0066CC; text-decoration: underline; } a.navia:link, a:visited { font-size: 8pt; color: #666666; text-decoration:none;} a.navia:hover { color: #FF6633 ; text-decoration:underline } の2つを記述しています。
- ベストアンサー
- HTML
- divでくくったけれど、反映が変になります。
divで指定した2つのリンク要素なのですが、 mainのくくりの中の文字にleftsideの設定が反映されてしまいます。 でも、mainで指定した div#main a:hover { color: #6699FF ; text-decoration: underline; }だけはそのまま活きています。 どこが間違っているのでしょうか。 div#main a:link, a:visited { color: #3300FF ; text-decoration: underline; } div#main a:hover { color: #6699FF ; text-decoration: underline; } div#leftside a:link, a:visited { color: #000000 ; text-decoration: none; } div#leftside a:hover { color: #6699FF ; text-decoration: none; }
- ベストアンサー
- HTML
- <div id="main">の外に色をつけるには
画像の白い部分に色を付けるにはどうすればいいでしょうか？ <div id="main">の中には、赤、線には青の色を付けることはできたのですが、 <div id="main">の外側に色を付けるにはどうすればいいですか？ コードは、 <style type="text/css"> #main{width: 70%; margin: 0 auto; text-align: left; background-color:red; border:30px solid blue;} </style> </head> <div id="main"> test </div> としています。 よろしくお願いします。
- ベストアンサー
- HTML
- 段組みレイアウトがfloatleft上手くいきませ
先程の投稿は、一度削除させて頂きました。 再度、投稿しなおします。 なんとか、以下の画像のところまで持ってくることが出来ました。 おかしなところ。 Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです） Q2 全体が、centerに行かない、、、。左によってしまっております。 以上２点です。 宜しくお願いします。 失礼致します。 こんにちは。ycqと申します。 html+CSSでサイトを作っています。 簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。 おかしい所がございますでしょうか？ Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定 お時間がございましたら、どうぞ、宜しくお願いいたします。 失礼致します。 index.html*************************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu"> <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;
- ベストアンサー
- CSS
- <css> ボックスの隙間について
お時間のあるときに教えていただけるとありがたいです。 cssボックスを縦に二つ（上A、下B）作ったところ、どうしてもボックスに隙間が空いてしまいます。この隙間をなくし、二つのボックスを繋げるように表示するにはどうしたらいいでしょうか。どうもマージン設定がうまくいっていないようなのですが、どこが悪いのかわからなくて困っています。 cssは外部ファイルとして読み込みました。以下にソースをなるべくそのまま貼り付けてみます。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜cssソース＞ body{ color : #fff; font-size : 11pt; text-align : left; background-color : #ff00cc; background-image : url(haikei.gif); background-repeat : repeat; } a{ color : #ffcccc; text-decoration : none; } a:HOVER{ color : #ffcccc; text-decoration : none; } a:VISITED{ color : #ffcccc; } * { margin:0px; padding:0px; } #boxA { margin:0px auto; width:650px; height:217px; padding:0; } #boxB { text-align:left; margin:0px auto; width:620px; height:350px; padding:15px 15px 5px 15px; background-image : url(haikei2.gif); background-repeat : repeat; overflow:auto; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ＜htmlソース＞ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <META http-equiv="Content-Style-Type" content="text/css"> <META http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <link rel=stylesheet type="text/css" href="haikei.css"> </head> <body> <div id="boxA"> </div> <div id="boxB"> </div> </body> </html> よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- floatしたdiv内の要素について
下記のようなHTML、CSSで、 floatしたdiv「leftside」内にp要素を配置すると p要素の上下に空間が発生します。 このp要素の上下の空間はなんでしょうか？ どうすれば消えますか？ ちなみに、スタイルシートから「leftside」の「float: left;」を削除するとp要素の上下空間はなくなります。 または、pタグで囲まなくても空間は消えます。 よろしくお願いいたします。 ■Html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="test_style.css" media="all"> </head> <body> <div id="warapper"> <!-- ヘッダ --> <div id="head"> </div> <!-- 左サイト --> <div id="leftside"> <p class="test">leftside</p> </div> <!-- コンテンツ --> <div id="contents"> contents </div> <!-- フッター --> <div id="footer"> <p>fotter</p> </div> </div> </body> </html> ■Css @charset "utf-8"; body{ /*font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/ font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 90%; text-align:center; padding: 0; margin: 0; background-color: #fff; } #warapper{ text-align: left; width: 800px; margin:0 auto; /*ページ全体をセンタリングする指定*/ padding: 0; background-color: #ffffcc; } #head{ background-color: #000; height: 160px; margin: 0 0 20px 0; padding: 0; position: relative; /*ロゴ画像を右下に配置するため*/ } #topbar{ background-color: #dcdcdc; height: 50px; margin: 0 0 20px 0; padding: 0; } #leftside{ background-color: #ccc; width: 180px; float: left; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ overflow:hidden; } #contents{ background-color: pink; width:600px; float: right; padding: 0; margin: 0 0 20px 0; /*下方向に余白を設ける*/ } #contents_all{ background-color: pink; margin: 0 0 20px 0; /*下方向に余白を設ける*/ padding: 0 0 0 0; } #footer{ background-color:#666; text-align: center; clear: both; margin: 0; padding: 0.5em 0; } .test { background-color: red; }
- 締切済み
- CSS
- DIVタグの背景に画像を配置できない
<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- hover擬似要素をかけるとfloatでの段組が崩れる
宜しくお願い致します。 以下の様なHTMLとCSSで、hover擬似要素でボタン押下を表現したリストのリンクが、IE6（他ブラウザは現在確認出来ていません）でマウスを乗せると、floatした段組が崩れそのリストメニューの高さまで段組の親要素が縮んでしまいます。 原因にお気付きの方は、どうかご指摘頂けます様、お願い致します。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.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"> <style type="text/css"> <!-- /* 全体 -------------------------------------------------- */ body { background-color: ivory; width: 800px; margin: auto; font-size: small;} /* コンテナ -------------------------------------------------- */ div#container { width: 948px; border-left: 1px solid maroon; border-right: 1px solid maroon; background-color: white;} /* 段組 -------------------------------------------------- */ div#main { width: 700px; padding: 10px; float: right; border-left: dashed 1px maroon;} div#navigation { padding: 10px;} /* clearfix */ div#contents:after { content: "."; display: block; clear: both; height: 0px; font-size: 0px; visibility: hidden;} div#contents { display: inline-block; min-height: 1%;} /* Mac版IE用ハック開始 \*/ * html div#contents {height: 1%;} div#contents {display: block;} /* Mac版IE用ハック終了 */ /* 見出し -------------------------------------------------- */ h1 { background-color: maroon; font-size: xx-large; color: #ff9999; margin: -10px -10px 0px -10px; padding: 13px 13px 3px 13px; text-align: center;} /* ナビゲーション -------------------------------------------------- */ div#navigation ul { margin: 0px 0px 0px -10px;} div#navigation li { list-style-type: none; margin: 10px auto; width: 160px;} div#navigation a { text-decoration: none; display: block; width: 100%; font-weight: bold; color: #ff9999; padding: 3px; text-align: center; background-color: maroon; border: outset 3px maroon;} div#navigation a:hover { border: inset 3px maroon;} /* フッター -------------------------------------------------- */ address#footer { margin: 0px -10px -10px -10px; padding: 3px 13px 13px 13px; background-color: maroon; color: #ff9999; text-align: right;} --> </style> </head> <body> <div id="container"> <h1>ページタイトル</h1> <div id="contents"> <div id="main"> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> <p>段落</p> </div> <div id="navigation"> <ul> <li><a href="" title="">Home</a></li> <li><a href="" title="">abc</a></li> <li><a href="" title="">def</a></li> <li><a href="" title="">ghi</a></li> <li><a href="" title="">jkl</a></li> <li><a href="" title="">mno</a></li> <li><a href="" title="">pqr</a></li> </ul> </div> </div> <address id="footer">フッター</address> </div> </body> </html>
- ベストアンサー
- CSS
お礼
わざわざご回答有難う御座います！ こちらの方で色々いじくったところ、自分の思い通りのデザインにする 事が出来ました。