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

解決済

質問者：yoshiki3
質問日時：2008/04/07 08:00
回答数：1件

ＨＰＢｖ１０を利用してＨＰを作成している初心者です。

参考ページ（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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

No.1ベストアンサー

回答者： HEERING#1
回答日時：2008/04/07 12:15

参考ページの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

- 0
- 件

通報する

この回答へのお礼

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

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

通報する

お礼日時：2008/04/07 21:43

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！