html 5 позиционирование с или без div

Я хотел бы знать, если на странице демонстрационного индекса this site url я могу предотвратить переполнение текста или использовать опциональную панель прокрутки, когда текст переместится в нижней части синего поля? Я хотел бы, чтобы макет был похож на this 'production' site (при посещении статистики сервера).html 5 позиционирование с или без div

Могу ли я сделать это с помощью html 5? Должен ли я включать div так, чтобы ограничить переполнение текста под определенным разрешением экрана. Пожалуйста, найдите используемый код html и таблицы стилей (спасибо автору этого дизайна, а также Aayushi Jain, который помог мне с некоторыми настройками таблицы стилей из другого вопроса здесь, на этом сайте).

стилей

html { 
    overflow-y: scroll; } 

div#wrapper { 
    width:90%; 
    margin: 10px auto; 
    position: relative;} 

header#site { 
    height:80px; 
    padding:10px; 
    background-color:#0033FF; 
    margin:10px 0px; 
    text-align:center; } 

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; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    top: 110px; 
    width: 29%; } 


nav ul { 
    list-style:none;} 


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; } 

article { 
    background-color:#0066FF; 
    float:right; 
    width:69%; 
    margin-right:10px; 
    height:50%; 
    overflow-y:scroll; 
     } 

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; 
    float: left; 
    margin: 0; 
    padding: 0; 
    display: inline; } 

.ads { 
    height:50%; 
    width:30%; 
    background-color:#0033FF; 
    margin-bottom:1%; 
    float:left;} 

.ads p:first-child { 
    padding:15px; 
    font-size:2em;} 

.ads p:last-child { 
    padding-left:15px; 
    font-size:1em;color:#CCC;}

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>

благодаря

Pascal

источник

2013-07-20 pascalb

брат ваш вопрос связан с css – Hushme

какая разница в позиционировании HTML5 и позиционировании HTML4. – Adrian

Из моего понимания html5 теги, такие как div, могут быть заменены секцией, заголовками, нижними колонтитулами ... но, похоже, свойства, применимые к div, не применимы к тэгам html 5, таким как overflow: auto – pascalb

Если вы не хотите видеть полосу прокрутки используйте overflow: hidden или overflow: auto.

Теперь, если вы хотите, чтобы часть заголовка была статичной, поместите свой раздел главным и абстрактным в div и сделайте его height: 500px (or something you want), но исправьте его, а затем используйте overflow: hidden в новом безумном div, если вы не хотите показывать переполнения или использовать overflow: auto, если вы хотите показать часть переполнения, но не полосу прокрутки.

источник

2013-07-21 04:25:15

html 5 позиционирование с или без div

ответ

Смежные вопросы