ホームページ作成について。

質問

いつも、お世話になっております。

今回、一からサイトを作るのに当たってぶち当たった壁があり
どうしても自力では解決出来そうに無いので、皆様のお力をお貸し下さい。

写真を展示するページを二分割上下のフレームを作ってるんですが
このフレームの下・・メニュー部分の文字同士がどうしても重なってしまうんです・・。
メニュー部分はスタイルシートを使用してるんですが、幅や高さや上下左右(marginやpadding等)
をいくら調節しても、重なってしまいます。

http://cilo.web.fc2.com/photo-studio-room.html

上のURLが問題のページです・・。

そして下のが問題のスタイルシートです・・。

html{
scrollbar-arrow-color:#ccc;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#ccc;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#ccc;
scrollbar-darkshadow-color:#fff;
}
body{
background-image: url();
background-color:#fff;
background-position:right top;
background-repeat: no-repeat;
background-attachment: fixed;
padding:0;
margin:0;
text-align:left;
}
#sub{
width:980px;
height:800%;
}

.main{ margin:10px 20px 10px 0px;
padding:0px 0px 70px 0px;
text-align:left;
font-size:12px;
line-height:1px;
font-family:Verdana,Osaka,'MS P Gothic';
color:#999;
}

h1{
font-size:12px;
color:#666666;
text-align:right;
font-decoration:none;
font-weight:normal;
font-family:'Georgia',Verdana,Osaka,'MS P Gothic';
margin:0px 270px 20px 0px;
padding:0px 80px 0px 0px;
}
h2{
font-size:12px;
color:#666;
font-family:Georgia,Verdana,Osaka,'MS P Gothic';
font-weight:normal;
text-align:left;
letter-spacing:10px;
line-height:20px;
text-decoration:none;
margin:30px 0px 0px 10px;
padding:5px 13px;
}
h3{
font-size:11px;
color:#333;
text-decoration:underline;
margin:5px 10px;
padding:0px 9px;
}

/* メニュー部分の設定 */
#menu {
text-align:center;
letter-spacing:3px;
}
#menu ul{
list-style:none;
margin:50px 0px 0px 0px;
padding:0px;
}
#menu li{
display:inline;
}
#menu li a{
display:block;
color:#666;
border:1px solid #666;
background-color:#fff;
margin:10px 55px 0px 35px;
padding:5px;
}
#menu li a:hover{
background:none;
}
/* テキスト設定 */
.1{
line-height:15px;
padding:10px 10px 0px 10px;
}

/* メルフォ設定 */

form table{
margin-left:30px;
}
td.name{
width:8em;color:#000;
text-align:right;
padding:5px;
float:left;
}
input.name{
width:20em;
height:2em;
color:#000;
font-size:10px;
line-height:15px;
background:transparent;
border-style:solid;
border-color:#000;
border-width:0 0 1px 0;
}
input.url{
width:25em;
height:2em;
color:#000;
font-size:10px;
line-height:15px;
background:transparent;
border-style:solid;
border-color:#000;
border-width:0 0 1px 0;
}
textarea.text{
font-size:10px;
line-height:15px;
border:solid #000 1px;
margin:0.5em 0;
padding:0.5em;
}
td.post{
text-align:
center;
}
input.post{
width:60px;
height:21px;
color:#000;
font-size:10px;
line-height:12px;
background:transparent;
border:solid #000 1px;
text-align:center;
margin:0.5em 0 0 1em;
padding:0;
}
/*　リンク　*/
a{ text-decoration:none; }
a:link{ color:#999; }
a:active { color:#999; }
a:visited{ color:#999; }
a:hover{ color:#00ccff; }

/* 画像のボーダーを0にする */
img { border:none }

/* カーソル設定 */

body{cursor:url();}
a{cursor:url();}

ご回答よろしくお願いします。

回答No.5

b0a0a

CSSもちゃんとコンソールにエラーが出ますから活用して下さい
またChromeのデベロッパーツールなどでは改善すべきポイントを調査することもできます

回答No.4

35fa8e3c

HTMLのスタイルシートのデバッグのやり方をご紹介します。
CSSではJavaScriptのようにエラーを吐いてもらえません。
そこでどんどんソースを削除していき、表示が正しくなったところで止める。
何を削ったら正しくなったのか把握できる。

これを試していただければ、もう少し質の高い質問をしていただけるようになると思います。
現状ですと、答えを差し上げても同じ質で別の内容の質問が２４時間後に出てくる、という事態が起こり、あなたは高頻度でOKWaveに頼るという、とても効率の悪い手法をとらざるを得なくなります・・・。

回答No.3

ORUKA1951

＞今回、一からサイトを作るのに当たってぶち当たった壁があり
　申し訳ないですが、厳しいようですが、せっかくですので、HTMLもCSS一から、まっとうなものを学びなおしてください。
　⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html )
-256点と言う、私も見たことがない点数です。
『このHTMLには重要な問題が多く含まれています。環境によっては閲覧できない可能性が非常に高いと言えます。減点対象外のごく軽度のエラーは割愛されています。( http://www.htmllint.net/cgi-bin/html-lint/htmllint.cgi )』と言われてしまいました。

★フレームは使うべきではありません。十数年前から「HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。」とね。

★デザインのためにtableは使わない。とても厳しく禁止されている。
　単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )

★ユーザーインターフェースに関わるものは変更すべきではありません。
　カソールの形とか、リンクの下線とかは決して変更しないほうが良いです。あなた方のサイトを訪問したときの利便性を考えてください。

【HTML】
・フレームは使わない
・とにかく徹底して文書構造だけをマークアップする。
　　それが見出しなら<h1>～<h6>でくくる。
　　段落なら<p>で・・
・表でないものをtableでマークアップしてはいけません。

【CSS】
・ユーザーインターフェースに関わるものは変更しない
・文書構造に基づいてデザインする。
　※ブロックでないものをブロックにするなどは、極力避ける。
　※いちいちidやclass名をつけなくてよいように

HTML/CSSあわせて、十分の一の文字数で適切なものが出来ますよ。

回答No.2

bm_hiro

ちゃんと見てないですが、HTML自体におかしなところがあります。

↓</DIV>の場所がおかしいのか</table>の場所がおかしいのか。

<table border="0" width="100%" height="0%" cellpadding="0">
<tr>
<td height="0">
</td>
</tr>
<tr>
<td style="text-align:left">
<div id="sub">
<div class="main">
<a href="photo-studio-000.html">000</a>
（中略）
<a href="photo-studio-035.html">035</a>
</tr>
</td>
</table>
</div>
</div>

あんま関係ないかもしれませんけど。

回答No.1

kool_noah

どうしたいのかがよくわからないけど、<div id=sub>っているの？
なにに使いたいの？それ削除すれば変なところで改行しなくなって、押し上げられないけど。