- 締切済み
幅を可変にし2段組をCSSで組む場合どうしたらよい
下のような表をCSSでtableを使わずに組むにはどうしたらよいのでしょうか。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿__ | | | | 文字列AAAAAAAAA | ____________ _________ | | | | | | | | | 文字列BBBBBBBBB | |★img | |★img | | |＿＿＿＿＿＿＿＿＿＿|___|＿＿_＿|__|_________|__| 枠線がまがってしまいましたが、上記の位置関係で実施にはborderはありません。 この文字列AAAAAAAAAAAはページによって可変なので幅を指定したくありません。 文字列のすぐ後ろぐらいにイメージが来るようにしたいと思います。 左側のタイトルが2行の横にイメージがきます。 イメージは文字列Bの下のラインにそろうように 配置したいのです。いくつか試したのですが、 imgが下方向にいかないのと、 文字列BBBBBBBBBBBBBBB 部分の左側の幅が可変にできません。何か良い方法はないでしょうか。 <h1 id="title"> <ul id="ultitle"> <li class="gloap">文字列AAAAAAAAAAAAAAA </li> <li>文字列BBBBBBBBBBBBBBB </li> </ul> </h1> <p id="icon"><img 1><img 2></p> のようにしました。CSSを色々書きましたが上手くいきませんよろしくお願い致します。 上の表が崩れてしまいましたので、イメージ画像を添付します。 よろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
関連するQ&A
- cssのclassについて
よろしくお願いします。 文字の背景に画像を入れて、更には文字の左側にチェックマークを入れるようにしたいため、cssやhtmlに下記の記述をしました。 【css】 div#test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <div id="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> </div> 上記ですと、確かに背景画像も文字の左側にもチェックマークが入るのですが、下記のようにclass指定すると表示されなくなってしまいます きっとclassの表記が間違っているのだと思いますが困っております ご指導の程よろしくお願いします。 【css】 .test {list-style-position: outside; list-style-image: url(img/checkmark.gif); background-image: url(img/mark.png); color: #ff0000; font-weight: bolder; width: 800px; font-size: 1.0em; line-height: 2.0; } 【html】 <ul class="test"> <ul> <li>テキスト、テキスト000テキスト</li> </ul> また、id名は一つしか使えないがclass名は同じものを複数使えるとお聞きしますが、上記で言うと"test"を複数使えると言う事でしょうか？ きっと私は<p>は</p>で閉めるように、そのあたりが良く分かっていないのかも知れません。 よろしくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- cssの初歩的な質問
初歩的な質問で申し訳ないのですが、以下の画像のように画像を並べたいのですがうまく並べることができせん。 ulで画像たちを囲いmax-widthで最大幅を決めて画面が狭まるほど画像を小さくし、並べるためにfloat:leftをかけてはいるのですが下記の「こうなる」のようになってしまいます。 うまくやるにはどうしたらいいのでしょうか？ よろしくお願いします。 //簡単に書いたコード(実際はid名などを書いてます) html <ul> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> <li><img src="#"></li> </ul> css ul{ overflow:hidden; max-width:310px; margin:20px auto; } ul li{ float:left; width:48%; } ul li img{ width:100%; } ul li:nth-child(even){ padding-left:10px; } ul li:last-child{ width:100%; }
- ベストアンサー
- CSS
- CSSで言語アイコンを指定
サイト右上に国旗画像を置き、それをクリックすると言語の切り替えができるようにするサイトを造ろうとしています。 HTMLで <ul><li><a href="#"><img src="img/gb.gif"></a></li><li><a href="#"><img src="img/fr.gif"></a></li></ul> と指定すると、HTMLファイルのディレクトリが変わると、画像の場所を指定しなければなりません。 これがわずらわしいので、CSSで画像を背景とし、文字列をスペースにすることで画像指定を一括できるようになりました。しかし、画像のサイズと、文字列のサイズをぴったりにできません。どうしたらよろしいでしょうか？
- ベストアンサー
- CSS
- CSSで画像を均等に横並びに配置するには？
テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。 下記のようなイメージで配置したいです。6列。行は可変。 ■…画像 画像の数に応じて、はみだした画像は自動的に下に改行される感じです。 ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ HMTLソースは以下のとおりです。 <ul> <li><a href="*"><img src="img/01.jpg" /></a></li> <li><a href="*"><img src="img/02.jpg" /></a></li> <li><a href="*"><img src="img/03.jpg" /></a></li> <li><a href="*"><img src="img/04.jpg" /></a></li> <li><a href="*"><img src="img/05.jpg" /></a></li> <li><a href="*"><img src="img/06.jpg" /></a></li> <li><a href="*"><img src="img/07.jpg" /></a></li> <li><a href="*"><img src="img/08.jpg" /></a></li> <li><a href="*"><img src="img/09.jpg" /></a></li> <li><a href="*"><img src="img/10.jpg" /></a></li> <li><a href="*"><img src="img/11.jpg" /></a></li> </ul> どのように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
- ボックス内に並べた幅の不定なliのセンタリング方法
list-style:noneのulの幅を決めて配置しています。liには不定長文字列(cgi出力)が入り、 cssでボタンのような感じの背景イメージを指定しでfloat:leftさせ、横並びさせています。 幅の不均一のボタンをボックスの中に並べているのを連想していただきたいです。 当然ですが、liの幅は文字列要素によって変わりますから、 どのliが次の行に繰り越すかわかりません。 教えていただきたいのですが、左寄せになっているliを各行においてセンタリングさせたいです。 IE,FireFox,Opera,Chromeなど一般的なブラウザに対応させたいです。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSのタグについて
今CSSを勉強中の者です。一つ質問させて下さい。 とあるサイトで --------------------------------------------- <div id="album"> <ul> <li><a id="photo" href="#"> <em><img src="album/img/photo.jpg" /></em> <span>写真１</span></a></li> </ul> </div> --------------------------------------------- とHXTML表記があり、CSSの設定は下記のようになっていました。 （※一部抜粋） --------------------------------------------- div#album ul li a em, div#album ul li a span { display: none; } --------------------------------------------- そこで質問です。<em>や<span>のタグを単独で使った 事がなく、どうしてこの二つのタグが使われているの かがわかりません。 特にemはフォントサイズの指定ではないのでしょうか？ それともCSSで効果の設定をするために無理に入れて いるだけなのでしょうか。 勉強中の為に訳の分からない質問なのかも知れませんが どなたか分かりやすく教えて頂けますと幸いです。
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSによるタブメニューの構築について
アクセスありがとうございます。 可変幅のタブ形式メニューをスマートなHTMLで実現したく、CSSで試行錯誤しましたが、どうも成功しません。 アドバイス頂ければと思います。 http://www.pageflakes.com/ こちらのタブメニューの様な物を以下のHTMLで作りたいと思っています。 <ul id="tab"> <li><a href="#">TabName1</a></li> <li><a href="#">TabName2</a></li> <li><a href="#">TabName3</a></li> <li><a href="#">TabName4</a></li> </ul> 使用する画像は "tab_corner_left.png" "tab_corner_right.png" "tab_background.png" の３種類で、名前の通りそれぞれ左端・右端・テキスト部の背景となっており、タブの高さは29pxです。 わざわざ画像を３種類に分けるのは、タブ内に何文字でも入力できる可変幅にしたいからです。 また、ul自体も"position: absolute;" "top: x;" "right: y;"で配置位置を直接指定できればと思います。 タブ内のテキストも、上下の余白を近似値にしたいと思います。 描画エンジンは、GeckoとIEの両方に対応したいと思います。 その際のhackはなるべく避けたいです。 HTMLの多少の改変は構いませんが、直接imgタグを使ったりは避けたい所です。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSのみでのデザインについて
CSSのみでデザインを勉強中です。 その際にわからないことがありましたので、すみませんが、ご教授下さいませ。 ▼HTMLの方の記述 <div id="banner"> <ul> <li><img src="./img/entry.jpg" width="240" height="55" /></li> <li><img src="./img/entry.jpg" width="240" height="55" /></li> </ul> </div> ▼CSSの記述 #banner { float:left; width:240px; margin:0 0 0 17px; display: inline; } #banner ul li { margin-bottom:0px; } 上記の様に記述しています。画像を縦に２つ空白を入れずに並べたいのですが、WIN IE6.0にて、2mm程の空白が空いてしまいます。NN7.1では4mm程空白ができます。operaは意図している通りに表示されます。 何か原因が有るのでしょうか？ どうぞ宜しくお願い致します。
- ベストアンサー
- CSS
- CSSでflotさせた要素を親要素で幅いっぱいに表示したい
以下のHTMLソースで、リストをfloatで横並びにし、 親のdivに対して3列ずつで左右余白なく幅いっぱいに 表示させたいと考えております。 <div> <ul> <li><img></li> <!-- 複数リストを繰り返し --> <li><img></li> </ul> </div> 例えば以下のようなCSSを書いた場合、 div {width:500px;} li {float:left; width:150px; margin-left:10px;} 左端はそろいますが、右端に余白が出来てしまいますよね。 各リストに対して左端用クラス、右端用クラスみたいなものを 指定すれば実現は可能だと思いますが、出来るだけHTMLを編集せず 実現したいと考えております。 IE6~7・safariでとりあえず表示させたいです。 どなたか知識のある方、ご教授の程よろしくお願いいたします。
- ベストアンサー
- HTML
