• 締切済み

CSSについて初歩的ですがわかりません

こんにちは。CSSPLAYと言うサイトでCSSをDLしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか? 参考URL=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 &amp; 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からみてください・・・ すいません

  • mrmon
  • お礼率100% (2/2)
  • HTML
  • 回答数1
  • ありがとう数2

みんなの回答

  • askaaska
  • ベストアンサー率35% (1455/4149)
回答No.1

いつまでも回答がつかないのには理由があるものよ。 目指しているものが判らないので 何を指摘していいのかさっぱりわからないのよ。 なにしろ提示されたHTMLをそのまま表示しても わけのわからない画面になるだけで ますます何をしたいのかわからないわ。 解決を望む場合 とりあえず最低でも 現状と目標がわからないと 辛いわね。

mrmon
質問者

お礼

すいません;; もう一回よく考えて、整理してから出直してきます

関連するQ&A

  • cssのulタグについて質問です。

    cssの初心者ですがよろしくお願いします。 以下内容です。 #headerの中にulタグで float:left; display: inline; を使って横のメニューを作りました。 その下に幅いっぱいの画像を入れたかったので 一度 <div class="clear"></div>で区切って<div id=""></div>を使って画像を入れました。 そして、更にその下に上で使ったulタグをコピーしてclassを変更して新しい横のメニューを作ったのですが 2段目の1番左の画像だけマウスオーバーの画像だけが小さくなってしまいました。(横に短くなっている) 画像の大きさは元の画像もマウスオーバーの画像も同じ大きさです。 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
  • HTMLやcssに詳しい方教えてください

    HTML、cssに詳しい方、助言お願いします。 footerの部分なのですが、footerより上の部分(サイドのナビやメイン部分)にj Query、javascriptを入れる(入れたのはアコーディオン)と、footerの部分がおかしくなります(footerのbackground-colorが一部消えるなど) どなたか、もしおかしい部分があるのでしたら、おかしい部分の指摘をお願いします。xxxはテキストを入れている部分です。 footerのHTML <div class="footercolor clearfix"> <div id="footer"> <div class="footerbox1"> <ul class="footertext1"> <li><a href="../ranking.html">xxx</a></li> <li><a href="../area-top/area.html">xxx</a></li> </ul></div> <div class="footerbox2"> <ul class="footertext2"> <li><a href="../index.html">xxx</a></li> <li><a href="../site.html">xxx</a></li> <li><a href="../info.html">xxx</a></li> <li><a href="../system.html">xxx</a></li> </ul></div> <div class="footerbox3"> <ul class="footertext3"> <li><a href="../inquiry.html">xxx</a></li> </ul></div> </div> <address class="copyright">Copyright (C) xxx.com 2014 All Rights Reserved.</address> footerのcss .footercolor{ background-color:#FFCC99; } #footer{ width:960px; margin:0 auto; } .footerbox1{ width:320px; float:left; } .footerbox2{ width:320px; float:left; } .footerbox3{ width:320px; float:left; } .footertext1{ text-align:center; margin-top:12px; list-style:none; padding:3px; } .footertext2{ margin-top:12px; list-style:none; padding:3px; text-align:left; margin-left:80px; } .footertext3{ text-align:center; margin-top:12px; list-style:none; padding:3px; margin-left:50px; } .footertext1 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext2 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .footertext3 a:hover{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .copyright{ clear:both; text-align:center; font-weight:bold; padding-top:50px; padding-bottom:10px; }

    • 締切済み
    • SEO
  • 初心者です 画像横に文字を入れたい css

    web制作を始めたばかりの初心者です。 画像右側に文字を入れたいのですが、うまくいきません。 本当にはじめたばかりでなんとなくcssの意味が分かりかけたところです。 どうぞご教示ください。 html <ul>     <li><a href="index.htm"><img src="画像"width=""height=""></a></li>     <div class="text">文字列</div> <li><a href="index.htm"><img src="画像" width=""height=""></a></li>    <div class="text">文字列</text> </ul> </div> css .site ul {margin: 0; padding: 0; list-style: none} .site li a {display: block; padding: 5px; font-size: 14px; text-decoration: none} .site li a img {border: none } .site a:after {content: ""; display: block; clear: both} .site img {float: left; width: 250px} .site .text {float: none; width: auto; margin-left: 60px; padding-left: 15px; color: #000000; font-size: 18px}

  • 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
  • HTML、CSS

    FC2(無料サーバー)でホームページを作っているのですが、FC2の広告(Powered by…という下に一行だけ出るもの)が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか? <!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
  • 【CSS】右側エリアがずれ込む

    CSS初心者で、会社のサイトの変更をしています。 現状メイン画像1枚のレイアウトだったところを 差換えでjavascriptで画像を切り替え、リンク先も変更できるようにしました。 はめ込んだところ、右側のボタンがずれ込みます。 何をどうしたら解決できるかわかりません。 どうしたら修正できますでしょうか。 よろしくお願い申し上げます。 ≪修正前のレイアウト≫ □□□□□□□□□ ■■■■■ □□メイン画像□□ ■ボタン■ □□□□□□□□□ ■■■■■ 【HTML】 <div id="keySpace"> <p> <a href="shopping/index.html"><img src="img/key.jpg" border="0" /></a></p> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS外部】 #keySpace { width: 860px; margin: 0px auto; padding: 0px 0px 7px; background: #FFF; } #keySpace p { width: 643px; margin: 0px 12px 0px 0px; float: left; display: inline; } #keySpace ul { width: 205px; float: right; } #keySpace ul li { margin: 0px 0px 3px; } ≪修正後のレイアウト≫ □□□□□□□□□ □□メイン画像□□ □□□□□□□□□ ■■■■■ ■ボタン■ ■■■■■ 【HTML】 <div id="keySpace"> <p> <div id="link1"> <a href="index.html"><img border="0" src="img/top_01.jpg" /></a></div> <div id="link2" class="banner"><a href="shopping/index.html"><img border="0" src="img/top_02.jpg" /></a></div> </p> <ul> <ul> <li><a href="shopping/index.html"><img src="img/btn_service.gif" width="205" height="54" class="imgover" /></a></li> <li><a href="info/member.html"><img src="img/btn_member_end.gif" width="205" height="54" class="imgover" /></a></li> </ul> </div> 【CSS】上記に追加 <style type="text/css"> .banner { display:none; } </style>

    • ベストアンサー
    • HTML
  • このプログラムにある問題点を教えて下さい

    プログラムを自分で作ってみました。 形はイメージ通りですが自信がありません。 何か問題点があるように思えてなりません。 これで正しいのでしょうか? <style type="text/css"> #aaa{ width: 850px; background-color: #eee; } .CCC { width: 750px; height: 133px; margin-left: 35px; margin-top: 15px; } .CCC ul{ margin: 0; padding: 0; list-style: none; } .CCC li.C0 { float: left; } .CCC li.C0 img { padding: 5px; border: 1px solid #ccc; } .CCC li.C1 { width: 200px; padding: 3px 20px 3px 12px; margin-left: 25px; font-size: 16px; font-weight: bold; font-family: "MS UI Gothic"; color: #F05; border-bottom: 1px solid #F05; float: left; } .CCC li.C2 { width: 300px; font-size: 14px; float: left; line-height:150%; margin-left: 50px; margin-top: 15px; } .CCC li.C3 { width: 160px; float: right; } .CCC li.C3 .C4 img{ border: 0; border-style: none; margin-bottom: 25px; } .cf { clear:both; font-size: 15px; color: #ccc; text-align: center; } </style> <div id="aaa"> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> <div class="CCC"> <ul> <li class="C0"><img src="image/image_case01.jpg" width="185" height="123"></li> <li class="C1">タイトルタイトル &nbsp&nbsp&nbsp/ タイトル</li> <li class="C2">コメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメントコメント</li> <li class="C3"><span class="C4"><a href=""><img src="1.jpg" width="160" height="30"></a></span><span class="C4"><a href=""><img src="2.jpg" width="160" height="30"></a></span></li> </ul> </div> <div class="cf">・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・</div> </div>

    • ベストアンサー
    • HTML
  • リストタグを用いた段組みメニューの不具合(IE6)

    数日間大変悩んだのですが解決しなかったため、どなたかご回答頂けると嬉しいです。 リストタグを横に二列並べて段組みにするようなレイアウトを作っているのですが、 IE6で確認した際にdisplay:inlineを使用しているにも関わらずリストが縦に並んでしまいます。 他のブラウザで見る際には問題が無いので、どうしたものかなと途方にくれています。 以下がhtmlとcssです。 【html】 <div class="test"> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="search_clear"></div> <div class="test_left"> <h3>テスト1</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> <div class="test_right"> <h3>テスト2</h3> <ul> <li><a href="#">・あ</a></li> <li><a href="#">・い</a></li> <li><a href="#">・う</a></li> </ul> </div> </div> 【css】 div.test { width: 500px; height: 370px; margin: 15px 0 10px 0; } div.test h3 { width: 220px; font-size: 16px; margin: 10px 10px 0 20px; } div.test ul { width: 220px; margin: 0 10px 15px 10px; list-style:none; } div.test ul li { width: 220px; display:inline; } div.test ul li a { color: #666; } div.test ul li a:hover { color: #999; } .test_clear { clear:both; } .test_left { float: left; width: 240px; } .test_right { float: right; width: 240px; } 仮にこの部分に問題が無いとすると、この要素を囲む他のcssやhtmlに問題あるのかもしれませんが、 何卒宜しくお願い致します。

    • ベストアンサー
    • HTML
  • インラインフレーム、cssの質問です。

    下記の3カラムのページを練習で作っているのですが、 右端のサイドバーをインラインフレームで表示させようとしたところ レイアウトが崩れてしまいます。 そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが 色々調べてはみたのですが 直せなくて困っています。 どなたかお分かりになる方ご回答お願いします。 HTML,CSS,インラインフレームのHTMLの順で貼っています。 HTMLソース------------------------------ <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html> <head> <title></title> <link rel="stylesheet" href="C:/Documents and Settings/abc/デスクトップ/gear crafter/test2.css" type="text/css" /> </head> <body> <div id="container"> <div id="header"> <a href=><img src="http://gearcrafter.web.fc2.com/image/testtop2.jpg" alt="" id="top" /></a></div> <div id="headermenue"> <ul class="topmenue"><a href=><li>cart</li></a><li><a href=>about us</a></li><li><a href=>Q & A</a></li> </ul> </div> <div id="side"> カテゴリ <ul type="square" compact="compact" class="sidecate"> <li><a href=>財布</a></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li> </ul> </div> <div id="main"><a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a> <a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a></div> <div id="side2">sgad<iframe src="side2.html" width="80" scrolling="no" frameborder="0"></iframe> </div> <div id="footer"></div> </div> </body> </html> --------------------------------------------------------------- --CSS--------------------------------------------------------- @charset "shift-jis"; /*画像*/ img { border-style:none; } a img { border-style:none; } a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter: "alpha( opacity=80 )";} /*リンク*/ a:link{ text-decoration:none; color:#34494e;} a:visited{ color:#34494e;} a:hover{color:#245ba6;} a:active{color:#245ba6;} a { text-decoration: none; } /*レイアウト*/ ul.topmenue { margin-right:0px; margin-left:auto; width:29em; } ul.topmenue li { float: right; width: 8em; margin-left: 5px; padding: 2px; border: 1px #b3bc6f solid; background-color: #b3bc6f; text-align: center; } ul.sidecate { width: 2em; margin-left: 1px; margin-top: 0px; padding: 1px; border: 1px #b3bc6f solid; background-color: #d8ddb6; text-align: center; width:194px;} ul.sidecate li {text-align: left; width:194px; } #container { width : 980px; margin-left: auto; margin-right: auto; background-color :#222222;} } #header {width :960px; } #headermenue {width : 960px;} #side { float: left; margin-left: 5px; padding-top: 5px; width: 200px; background-color: #b3bc6f; text-align:center;} #main {margin: 0px 110px 0px 220px; width: 630px;} #side2 {background-color: #b3bc6f; float: right; width: 80px; margin-right: 5px;} #footer {clear: both; width: 960px; } --------------------------------------------------------------- --インラインフレーム---------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <?xml version="1.0" encoding="shift_jis"?> <style type="text/css"> <!-- body { background-color: #000000; width:80px; color:#ffffff; margin-top:0px; } --> </style> <html> <head> </head> <body> test text </body></html>

    • ベストアンサー
    • CSS
  • ul liのclass指定について

    表示が上手くいかないのでお助け下さい。 ul liのliにclass指定をして、それぞれのclassに異なる背景画像を表示させようとしているのですが、 なぜかclass指定をすると画像が消えてしまいます。 class指定をしない状態ですと普通に表示されるのですが、別々の画像を表示させたいと思っているので困っています。 どなたか教えて頂けないでしょうか? また、申し訳ありませんがとりあえず表示されれば良いだけなので htmlやcssの記述に対する細かいツッこみは勘弁して下さい。 宜しくお願いします! 【html】 <div id="side"> <ul id="sidenav"> <li class="a"><a href="test.html">test</a></li> </ul> </div> 【css】 div#side { display: inline; float: left; width: 178px; margin-top: 20px; text-align:center; background:#fff; } div#side ul#sidenav { list-style-type:none; border: none; } div#side ul#sidenav li.a { background:url(../common/side.gif) no-repeat left; background-position: 6px 11px; } div#side li { position:relative; width: 165px; height:40px; padding: 1px; margin: 5px; text-align:left; border: 1px solid #8c8c8c; }

    • ベストアンサー
    • CSS

専門家に質問してみよう