スタイルシート 文字と写真の位置について

質問

こんにちは。
スタイルシートの勉強をしていますが、
どうしてもうまくいきません。
文字は、右側へ、写真は、左側に構成しようと思い、
プログラムを記述しました。

</td>
<td width="631" valign="top">
<img src="image/title_4.gif" />
<br /><br />
<div class="r-photo">
<img src="image/phot_1.jpg" /><br /><br />
<img src="image/phot_2.jpg" /><br /><br />
<img src="image/photi_3.jpg" /><br />
</div>
<div class="txt-2">
文字
</div>
<div class="txt-3">
文字<br /><br />
<br />
</div>
<br clear="both" />
<br /><br />
上記と同じプログラムを繰り返し記述すると、
同じものが上下に並んで表示されるはずが、
2つ目の表示は、写真が左に来てしまいます。

ご指導のほど、
よろしくお願いいたします。

回答No.1

noname#83877 · ベストアンサー

肝心のcssの表記がわかりません。
補足をお願いします。

あと、htmlのタグをまずはしっかり記述してみてください。

<div class="r-photo">
<img src="image/phot_1.jpg" /><br /><br />
<img src="image/phot_2.jpg" /><br /><br />
<img src="image/photi_3.jpg" /><br />
</div>

よりは

<ul class="r-photo">
<li><img src="image/phot_1.jpg" alt="" /></li>
<li><img src="image/phot_2.jpg" alt="" /></li>
<li><img src="image/photi_3.jpg" alt="" /></li>
</ul>

の方が適切です。改行でスペースをとるのではなく、cssのmarginでスペースを作ります。

お礼

見直してみて、解決しました。
どうもありがとうございました。
文法を勉強いたします。

回答No.2

ORUKA1951

≫スタイルシートの勉強をしていますが、
　なら、もう一度最初からやり直しです。これでは、結果的に根のすごい遠回りになってしまいますよ。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/ )］より

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。
* ・・・【中略】・・・
*テキストを画像に置き換えて表現する。 →<img src="image/title_4.gif" />
* ページレイアウトの目的で表を用いる。→<td width="631" valign="top">
・・・【中略】・・・
　 こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
　スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より

たとえば例に示されたHTMLですが、文書構造をきちんと書けば・・・たとえば以下のようになるはず。
もちろん、ul/olあるいは<h><p>などでも良い。
<div id="alubum">
　　<h2><img src="image/title_4.gif" width="" height="" alt="アルバム" /></h2>
　　<dl>
　　　　<dt><img src="image/photo_1.jpg" width="[Length]" height="[Length]" alt="***の写真"/></dt>
　　　　<dd>写真1の説明文</dd>
　　　　<dt><img src="image/photo_2.jpg" width="[Length]" height="[Length]" alt="***の写真"/></dt>
　　　　<dd>写真2の説明文</dd>
　　　　<dt><img src="image/photo_3.jpg" width="[Length]" height="[Length]" alt="***の写真"/></dt>
　　　　<dd>写真3の説明文</dd>
　　</dl>
</div>

その上で、
div#album{
　　width:640px;
}
div#album dl{
　　display:block;
　　padding: 0px;
}
div#album dl dt{
　　display: block;
　　float:left;
　　clear:both;
}
div#album dl dd{
　　display:block;
　　margin-left:1em;
　　text-indent:1em;
}
というふうにデザインしていきます。

★CSS検証サービスにあるように、まず正統なHTMLの基礎を身につけること。
たとえば、はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )などで。
　何よりもまず、HTMLとは何か、どのようにマークアップすればよいか・・・それが出来て、初めてデザインに進まなければ、決して上達しません。

お礼

どうもありがとうございました。
勉強になりました。