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