HTML、CSS初心者のための3段目の配置についての解決方法
- html、CSS初心者の方が３段目の２列目の右側に４段目の右の内容を配置する方法について解説します。
- html、CSS初心者の方が３段目の２列目の右側に４段目の右の内容を持っていく方法について教えてください。
- html、CSS初心者の方が３段目の２列目の右側に４段目の右の内容を配置する際にうまくいかない問題について解決方法を教えてください。
- ベストアンサー
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容
html、CSS共に初心者です。３段目の２列目の右に、４段目の右の内容を持っていきたいのですが、どうしてもうまくいきません！ 解決できる方がいましたら、どうかご教示願います！ <style type="text/css"> <!-- * { padding : 0 ; margin : 0 ; } #wrapper { width : 700px; margin-left : auto ; margin-right : auto ; background-color : #eeffff ; } #header { width : 700px; height : 150px ; background-color : #335555 ; } #navigation { /* background-color : #cceeee ; */ width : 300px; float : left ; } #navigation h2 { width : 150px; background-color : #99bbbb ; } #navigation ul { width : 150px ; } #navigation li { width : 150px ; height : 30px ; } #navigation a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #content { background-color : #eeeeee ; width : 350px; float : right ; } #subcontent { width:200 float : left ; clear :both ; } #subcontent h4 { width : 150px; background-color : #99bbbb ; } #subcontent ul { width : 150px ; } #subcontent li { width : 150px ; height : 30px ; } #subcontent a { width : 150px ; height : 30px ; background-color : #bbdddd ; display : block ; } #thirdcontent { background-color : #eeeeee ; width : 500px; float : right ; } #footer { background-color : #335555 ; width : 700px ; clear : both ; } //--> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>pppppppppppppppppppppppppppp</h1> </div> <div id="navigation"> <h2>pppppppp</h2> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppp</a></li> <li><a href="#">pppppppp</a></li> </ul> </div> <div id="content"> <h2>welcome to my hp</h2> <br> <h3>ppppppp</h3> <p>ppppppppppp</p> <h3>pppppppp</h3> <br> <p>pppppppp</p> </div> <div id="subcontent"> <h4>この横にカテゴリーを配置させたいのです</h4> <ul> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">pppppppp</a></li> <li><a href="#">ppppppppp</a></li> </ul> </div> <div id="thirdcontent"> <h4>カテゴリー(これを一段上に)</h4> <br> <h5>pppppppppp</h5> <p>ppppppppp</p> <h5>ppppppp</h5> </div> <div id="footer"> <br> </div> </div> </body> </html>
- raopao
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ポイントは、#subcontentの幅が単位を書き忘れてて未定義なので ちゃんと書いてやることですかね。それと、#subcontent内のulの 幅とliの幅が同じならliのpaddingがゼロじゃないとおかしいです ね。私が気づいたのはそのくらいかな。
関連するQ&A
- <li>の先頭に出るスペースの埋め方を教えてください！
DWを使いリストでロールオーバリンクするメニューを作っているのですが、どういうわけか最初の<li>の前に大きなスペースが出てしまします。また、FireFoxで確認をすると、メニューが入っているdiv(#navigation)の上に空白が出来てしまいます。この問題を解決するにはどうすればいいのでしょうか？ ちなみにHTMLは↓ <body> <div id="all"> <div id="header"></div> <div id="navigation"> <ul class="sample"> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> </ul> </div> <div id="main"></div> <div id="main2"></div> <div id="footer"></div> </div> </body> ---------------------------- そしてスタイルシートは↓ #all { background-color: #00FF00; width: 750px; position: relative; height: auto; margin-right: auto; margin-left: auto; } #navigation { background-color: #FF0000; height: 50px; width: 750px; position: relative; clear: right; } #main { height: 270px; width: 750px; position: relative; background-color: #FFFF99; } #footer { background-color: #999999; height: 50px; width: 750px; position: relative; clear: right; } #ul.sample { width: 100%; } #header { background-color: #999933; height: 200px; width: 750px; position: relative; clear: left; } a.sample { text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 16px; text-decoration: none; color: #FFFFFF; background-image: url(img/blue-spy.JPG); height: 35px; width: 125px; padding-top: 15px; float: left; } a:hover.sample { background-image: url(img/sky.jpg); } ul.sample li { list-style-type: none; float: left; } #navigation li { float: left; height: 50px; width: 125px; } です。 本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか？
- 締切済み
- CSS
- liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
- 【初心者】cssの背景画像について
cssを独学で勉強中なのですが、背景画像をなぜかうまく表示させられません。 やりたいことは例えば↓のページのように、 背景に画像を指定してメインのコンテンツは白を背景にするというよくあるレイアウトです。 http://www.spstore.com/ bodyの背景に画像を指定、メインコンテンツ(<div id="container">)の 背景として白の画像をrepeatで指定というようにしているのですが、containerの背景画像が表示されません。 初歩的な質問ですみませが、「ここがおかしい」という点と、 もし可能であれば「ふつうはこうする」というのがあれば教えてください。 以下作りかけですがcssとhtmlです。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ * { margin: 0; padding: 0; font-size: 15px; } body { background-image:url(../img/washi.png); background-repeat: repeat; } #header { width: 750px; height: 50px; margin-right: auto; margin-left: auto; margin-top: 10px; } #container { width: 750px; margin-right: auto; margin-left: auto; background-image:url(../img/white.gif); background-repeat: repeat; } #footer { width: 750px; margin-right: auto; margin-left: auto; } #logo { width: 300px; float: left; } #global-nav ul li { clear: both; display:inline; list-style:none; width: 450px; margin-right: auto; margin-top: auto; margin-bottom: auto; } .local-menu { width: 200px; height: 150px; margin: 0px 25px; list-style-type: none; float: left; } .local-menu ul li { list-style-type: none; } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!DOCTYPE hTML PUBLIC "-//W3C//DTD XhTML 1.0 Transitional//EN"> <html> <head> <link rel="stylesheet" type="text/css" href="css/common.css" /> </head> <body> <div id="header"> <div id="logo"> <img src="img/logo.gif" /> </div> <div id="global-nav"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> <div id="container"> <!-- メインイメージ --> <img src="img/img_main.jpg" alt="タイトル" /> <!--// メインイメージ --> <div id="map"> <!-- MAP --> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> <div class="local-menu"> <h3>●</h3> <ul> <li>●</li> <li>●</li> </ul> </div> </div> <div id="footer"> <!-- フッター --> </div> </body> </html>
- 締切済み
- CSS
- cssのfloatで右にメニューを出す方法を勉強し
cssのfloatで右にメニューを出す方法を勉強しています。 ヘッダの左にロゴ（クリックをするとTOPへ飛ぶ） 右にメニューを横並びで表示したいです。 ＿＿＿＿＿＿＿＿＿ ■ ■■■■ ロゴ メニュー ＿＿＿＿＿＿＿＿＿ のようにしたいのです。 例えばロゴもメニューもそれぞれwidth100px heith50pxのサイズとし、 メニューにもそれぞれ違う画像を入れ、マウスオーバーで違う画像に変わるようにし、marginを10pxあけるとすると ☆★☆★css☆★☆★ /* abc */ #header ul.abc{ float:right; margin: 0 ; padding: 0 ; width: 400px; } #header ul.abc li { float:left; display: inline; } /* 01 */ #header ul.abc li.01 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.01 a { display: block; background: url(../img/01.jpg) no-repeat top left; } #header ul.abc li.01 a:hover { display: block; background: url(../img/01_om.jpg) no-repeat top left; /* 02 */ #header ul.abc li.02 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.02 a { display: block; background: url(../img/02.jpg) no-repeat top left; } #header ul.abc li.02 a:hover { display: block; background: url(../img/02_om.jpg) no-repeat top left; /* 03 */ #header ul.abc li.03 { width:100px; height:50px; margin:0 10 0 0; } #header ul.abc li.03 a { display: block; background: url(../img/03.jpg) no-repeat top left; } #header ul.abc li.03 a:hover { display: block; background: url(../img/03_om.jpg) no-repeat top left; /* 04 */ #header ul.abc li.04 { width:100px; height:50px; margin:0 0 0 0; } #header ul.abc li.04 a { display: block; background: url(../img/04.jpg) no-repeat top left; } #header ul.abc li.04 a:hover { display: block; background: url(../img/04_om.jpg) no-repeat top left; ☆★☆★html☆★☆★ <div id="header"> <div class="logo"><a href="">ロゴ</a></div> <ul class="menu"> <li class="01"><a href=""01</a></li> <li class="02"><a href="">02</a></li> <li class="03"><a href="">03</a></li> <li class="04"><a href="">04</a></li> </ul> <div class="clear"></div> </div> これは例なんですが、 この記述できると思ったのですが、うまくいかず困っています。 何か足りないのでしょうか？それともcssで何か勘違いをしているのでしょうか？ お手数をおかけしますが、ご教授お願いします。
- ベストアンサー
- CSS
- XHTML+CSS フッターのcopyが2重になってしまいます
XHTML+CSSでのホームページ作成で、 IE6のみフッター部分の下に、 Copyright 2008 ///////// All Rights Reserved.の erved.の部分が2重に表示されてしまいます。 どなたかご教授お願い致します。 *HTML <div id="footer"> <div id="footernavi"> <ul> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> <li><a href="index.html">テスト</a>｜</li> </ul> </div> <p>Copyright 2008 ///////// All Rights Reserved.</p> </div> *CSS #footer { background: url(image/footer.gif) repeat; float: left; height: 70px; width: 710px; padding-top: 40px; padding-left: 40px; display: block; font-size: 12px; color: #333333; } #footernavi { height: 20px; width: 710px; float: none; line-height: 20px; } #footernavi ul { float: left; height: 20px; width: 710px; margin: 0px; padding: 0px; } #footernavi ul li { float: left; list-style-type: none; font-size: 12px; color: #333333; } #footernavi ul li a { list-style-type: none; font-size: 12px; color: #333333; text-decoration: none; }
- ベストアンサー
- HTML
- IEでCSSによる背景画像の高さが伸びる原因は？
2枚の画像で、リンクを行おうとした場合、 div内にh2とulでリンクを行っています。 ところが、高さ（hight）を全てに指定しているにも関わらず、 divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。 borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか？ FIREFOXだと綺麗に表示されます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style> <!-- * { margin:0; padding:0; } h2,ul { text-indent:-9999px; list-style:none; } h2 a { width:175px; height:28px; display:block; } ul a { display:block; width:175px; height:24px; } ul li { padding:0; margin:0; } .float_right { float:right; } .mgn_btm7 { margin-bottom:7px; } div#NAVIBAR { width:175px; margin-top:43px; height:398px; background-image:url(image/test-a.gif); background-repeat:no-repeat; border:1px #FF0000 solid; } h2 a:hover { background-image:url(image/test.gif); background-position:0 0; background-repeat:no-repeat; height:23px; } ul a:hover { background-image:url(image/test.gif); background-repeat:no-repeat; height:23px; } ul a#E:hover { background-position:0 -28px; } ul a#F:hover { background-position:0 -52px; } ul a#G:hover { background-position:0 -76px; } ul a#H:hover { background-position:0 -100px; } ul a#I:hover { background-position:0 -124px; } ul a#J:hover { background-position:0 -155px; } ul a#K:hover { background-position:0 -179px; } ul a#L:hover { background-position:0 -203px; } ul a#M:hover { background-position:0 -227px; } ul a#N:hover { background-position:0 -251px; } ul a#O:hover { background-position:0 -275px; } ul a#P:hover { background-position:0 -299px; } ul a#Q:hover { background-position:0 -323px; } ul a#R:hover { background-position:0 -347px; } ul a#S:hover { background-position:0 -371px; } --> </style> </head> <body> <div id="NAVIBAR" class="float_right"> <h2><a href="#">タイトル</a></h2> <ul class="mgn_btm4"> <li><a href="#" id="E">ああああああ</a></li> <li><a href="#" id="F">いいいいいい</a></li> <li><a href="#" id="G">うううううう</a></li> <li><a href="#" id="H">ええええええ</a></li> <li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li> <li><a href="#" id="J">かかかかかか</a></li> <li><a href="#" id="K">きききききき</a></li> <li><a href="#" id="L">くくくくくく</a></li> <li><a href="#" id="M">けけけけけけ</a></li> <li><a href="#" id="N">ここここここ</a></li> <li><a href="#" id="O">ささささささ</a></li> <li><a href="#" id="P">しししししし</a></li> <li><a href="#" id="Q">すすすすすす</a></li> <li><a href="#" id="R">せせせせせせ</a></li> <li><a href="#" id="S">そそそそそそ</a></li> </ul> <hr> </div> </body> </html>
- ベストアンサー
- HTML
- 【CSS】firefoxで背景が表示されない－ナビゲーション（画像置換リンク）
「li」に背景画像を指定して、ナビゲーションをつくってみたところ・・・ Firefox、Operaで表示されません。 （IEでは表示されます。） ヘッダー左にロゴ（これはどのブラウザでも表示される）、右側にナビゲーションを配置した作りです。 ハックなど色々調べてみたのですが、解決できず・・・。 力をお貸しいただけないでしょうか。 g_nav.gif・・・グローバルナビゲーション一枚画像550px×30px。（上部：ロールオーバー前、下部：ロールオーバー時） 【HTML】 <!--headerここから--> <div id="header"> <!--logoここから--> <div id="logo"> <h1><a href="aaa.html">logo</a></h1> </div> <!--logoここまで--> <!--naviここから--> <div id="nav"> <ul> <li id="nav01"><a href="aaa.html">あああ</a></li> <li id="nav02"><a href="aaa.html">あああ</a></li> <li id="nav03"><a href="aaa.html">あああ</a></li> <li id="nav04"><a href="aaa.html">あああ</a></li> <li id="nav05"><a href="aaa.html">あああ</a></li> </ul> </div> <!--naviここまで--> </div> <!--headerここまで--> 【CSS】 #header{ width:800px; height:70px; margin:0 auto; padding:0; } #logo { width:216px; height:70px; background-image:url(../cmn_img/logo.gif); float:left; } #nav{ width:550px; height:30px; float:right; margin:40px 0 0 0; padding:0; text-indent:-999em; } #nav ul{ margin:0; padding:0; list-style-type:none; } #nav li{ display:inline; } #nav li#nav01 a,#nav li#nav02 a,#nav li#nav03 a,#nav li#nav04 a,#nav li#nav05 a,{ display:block; background-image:url(../cmn_img/g_nav.gif); overflow:hidden; float:left; } #nav li#nav01 a{width:110px; height:30px; background-position:0 0;} #nav li#nav02 a{width:110px; height:30px;background-position:-110px 0;} #nav li#nav03 a{width:110px; height:30px;background-position:-220px 0;} #nav li#nav04 a{width:110px; height:30px;background-position:-330px 0;} #nav li#nav05 a{width:110px; height:30px;background-position:-440px 0;} #nav li#nav01 a:hover{width:110px; height:30px;background-position:0 -30px;} #nav li#nav02 a:hover{width:110px; height:30px;background-position:-110px -30px;} #nav li#nav03 a:hover{width:110px; height:30px;background-position:-220px -30px;} #nav li#nav04 a:hover{width:110px; height:30px;background-position:-330px -30px;} #nav li#nav05 a:hover{width:110px; height:30px;background-position:-440px -30px;} 【下記ハック使用】 #header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #header {display: inline-table;} /* Hides from IE-mac \*/ * html #header {height: 1%;} #header {display: block;} /* End hide from IE-mac */
- 締切済み
- CSS
- リストを全体的に右寄せにしたい。
リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>
- ベストアンサー
- HTML
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
お礼
色々試行錯誤してみたのですが、まだ解決できません！ 今からまた勉強してトライしてみます！ 回答有難うございました。