スタイルシートを使用してプレゼンテーションを指定する最大の目的は
構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )ですよ。
デザイン目的でHTMLを書かないためです。
＞海外サイトのテンプレートを元にホームページを作っています。
文書構造が異なるため、それだと決してうまく行きません。
★HTMLの文書構造が分からないので具体的なアドバイスは不可能です。
＞ヘッダーとフッターを固定し、ヘッダーの中にはcssを使ったhtmlを入れ、中央部分にリンク先が表示されるようにしたいです。
という発想ではなく。
・ヘッダーを視覚系メディアではウィンドウのトップに固定して
position:fixed;height:100px;
・ヘッダーの下部にナビゲーションリストを横並びで表示して
position:absolute;top:100px;
・ポインターを項目に乗せると、その詳細がヘッダーの下にぶら下がって表れるようにしたい
li ul{display:none;}
li:hover ul{display:block;}
という風に考えます。
例えば、HTML5で書くと下記のように
※HTML5より前のHTMLでしたら
<header></header>は<div class="header"></div>のようになる。section,footer,navも同様です。
理由
＞DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )
＞HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )
★タブは＿に置換してあるので戻す。
<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
<style media="screen">
<!--
html,body{margin:0;padding:0;background-color:green;}
header{
＿height:100px;width:100%;
＿position:fixed;
＿top:0;left:0;
}
header nav{
＿height:50px;
＿position:absolute;
＿bottom:0;
＿line-height:50px;font-size:0;
＿width:100%;/* navの巾に合わせる */
}
header nav ol,header nav ol li,header nav ul{
＿margin:0;padding:0;
＿list-style:none;
}
header nav ol li{
＿width:10%;
＿display:inline-block;
＿background-color:lime;
＿font-size:25px;
＿border:red 1px solid;
＿position:relative;
}
header nav ol li ul{
＿font-size:50%;
＿position:absolute;top:52px;width:300%;
＿line-height:30px;
background-color:white;
}
header nav ol li ul li{
＿width:50%;
＿font-size:inherit;
＿width:100%;
＿border:none;
＿background-color:transparent;
}
header nav ol li+li+li+li+li ul{right:0;}
header nav ol li ul{display:none;}
header nav ol li:hover ul{display:block;}
section{:margin-top:100px;}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1>ページタイトル</h1>
＿＿<nav>
＿＿＿<ol>
＿＿＿＿<li>Menue1
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="">あいうえお</a></li>
＿＿＿＿＿＿<li><a href="">かきくけこ</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li>Menue2
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="">さしすせそ</a></li>
＿＿＿＿＿＿<li><a href="">たちつてと</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿＿<li>Menue3
＿＿＿＿＿<ul>
＿＿＿＿＿＿<li><a href="">なにぬねの</a></li>
＿＿＿＿＿＿<li><a href="">はひふへほ</a></li>
＿＿＿＿＿</ul>
＿＿＿＿</li>
＿＿＿</ol>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>本文</h2>
<section>
<h2>本文</h2><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p><p>本文記事</p>
</section>
＿</section>
＿<footer>
＿＿<h2>フッタ</h2>
＿</footer>
</body>
</html>
お礼
早速の回答ありがとうございます！！ 凄いです！ ORUKA1951さんのアドバイスをもとに、もう一度考え直してみます。 明日、早速会社で確認してみますね。 まだ、出来た訳ではありませんが、 回答して頂けたことが嬉しいです。 本当にありがとうございます。