こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

リストとスタイルシートを利用してリンクボタンを作成しているのですが・・・。

HPBv10を利用してHPを作成している初心者です。

参考ページ(​http://www.wsb.jp/hpb/css/dan00.htm​)を利用して「ボタン」を作成しようとしているのですが、ボタン縦方向に配置するのは出来たのですがこのページの下にあるボタンを
「横方向に配置する」方法が分かりません
button.cssの編集で「位置」-->「回り込み」-->「左」にしているのですがボタンが階段状になり「横一列」に表示されません。
おわかりになる方いましたらご教授宜しくお願いします。


★html file★
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title></title>
<LINK rel="stylesheet" href="button.css" type="text/css">
</head>
<body>
<ul>
<li><A href="page1.html">Menu1</A>
<li><A href="page2.html">Menu2</A>
<li><A href="page3.html">Menu3</A>
</ul>
</body>
</HTML>
-------------------------------------------------------------
★css file★

P{
color: #000099;
}
A{
color : #3d3d3d;
background-color : #bce9bc;
text-decoration : none;
text-align : center;
padding-top : 3px;
width : 100px;
height : 30px;
border-width : 5px;
border-style : outset;
border-color : #66cc66;
display : block;
font-size : 0.8em;
font-family : Arial;

float : left;
}

a:visited{
color : #3d3d3d;
}

A:HOVER{<!--マウスが上にあるリンク -->
background-color : #66cc66;
border-width : 5px;
border-style : inset;
border-color : gray;
text-decoration : none;
font-style : italic;
font-weight : bold;
color : fuchsia;
}
A:ACTIVE{
color: #000000;
text-decoration: underline;
}

UL{
list-style-type : none;
padding-top : 0px;
margin-top : 0px;

padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;

float : left;
position : normal;
clear : none;
}

TH{
color: #FFFFFF;
background-color: #3366FF;
}
TD{
color: #000099;
background-color: #CCDDFF;
}
OL{
float : left;
list-style-type : decimal;
}

投稿日時 - 2008-04-07 08:00:55

QNo.3928728

困ってます

質問者が選んだベストアンサー

参考ページのURLは見えなくなっているので、参考にしたもとの記述がわかりませんが、ULだけでなく、ULが囲むリストアイテムLIにも指定が必要だと思います。

あと、marginやpaddingなどでtop/left/right/bottomの四辺すべてに指定をするときは、いちいち記述しなくても、margin:0; とか padding:0; のように1行で済みますよ(^^;

button.cssのUL { }の部分を下記に差し替えてみてください。
----------
UL {
list-style-type : none;
margin: 0px;
}

UL LI {
margin: 0px;
float: left;
}
---------------

あとCSSやタグの意味を知りたい時、私が頻繁に使っているサイトがありますのでご紹介しておきますね。ある程度慣れてくるととても役立つと思います。

参考URL:http://www.htmq.com/index.htm

投稿日時 - 2008-04-07 12:15:21

お礼

HEERINGさん早速の回答有り難う御座いました。
CSSファイルを書き換えて実行したら正常に横一列に並んで表示されました。
それに「HTMLクイックリファレンス」のページはビギナーな私には非常に参考になりそうです、まだまだ見栄えのいいページ作りは出来ていませんが勉強して頑張りたいと思います。
本当に有り難う御座いました。

ps 事後になりましたが参考ページのurl間違っていましたスミマセン​http://www.wsb.jp/hpb/css/dan00.htm

投稿日時 - 2008-04-07 21:43:20

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問