そのため、サイトを HTML5 に変換し、タグを失いました... サイドバーとコンテンツ領域の作業を開始するまでは、すべて順調でした。
たとえば、内のいずれかの要素に<section id="content">margin-top ( #first-article ) が指定されている場合 (または に<section id="content">パディングが指定されている場合)、 のコンテンツは<nav id="sidebar">#content テキストと同じ Y 座標に配置されます。
#sidebar のコンテンツが同じスタイルを受け取るとは言っていないことに注意してください。padding-top、margin、position: top:X、または計算されたスタイルには、これらの要素を同じ Y 座標に配置するものはありません。
レイアウト (およびその他の HTML5 ブロック要素) の作成に関しては、私はかなりの経験がありません。だから、ここまで来れたのはかなりすごいです（笑）。しかし、私は他のすべての方法でCSSに非常に精通しているため、これが私の髪を引き抜く理由です...
display: table-cellスタイルを使用して#sidebarと#contentを配置しました。これは何か関係があると確信しています。残念ながら、これが私がやりたいことをコードに実行させる唯一の方法です。
ここでアドバイスをいただければ、とても助かります。それまでの間、私はこれについてさらに研究を行います。みなさん、よろしくお願いします:)
注: スタイル (下記) に加えて、html5-boilerplateファイル ' normalize.css ' と ' main.css ' を使用しています。彼らは私の問題に貢献していないようですが...
例-私の問題の例
HTMLは次のとおりです。
<div id="page">
<header id="head">
<img id="logo" src="/Images/head/logo-gloss-white.png">
<nav id="account">
<ul>
<li id="phone">Call (503) 256-5600</li>
<li>Logout</li>
<li>My Cart (3)</li>
</ul>
</nav>
</header>
<nav id="main">
Main Menu
</nav>
<nav id="search-bar">
Select Vehicle and Searchbox
</nav>
<nav id="crumbs">
Directory Tree
</nav>
<section id="content-wrap">
<nav id="sidebar">
<ul>
<li>
<span>Nav</span>
</li>
</ul>
</nav>
<section id="content">
<article id="first-article">
<p>Ecommerce Tracking - Before Google Analytics can report ecommerce activity for your website, you must enable ecommerce tracking on the profile settings page for your website. After that, you must implement the ga.js ecommerce tracking methods in your shopping cart pages or through your ecommerce software. The collection of ecommerce methods work together to send each user's transaction information to the Google Analytics database as it occurs. In this way, Analytics can link a specific referral source to a conversion or purchase. Most template-driven ecommerce engines can be modified to include this information hidden in the order confirmation page.</p>
<ul>
<li>General Process</li>
<li>Guidelines</li>
<li>Complete Example</li>
<li>General Process</li>
</ul>
<p>The basic process for tracking ecommerce using Google Analytics can best be described by summarizing the three methods required for tracking ecommerce transactions on your site. These methods are described in the order in which you should invoke them in your shopping cart or ecommerce software.</p>
<p>Create a transaction object. - Use the _addTrans() method to intialize a transaction object. The transaction object stores all the related information about a single transaction, such as the order ID, shipping charges, and billing address. The information in the transaction object is associated with its items by means of the order IDs for the transaction and all items, which should be the same ID.</p>
<p>Add items to the transaction. - The _addItem() method tracks information about each individual item in the user's shopping cart and associates the item with each transaction via the orderId field. This method tracks the details about a particular item, such as SKU, price, category, and quantity.</p>
<p>Submit the transaction to the Analytics servers. - The _trackTrans() method confirms that a purchase has occurred, and all data that has been built up in the transaction object is finalized as a transaction.</p>
<p>There are many ways that this information can be retrieved from the ecommerce engine. Some ecommerce engines write the purchase information to a hidden form that you can use, others keep the information in a database that you can retrieve, and others store the information in a cookie. Some of the more popular ecommerce engines that recognize Google Analytics provide their own modules to simplify order tracking for Analytics.</p>
</article>
</section>
</section>
</div>
<footer id="footer">
Footer
</footer>
CSSは次のとおりです。
body {
background:#121212 url(/images/body/pageBg.jpg) repeat-x top;
font-size:12px;
clor:#333;
}
div#page {
width:1000px;
margin:0px auto;
position:relative;
border-radius:0px 0px 10px 10px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
}
header#head {
position:relative;
height:100px;
background:#121212 url(/images/head/headMetal.jpg) no-repeat right;
border-bottom:#000 1px solid;
}
nav#main {
height:44px;
background:#121212 url(/images/menu/navBarBg.jpg) repeat-x;
}
nav#search-bar {
height:50px;
background:#f70 url(/images/menu/orangeBarBg.jpg) repeat-x;
border-bottom:#F50 1px solid;
}
nav#crumbs {
color:#575647;
height:34px;
background:#fff;
border-bottom:#eee 1px solid;
}
section#content-wrap {
background:#e0e0e0;
border-radius:0px 0px 10px 10px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-radius:0px 0px 10px 10px;
}
#sidebar {
display:table-cell;
width:200px;
background:#fff;
border-right:#ccc 1px solid;
border-radius:0px 0px 0px 10px;
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-radius:0px 0px 0px 10px;
}
#content {
display:table-cell;
height:500px;
padding:15px;
}
footer#footer {
width:970px;
margin:0px auto;
color:#fff;
margin-top:15px;
height:180px;
padding:15px;
background:#1e1e1e url(/images/footer/footBg.jpg) repeat-x center;
border-radius:10px 10px 0px 0px;
-moz-border-radius:10px 10px 0px 0px;
-webkit-border-radius:10px 10px 0px 0px;
}
#page, #footer {
-moz-box-shadow: 0px 0px 20px #000; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #000; /* Safari, Chrome */
box-shadow: 0px 0px 20px #000; /* CSS3 */
}
/* Content */
/*----------------------- This is to demonstrate the issue at hand ------*/
#first-article {
margin-top:100px;
}
/* Head Area */
img#logo {
margin:10px 0px 0px 10px;
}
nav#account {
position:absolute;
top:0;
right:0;
}
nav#account {
margin:0;
}
nav#account li {
float:left;
margin-right:15px;
}