左つめ、リストのマークと画像の同時表示は？

0   名前： ギンペイ ： 2006/11/30（木） 18:30  ID:lHAQUbKq
何度も質問をさせていただいて、またご回答くださりありがとうございます。

このレイアウトで、リストのマークと画像のマーカーを同時に表示できないのでしょうか、
”←にサークル〜”の左にはサークルのマークを表示したいのです。
また（赤、グリーン）の画像とその列の文字”この列は〜”の間を詰めたいのですが、出来ますでしょうか。

どなたかご伝授をいただけたらと思い投稿させていただきました。
なにとぞ宜しくお願いいたします。


<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--
ul { list-style-image:url("http://www.nizm.co.jp/sitemap/red.gif");
margin: 0px 20px 0px 16px;
padding: 0px;font-size:15 ;font-family: 'MS ゴシック';
color:#0000FF; }


ul ul { list-style-image:url("http://www.nizm.co.jp/sitemap/green.gif");
margin: 10px 0px 10px 19px;
padding: 0px;font-size:12px; font-family: 'MS ゴシック';
color:#000000;line-height:1.5;}


-->
</style>

</head>
<body>


<TABLE width="300" height="200"cellpadding="0" cellspacing="0" border="1">
<TR ><TD width="300" valign="top" align="left">

<ul>
<li>この列は赤画像マーカー
<ul>
<li>この列はグリーン画像</li>
<li>この列はグリーン画像</li><BR>


←にサークルマークを配置したい</li>

</ul>
</li>

<li>この列は赤画像マーカ-</li>
</ul>


</TD></TR>
</TABLE>


</body>
</html>

1   名前： 匿名 ： 2006/11/30（木） 18:30  ID:braAjNZo
ちょっとやってみました。
もっとスマートなやり方もあるのかもしれません。

このソースを表示すると、「←にサークルマークを配置したい」に赤画像マーカーが表示されるようになっています。
.circleの部分のスタイルで指定していますので、使用予定の画像を指定しなおしてください。（スタイル名も適当なものに付け替えてください）


参考までに。



<!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">
	<title>test</title>
	<meta http-equiv="content-style-type" content="text/css">

<style type="text/css"> 
<!-- 
table {width:300; height:200; 
border-spacing:0; border: 1px #000000 solid;}

ul { list-style-image:url("http://www.nizm.co.jp/sitemap/red.gif");
margin: 0px 20px 0px 16px;
padding: 0px;font-size:15 ;font-family: 'MS ゴシック';
color:#0000FF; }

tr { padding:0; width: 300; }

ul ul { list-style-image:url("http://www.nizm.co.jp/sitemap/green.gif");
margin: 10px 0px 10px 19px;
padding: 0px;font-size:12px; font-family: 'MS ゴシック';
color:#000000;line-height:1.5;}

.circle { list-style-image:url("http://www.nizm.co.jp/sitemap/red.gif");
margin-top: -0.35em;}

--> 
</style> 

</head> 
<body> 
 <table>
  <tr><td>
    <ul>
     <li>この列は赤画像マーカー
      <ul>
       <li>この列はグリーン画像</li>
       <li>この列はグリーン画像</li>
       <li class="circle">←にサークルマークを配置したい</li>
      </ul>
     </li>
    <li>この列は赤画像マーカ-</li>
   </ul>
  </td></tr>
</table>
</body> 
</html>

2   名前： ギンペイ ： 2006/11/30（木） 18:30  ID:yUdue6Cb
匿名 さん、アドバイスありがとうございます。

私の説明に不足があったと思われます、

”←にサークルマークを配置したい</li>”の”サークルマーク”は画像ではなく一般的な
リストのマークを表示したいのです。


下のの様に記述するとサークルマークが表示されます。このマークを
”←にサークルマークを配置したい</li>”の左側に表示させたい、という意味です。
レイアウトを崩さずにうまく表示させたいのですが。

なにとぞ宜しくお願いいたします。



<html>
<head>
<title></title>

<style type="text/css">
<!--
ul { list-style-type: circle; }
-->
</style>

</head>
<body>

<ul>
<li>←このサークルを表示させたいのです</li>
</ol>

</body>
</html>



3   名前： sasame ： 2006/11/30（木） 18:30  ID:F5cxQaxL
<li style="list-style-image:none;list-style-type:circle;">←このサークルを表示させたいのです</li>

あとは応用してください。
4   名前： ギンペイ ： 2006/11/30（木） 18:30  ID:R/a/Zpyf
sasameさん、

目から鱗が落ちた思いです。その様に記述すれば良いのですね、
適切なアドバイス本当にありがとうございました。

ギンペイ

一覧へ戻る