html・CSSの行揃えについて質問です
- html・CSSの行揃えについて質問です。
- 「adress部分を行揃えを右に指定して、上に線を引く」という部分があって、打ち込んだコードでは最初は正しく行揃えされていたが、他の要素を作成すると線が消えて行が左に寄ってしまう。
- どこが間違っているのか分からなくて困っています。初心者なので説明がわからないですが、教えていただけると助かります。
- ベストアンサー
html・CSSの行揃えについて質問です。
現在、教則本を見ながらhtml・CSSについて勉強しています。 （まだ勉強を始めて３日の、ど初心者です…） 「adress部分を行揃えを右に指定して、上に線を引く」という部分があって 以下のように打ち込んで、最初はきちんと右側に寄って線も引かれたのですが 他の要素を作成していたら、いつのまにか線は消えてしまい、行も左に寄ってしまいました。 [ CSS ] address{ font-size:85%; font-style:normal; text-align:right; border-top:1px solid #000000; padding-top:10px; margin-top:10px; clear:left; } どこが間違っているのか自力では発見できず、困っています。 過去の質問も見ましたが、なんせ初心者でちんぷんかんぷんでした… 申し訳ありませんが、わかる方がいらっしゃいましたら教えてください。 宜しくお願い致します。
- nyannyroko
- お礼率50% (2/4)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
address{ font-size:85%; font-style:normal;□ text-align:right;□ border-top:1px solid #000000; padding-top:10px; margin-top:10px; clear:left; } □の部分は全角のスペースを表す。 右端の不要なスペースを削除してみてください。
関連するQ&A
- css/上部に移動させたい。参考URLあり。
お世話になります。 http://www.sonzai.net/tama/index.html 下の車と動いているgifネコを地平線部分あたりに 上げたいのですが、css・htmlをどのように改変したら良いでしょうか？ 宜しくお願いします。 【gif猫】 #tama1 { font-size: 11px; color: #FFFFFF; font-weight: normal; text-align: center; padding-bottom: 110px; padding-left: 470px; letter-spacing: 1px; } 【小窓・秘密の応接間】 #window1 { font-size: 11px; color: #FFFFFF; font-weight: normal; padding-top: 53px; padding-left: 370px; letter-spacing: 1px; } 【小窓・リンク】 #window2 { font-size: 11px; color: #FFFFFF; font-weight: normal; padding-top: 6px; padding-left: 298px; letter-spacing: 1px; } 【車】 #kuruma { font-size: 11px; color: #FFFFFF; font-weight: normal; padding-left: 68px; letter-spacing: 1px; }
- ベストアンサー
- HTML
- Cssで
次のようなHTMLとCssを作成し、見出しを表示しようとしています。 1つ目の見出しと2つ目の見出しは全く違うものにしたいので、2つ目の見出しにはh2にクラス名を指定しています。 しかし2つ目の見出しは1つ目の見出しの属性を引き継いでいるようで、 border-left: 5px solid #0086b9;などは有効になり2つ目の見出しでも左側に線が表示されてしまいます。 1つ目のcssの情報を完全に消した後、2つ目の見出しを表示する方法をご教授下さい。 ▼HTML <h2>見出し２</h2> <h2 class="sample1">見出し２</h2> ■Css h2 { font-size: 145%; margin-top: 10px; margin-bottom: 10px; padding-left: 10px; border-left: 5px solid #0086b9; border-right: 1px solid #0086b9; border-top: 1px solid #0086b9; border-bottom: 1px solid #0086b9; line-height: 1.4; background-color:#F7F7EF; } h2.sample1{ border-right:solid 2px #808080; border-bottom:solid 2px #808080; background-color:#c0c0c0; padding-top:3px;padding-left:3px; width:300px; }
- 締切済み
- HTML
- cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
- 直接書き込むCSSを外部ファイルに設定したい
CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか？ 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか？CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説２</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>
- 締切済み
- CSS
- CSSのボックスのブラウザごとの解釈の違いについて
見出し（h3）と内容をそれぞれ罫線で囲んだものをCSSで作るため、以下のCSSを作りました。 IEでもFirefoxでも思ったように表示されました。 見出しと内容部分のwidthとborderとpaddingを足した数値を同じにしたので、IEで見出しと内容部分の幅が同じに表示されるのはいいのですが、Firefoxでも幅が同じにに表示されるのはなぜでしょうか？widthだけの幅は違うので、見出し(h3）の方が2px狭く表示されると思ったのですが・・・ そもそもの考え方が間違っているのでしょうか。 ご教授のほど宜しくお願い致します。 h3 { font-size: 13px; padding: 3px 3px 3px 5px; border-top: 1px solid #009933; border-right: 1px solid #009933; border-left: 5px solid #009933; margin: 0px; width: 286px; } p { font-size: 11px; border: 1px solid #009933; margin: 0px; padding: 5px; width: 288px; line-height:130%; }
- 締切済み
- HTML
- css
こんにちは、CSSの勉強をしています。 書籍に下記のようなCSSが書かれてありました。 .photoBoxL .photoSpace, .photoBoxR .photoSpace{ position: relative; left: 0px; top: 0px; border-left: solid 1px #999999; border-bottom: solid 1px #999999; background-color:#FFFFFF; padding: 5px; } これはどのように読めばいいのでしょうか？ 「.photoBoxLというクラスの中にある.photoSpace」と、「.photoBoxRというクラスの中にある.photoSpace」の二つに対して設定するという意味なのでしょうか？ 何かお分かりの方がいましたら教えてください。 よろしくお願いします。
- ベストアンサー
- その他(業務ソフトウェア)
- Opera、ネスケでcssが崩れます
DreamWeaverMXで作業しています。 ブラウザはLunascape（Netscapeから生まれたもの？）とIE6を使用、確認していましたが、 アップ後にOpera9、Netscape、Mozila Firefox1.5で確認したところ CSSが崩れていることに気づきました。 左右のフロートが崩れており、この回避方法を調べましたが よくわかりません。。。。 過去の教えて！から、下記URLを参考にしましたが それでも理解できません。涙 http://members.at.infoseek.co.jp/cssbug/detail/opera.html http://www.keynavi.net/ja/bugh/index.html どなたか制作に詳しい方、助けてください…！ ---------------------------------------- <link rel="stylesheet" href="web.css" type="text/css" media="screen"> --------------- #body{ margin:auto; width: 700px; padding-top: 0px; } #page{ background:#ffffff 700px; width:700px; font-size:11px; color:#585858; border-right: 1px solid #585858; border-bottom: 1px solid #585858; border-left: 1px solid #CCCCCC; border-top-width: 1px; border-top-style: solid; border-top-color: #CCCCCC; } #left{ width:180px; float:left; text-align:left; padding-top: 5px; padding-right: 5px; padding-left: 5px; background-color: #797979; height: 100%; padding-bottom: 10px; margin-left: 1px; border-top-width: 10px; border-top-style: solid; border-top-color: #FFFFFF; } } #right{ width:480px; text-align:left; float: right; margin-right: 3px; padding: 15px; margin-top: 8px; } --------------------------------
- ベストアンサー
- HTML
- CSSについての質問
現在、CSSを使用して、ホームページを制作しています。 a:hoverを使って、メニューを作成しようとしているのですが、 http://www5.atpages.jp/ri19960914/menu.png ↑のようになってしまいます。（URLは、必ず直接入力、またはコピペしてください） イメージとしては、「BBS」を「TOP」と同じ高さにしたいのですが・・・（↓の画像のように） http://www5.atpages.jp/ri19960914/souzou.png メニュー周辺の、CSSとHTMLです。 --------------CSS------------------------- #head { background:url("/images/imgX.png") repeat-x; } #head .menu { padding:100px 0px; } #head .menu li a { padding:40px 40px; border-left:1px solid #0ff; border-right:1px solid #0ff; color:#000; float:left; } #head .menu li a:hover { padding:40px 40px; border-left:1px solid #0ff; border-right:1px solid #0ff; color:#000; background-color:#0ff; } ----------HTML----------- <div id="head"> <div class="menu"> <li><a href="/">TOP</a></li><li><a href="/bbs/">BBS</a></li> </div> ご指導いただければ、幸いです。 お願いします。
- ベストアンサー
- CSS
- cssスタイルシートのリセット
cssで例えば<h1>が以下のように設定されているとき h1 { color: #000; background: none; font-weight: normal; margin: 0; padding-top: .5em; padding-bottom: .17em; border-bottom: 1px solid #aaa; } 以下のようにすると h1.blue { color: #00f; } blueクラスの文字色は青になりますが他のプロパティーは<h1>の設定が継承されます。 <h1>のcss設定を全てデフォルトに戻してblueクラスのcssを新規に設定しなおす方法を教えてください。(<h1>の設定値を全部書き直すのは別として....)
- 締切済み
- HTML
- CSSの優先順位について
うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。（外部CSS） ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。（外部CSSよりヘッダーを優先するとテキストに書いてありました） しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか？？ 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m
- 締切済み
- その他（プログラミング・開発）
お礼
できました！！！！ こんな単純なことだったんですね…。 大変助かりました！ ありがとうございました。