HTML、CSSでのHP作成で質問
- 初心者がHTMLとCSSを使ってホームページを作成しています。ページの上部にタイトルバー、左側に縦のサイドメニューを配置したいと思っていますが、メニューの下に表示されてしまいます。解決策を教えてください。
- HTMLとCSSを使い始めた初心者です。タイトルバーとサイドメニューを配置しようとしていますが、サイドメニューがメニューの下に表示されてしまいます。どうすればうまく配置できるでしょうか？
- ホームページ制作の初心者です。タイトルバーとサイドメニューを配置したいのですが、サイドメニューがメニューの下に表示されてしまいます。解決策を教えてください。
- ベストアンサー
HTML、CSSでのHP作成で質問
ここ何日かでhtmlとcssでホームページを作り始めた初心者です。 わからないところがあって質問させていただきました。 今、タイトルバーとサイドメニューのみがある状態です。 <body> <!-- タイトル --> <div class="titlebar">サイトの名前</div> <br> <!-- メニュー --> <ul> <div class="menu"><li>項目1</li></div> <div class="menu"><li>項目2</li></div> <div class="menu"><li>SAMPLE</li></div> <div class="menu"><li>SAMPLE</li></div> <div class="menu"><li>SAMPLE</li></div> </ul> </body> こんな感じです。 ページの上部はタイトルバー、左側に縦にサイドメニューを置いていますので、 つまりページの内容を ------------------- タイトル ------------------- メ| ここに ニ| 内容を ュ| 書きたい ー| | | このように書きたいということになります。ですが、このままhtmlで サイドメニューに続けてプログラムを書くと、メニューの下に表示されてしまうと思います。 うまくこの場所に内容を始めるにはどうすればよいでしょうか？ よろしくお願いします。
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
divの使い方が間違ってますね。 「タイトル」「サイドメニュー」「内容」をそれぞれdivで区切らないとダメです。 この上で、CSSで各DIVのClassに対して、それぞれの表示位置を定義します。 HTMLにすると以下の様な感じになります。 コピペして表示してみてください。 <html> <head> <title>sample</title> <style TYPE="text/css"> <!-- div.main { MARGIN-LEFT: auto; MARGIN-RIGHT: auto; WIDTH: 800px; } div.titlebar { position: relative; background-color: #6699FF; } div.menu { float: left; width: 300px; background-color: #99FF66; } div.contents { float: right; width: 500px; background-color: #FFFF66; } --> </style> </head> <body> <div class="main"> <!-- タイトル --> <div class="titlebar"> <p class="title">サイトの名前</p> </div> <!-- メニュー --> <div class="menu"> <ul> <li>項目1</li> <li>項目2</li> <li>SAMPLE</li> <li>SAMPLE</li> <li>SAMPLE</li> </ul> </div> <!-- 内容 --> <div class="contents"> <p>ここに内容を書く</p> </div> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
順番が違います。 HTMLでは、その文書全体を、それを構成する要素に分解して、その構成要素一つ一つをマークアップしていきます。デザインは一切(というくらい)考えたらダメです。今から始められるのでしたら、この点だけは徹底的に理解してください。HTML5では、とても厳しくなります。 ＞このように書きたいということになります。 そのためにHTMLを書いてはダメ!!!それはHTMLの仕事じゃない!! 通常の文書は最低限 <body> <div class="header"> <h1>ページの見出し</h1> <p>このサイトは・・・</p> </div> <div class="section"> <h2>本文記事見出し</h2> <p>記事・・</p> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> のような構造はしているはずです。HTML5だと <body> <header> <h1>ページの見出し</h1> <p>このサイトは・・・</p> </header> <section> <h2>本文記事見出し</h2> <p>記事・・</p> </section> <footer> <h2>文書情報</h2> </footer> </body> となります。 <ul> <div class="menu"><li>項目1</li></div> ・・・【中略】・・・ <div class="menu"><li>SAMPLE</li></div> </ul> はナビゲーションですから、 <div class="nav"> <ul> <li>項目1</li> <li>項目2</li> <li>SAMPLE</li> <li>SAMPLE</li> <li>SAMPLE</li> </ul> </div> とマークアップして、それを本文中にでも入れておきます。 ※ulの中には<li>以外は存在してはなりません。 ※BRは、通常は使わない要素です。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ HTML5だと <nav> <ul> <li>項目1</li> <li>項目2</li> <li>SAMPLE</li> <li>SAMPLE</li> <li>SAMPLE</li> </ul> </nav> でよいのです。 ★あくまで、HTMLは、文書を構成している要素(エレメント)をマークアップするものです。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ★その文書構造を元にスタイルを指定していきます。たとえば本文中のナビゲーションでしたら div.section div.nav{} という指定方法になります。デザインのためにclass名をつけるのではありません。また、いちいち書かなくても、 div.section div.nav{}で、本文(section)内の<div class="nav">だとわかります。!!! 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［7.5.4要素のグループ化: DIV要素とSPAN要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より ★下記はHTML4.01strictです。今から始めるなら、HTML4.01strictから始めましょう。Transitionalではありません。HTML5はstrictしかありません。 ★書いたら、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェックする。 ★スタイルシートはその後 ★HTML5 における HTML4 からの変更点の「新しい要素」 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を読むとclass名にどんなものが良いかわかります。 ★下のソースでタブは＿に置換してあるので戻すこと。 文書構造とプレゼンテーションを分けなければならない意味がよくわかると思います。 <!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"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{margin:0;padding:0;} p{margin:0 1em;text-indent:1em;line-height:1.4em;} h1,h2,h3{margin:0;line-height:1.4em;text-align:center;} body{background-image:url(./images/background/stone.jpg);} div.header, div.section, div.footer{ ＿width:80%; ＿min-width:480px;max-width:900px; ＿margin:0 auto; ＿border:solid 1px gray; } div.section{min-height:400px;position:relative;} div.section>*{margin-left:200px;} div.nav{ position:absolute; top:0; width:200px; margin-left:0; height:100%; background-color:white; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページの見出し</h1> ＿＿<p>このサイトは・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文記事見出し</h2> ＿＿<p>記事・・</p> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li>項目1</li> ＿＿＿＿<li>項目2</li> ＿＿＿＿<li>SAMPLE</li> ＿＿＿＿<li>SAMPLE</li> ＿＿＿＿<li>SAMPLE</li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>
- colorwallhg
- ベストアンサー率0% (0/2)
floatをcssでかますか、 htmlだとframeやtableなんかを使うことになるのでしょうか。
関連するQ&A
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。 メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？ 以下がHTMLタグとCSSになります。 アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
- HTMLとCSSのホームページのメニューについて
HTMLで過去に作った経験がほんのちょっとだけありますが、フレームは良くないという話もあり、 またCSSたどあとで全HTMLファイルに対してちょっとの変更でデザイン変更できるということで 今回初めてHTMLとCSSでホームページを作りました。 HTMLはまあこんな感じです。 <body> <div id="contener"> <div id="contents"> <h1>内容だよ</h1> <div id="main"> <p>内容１だよ<br> 内容１ですよ。内容１だって言ってるよ。 </p> </div> </div> </div> <!--左サイドメニューバー（回り込み）--> <ul> <li><a href="index.html">TOPページ</a></li><br> <li><a href="naiyou1/naiyou1.html">naiyou1</a></li> <li><a href="naiyou2/naiyou2.html">naiyou2</a></li> <li><a href="naiyou3/naiyou3.html">naiyou3</a></li> <li><a href="naiyou4/naiyou4.html">naiyou4</a></li> </ul> </body> で今困っているのが「左サイドメニューバー（回り込み）」以下で左にメニューバーを設置しているのですが、 コンテンツを増やすたび”全部のHTMLにリンク１行追加しなければいけない”ということです。 <li><a href="naiyou5/naiyou5.html">naiyou5</a></li> とか。 数ページだったらなんてことないのですが、２０ページ以上になると手間ですし、ミスも出てきます。 こんなものなのでしょうか？ いい知恵があれば教えてください。
- ベストアンサー
- CSS
- HTMLとCSSを使い、
HTMLとCSSを使い、 メニューボタンを作成しました。 しかしIE８やgooglchromeではきちんと表示されるのに対して 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 type="text/css"> <!-- #outline #ul { margin: 0px; padding: 0px; height: 69px; width: 336px; list-style-type: none; } #outline #ul a .menu { font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size: 30px; line-height: 69px; color: #FFF; text-decoration: none; background-image: url(1.gif); background-repeat: no-repeat; text-align: center; padding: 0px; float: left; height: 69px; width: 158px; margin-right: 5px; margin-left: 5px; } --> </style> </head> <body> <div id="outline"> <ul id="ul"> <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> </ul> </div> </body> </html> ************************************************************** メニュー背景ボタンはPhotoshop、色はRGBで作成しました。 ちなみに、 <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <a href="#" class="menu"><li>ホーム</li></a> <a href="#" class="menu"><li>トップ</li></a> に変更すると画像は表示されるようになりますが、 本来ホームとトップの裏に１つづつ表示されるはずの画像が テキストの無い所でもう１つづつ表示されてしまいます。計４つです。 かといって <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <li class="menu"><a href="#">ホーム</a></li> ><li class="menu"><a href="#">トップ</a></li> に変更しても、 a:hoverで色違いの同じ画像を背景にせっとするときにサイズなどがうまくいきません。 ボタンを全て画像にして、ビヘイビアでイメージをスワップさせるという手もありますが、 それは避けたいと思います。 Firefoxでもきちんと表示される正しいコーディングを教えてください。
- ベストアンサー
- HTML
- CSSについて初歩的ですがわかりません
こんにちは。ＣＳＳＰＬＡＹと言うサイトでCSSをＤＬしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか？ 参考ＵＲＬ＝http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters & Lens Hoods</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div><!-- サイドここまで --> <div class="main"> メイン </div><!-- メインここまで --> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・ すいません
- 締切済み
- HTML
- cssのulタグについて質問です。
cssの初心者ですがよろしくお願いします。 以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。 その下に幅いっぱいの画像を入れたかったので 一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。 そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが ２段目の１番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。（横に短くなっている） 画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 cssで指定している画像の大きさも間違いありません。 試しに上のメニューを<div id="header">にして <div class="clear"></div>で区切って 下のメニューを<div id="gnavi">にして分けてもその画像だけが小さくなっています。 htmlはこれです <div id="header"> <ul class="yama"> <li class="logo"><a href>ロゴ</a></li> <li class="kyouiku"><a href="">教育</a></li> <li class="syoukai"><a href="">紹介</a></li> <li class="shizen"><a href="">自然</a></li> <li class="mura"><a href="">村</a></li> </ul> <div class="clear"></div> <div class="line"></div> <ul class="rei"> <li class="name"><a href="">あいうえお</a></li> <li class="abc"></li> <li class="map"><a href="">マップ</a></li> </ul> </div> <li class="name"><a href="">あいうえお</a></li>これが問題のタグです。 文字が足りなかったのでcssの一部ですが /* rei */ #header ul.rei{ float:left; } #header ul.rei li{ float:left; display: inline; } で <li class="name"> のcssですが #header ul.rei li.name { display: block; width:295px; height:51px; } #header ul.rei li.name a { display: block; background: url(../img/name.jpg) no-repeat top left; text-indent:-9999px; height:100%; width:100%; } #header ul.rei li.name a:hover { display: block; text-indent:-9999px; height:100%; width:100%; background: url(../img/name_om.jpg) no-repeat top left; } という風にしています。 初心者のため使い方が間違っているところが多々あると思いますがよろしくお願いします。
- ベストアンサー
- 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で固定したい
左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。 固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。 これをフレームを使わずに作ることはできないでしょうか？ できればカクカクしないようなメニューが作りたいです。 ■■■■■■■■■■■■■ ■menu ■ main ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■■■■■■■■■■■■■ ・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる ・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール 【HTML】 <div id="main"> メインの内容 </div> <div id="menu"> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> <li>メニュー4</li> ・・・・（26項目） </ul> </div> 【css】 #main{ float:right; } #menu{ width:160px; position:fixed; _position:absolute; top:30px; left:0px; }
- ベストアンサー
- HTML
- CSS IEバグ リストの後の隙間を消したい
よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- 締切済み
- HTML
- ＣＳＳレイアウト マージンについて
下記のタグにてメインスペースを両側10pxにしたいのですが、うまくいきません。 下記のようなレイアウトにてうまくmarginなどを行う場合は どのようにしたらよろしいでしょうか？ なお簡単にタグを記載してくださいますと幸いです。 ＣＳＳ body { margin:3em; color:#339900; background:#ffffff; } h1 { padding:0.1em; text-align:center; leter-specing:1em; border-top: 1px solid #000000; border-bottom: 1px solid #000000; } .mainspace { background:#aaaaaa; width:480px; margin-right:10px; margin-left:10px ; position:absolute; left:260px; } .leftmenu { background:#bbbbbb; width:200px; position:absolute; left:50px; } .rightmenu { background:#cccccc; width:200px; position:absolute; right:50px; } ＨＴＭＬ <h1>メインタイトル</h1> <div class="mainspace"> <h2>サブタイトル</h2> <p> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> ただいまテスト中です。<br> </p> </div> <div class="leftmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> <div class="rightmenu"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div>
- ベストアンサー
- HTML
