1
任何人都可以幫助解決這個定位問題嗎？我希望左側菜單垂直放置，沒有任何空白區域。您可以從 the websitehtml 5左側菜單定位
也低於整個代碼，如果你可以從那裏幫忙看看，謝謝
HTML 的index.html
<!DOCTYPE html>
<!-- saved from url=(0064)http://toytic.com/class/examples/e808_html5_Header2NavAside.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web site</title>
<link href="style.css" rel="stylesheet" />
<style>
</style>
<!-- Tell IE we are using html5 + CSS -->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<header id="site">
<h1>WEBSITE</h1>
</header>
<article>
<header>
<h2>This is the article header</h2>
<time datetime="25-11-2010" pubdate="">25th November 2010</time>
</header>
<section id="abstract">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et orci sed neque tincidunt dictum nec at lacus. Fusce feugiat sagittis ligula ac aliquam. Integer ut sodales justo. Etiam ultrices cursus iaculis. Suspendisse bibendum. </p>
</section>
<section id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit mauris. Nulla cursus pretium dapibus. Fusce at faucibus mi. Etiam ac nisi condimentum quam vulputate euismod. Nunc viverra consectetur tempor. Praesent rutrum diam in leo lacinia sit amet volutpat leo tempus. Donec sodales, velit et viverra imperdiet, velit leo placerat libero, fringilla scelerisque justo sapien sit amet sapien. Donec blandit tellus at mi hendrerit hendrerit. Sed suscipit sagittis sodales. Etiam sagittis, tortor quis sagittis laoreet, erat nibh mollis sem, ut tristique felis augue non metus. </p>
<p>Etiam in gravida mi. Maecenas placerat, justo vel gravida egestas, odio sem dictum justo, eget volutpat massa augue in augue. Sed tempus sem a nulla eleifend aliquet aliquet diam pharetra. Proin sit amet imperdiet est. Cras vitae felis in nulla tristique porttitor ut sit amet neque. Quisque sed nisi quam. Aliquam erat volutpat. Nullam dignissim augue odio. Nam sit amet ipsum arcu, id rutrum felis. Phasellus velit mauris, dictum eget tincidunt eget, condimentum eget risus. Proin nibh nulla, sagittis et feugiat in, luctus quis velit. Aenean lobortis mi ut odio accumsan adipiscing. Nulla quis ipsum magna. Suspendisse auctor mauris eu mi cursus ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida vulputate leo, consectetur porta sem euismod nec. Donec et dolor lectus, vel cursus massa. Morbi eu dictum arcu. Fusce luctus porttitor neque, sed eleifend orci tristique convallis. </p>
</section>
</article>
<nav>
<ul>
<li>About</li>
<li>Service</li>
<li>Contact</li>
</ul>
</nav>
<footer>
<div class="col">
<h4>Contact</h4>
<adress>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Janet Griffith</a> from Public Relations</p>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Jil Sanders</a>, webmaster</p>
</adress></div>
<div class="col">
<h4>Sites of interest</h4>
<aside>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Site A</a></p>
<p><a href="http://toytic.com/class/examples/e808_html5_Header2NavAside.html#">Another one</a></p>
</aside>
</div>
<div class="col">
<h4>Legal stuff</h4>
<p>Copyright</p>
<p>Terms of Service</p>
</div>
</footer>
</div>
</body></html>
樣式表的style.css
/* reset the margin and padding and tell the browser to render all HTML5 section tags as block. ->*/
* {margin:0px; padding:0px;}
header, hgroup, footer, section, aside, article, figcaption, figure, nav {
display: block;
}
/* <- reset the margin and padding and tell the browser to render all HTML5 section tags as block.*/
/*The CSS for the basic layout looks like follows. First, by wrapping all other content with the wrapper div we restrict the overall page width to 90% of the browser and leave a little bit of extra margin to the top-border. In addition, the margin-left/margin-right is set to auto meaning our content will always be centered inside the browser.*/
/*Open the code in a new window and resize it to see how the width adapts! First, in our CSS section we introduce a little bit of padding between the browser window and the content. Then, we add some color to the header and footer to actually see them.*/
/* The wrapper centers the rest of the content */
div#wrapper {width:90%; margin: 10px auto;}
/* add some color to distinguish the three sections of the document: header, the main section and the footer. */
/* Next, we set explicitly the height of the header to 80 pixels, add some background color and padding. The margin values introduce top and bottom spacing of 10px. In addition all content will be centered with text-align:center. */
header#site {
height:80px;
padding:10px;
background-color:#0033FF;
margin:10px 0px;
text-align:center;
}
/*Finally, the footer. Usually has a small font-size which is set in our example to 0.8 units of the standard size. Again, some background color. The clear:both make sure that the footer actually is displayed below the main article; it explictly tells the browser that no floating elements are allowed on both sides of the footer.*/
footer {
font-size:0.8em;
clear:both;}
footer .col {
width:30%;
margin:1% 1.1%;
padding:2px;
height:100px;
background-color:#F63;
float:left;
}
nav {
background-color:#0033FF;
float:left;
width:30%;
height:100%;}
nav ul {
list-style:none;}
nav ul li {
float:left;}
nav ul li a {
display: block;
background-color:#CCC;
margin-right: 20px;
width: 110px;
line-height:1.5em;
text-align: center;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
color: #fff;
background-color:#39C;
}
/*The actual trick of aligning both the main article and the navigation horizontally on the same line is done with float:left; while making sure that both fill the full available width. Note that although the sum of the article + nav layer adds up to 100%, the padding introduced for the body actually reduces the overall width to 90% of the browser window.*/
/*The CSS for the article tag. Here we have to make sure that we leave some space for the advertising, so we set its width to 80%. In addition, in order to prevent that the ads are being pushed below the main article, we set float:left.*/
article {
background-color:#0066FF;
float:left;
width:69%;
margin-right:10px;
margin-left:31%;
}
article header {
background-color:#F90;
padding:15px;
}
section#abstract {
font-size:1.09em;
font-style:italic;
margin:10px 0px;
text-align:justify;
padding:5px 80px;
}
section#main {
font-size:1em;
padding:20px;
text-align:justify;
}
/*
section#main{
float: left;
margin: 0;
padding: 0;
display: inline;
}
*/
/* On the right border we place the ads. This is done with the aside tag indicating only remotely related content to the actual article. Each ad has a specific height and width. The overall width together with the main article adds up to 98% (80% + 18%). This is necessary because we have to take into account the 10px margin-right of the article. float:left makes sure the ads are really on the same height as the main article (not below). */
.ads {
height:100%;
width:30%;
background-color:#0033FF;
margin-bottom:0px;
float:left;
}
.ads p:first-child {
padding:15px;
font-size:2em;}
.ads p:last-child {
padding-left:15px;
font-size:1em;color:#CCC;}
我希望這看起來像我目前的網站
http://multiskillz.tekcities.com
我不知道我得到了你的問題。這兩個網站彼此很不相同。 – melancia
我想保留在2個網站相同的佈局或非常相似的東西。---我還沒有使用過stackoverflow的專家，似乎有人說我沒有做過任何研究，他或她可以看看我提供的樣式表文件，並會看到已將註釋移到代碼中我需要了解和我花了一天的時間，原始佈局的鏈接會顯示一些不同的東西，所以要說我在努力瞭解之前要求但我不是設計師 – pascalb