CSSがうまくレイアウトできない。。
こんにちは。
この度、ホームページを一新しようとCSSに挑戦中です。
いろいろな書籍等を参考にしながら、やってみているのですが、
出だしでつまずいています。
現在、下記のCSSにて http://www.masudaclub.com/newsite/
でテスト運用中なのですが、ヘッダー部分のロゴと、
その下のメニューがどうしてもずれます。
CSSは書籍のものをベースに改変していったのですが、
部分部分を編集してもいっこうに揃ってくれません。
ご教示願えましたら幸いです。
※CSSを関連部分を載せました。(全文は文字制限で無理でした)
@charset "utf-8";
/* All Layout
-------------------------------------------------*/
body,div,ul,li,h1,h2,p
{
margin: 0;
padding: 0;
}
h1,h2,h3,h4,ul,li,p,address {
font-style: normal;
font-weight: normal;
font-size: 100%;
}
img {
border: 0;
vertical-align: bottom;
}
a {
text-decoration: none;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover {
color: #b6b5b5;
}
a:active {
color: #000000;
}
body {
font: 62.5% Verdana ,sans-serif;
letter-spacing: 0.2em;
color: #464646;
}
.clear:after {
content: ".";
display: block;
height: 0;
clear :both;
visibility: hidden;
}
.clear {
display: inline-table;
}
/* MacIE begin \*/
* html .clear {
height: 1%;
}
.clear {
display: block;
}
/* MacIE end */
#header,
#contents,
#gnavi ul {
margin: 0 auto;
width: 80em;
max-width: 100%;
min-width: 730px;
text-align: left;
}
/* Wrapper
-------------------------------------------------*/
#wrapper {
text-align: center;
}
/* Header
-------------------------------------------------*/
#header {
padding: 0 0 0 0;
text-align: center;
}
/* Gnavi
-------------------------------------------------*/
#gnavi {
clear: both;
margin: 0 0 0 0;
}
#gnavi ul li {
float: left;
list-style-type: none;
font-size: 1.2em;
}
#gnavi ul li a {
/* float: left;*/
/* display: block;*/
}
#gnavi ul li a:hover {
color: #b0b0b0;
}
補足
拡張性のことはもちろんcsっ設計の教科書で知っています。 そういうレベルのはなしではないです。 smacssのutilityの話です。