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>

감사

파스칼

출처

2013-07-20 pascalb

brother 귀하의 질문은 CSS와 관련이 있습니다 – Hushme

HTML5 포지셔닝과 HTML4 포지셔닝의 차이점은 무엇입니까? – Adrian

html5에 대한 나의 이해에서 div와 같은 태그는 section, headers, footer로 대체 될 수 있습니다 ... 그러나 div에 적용되는 속성은 overflow : auto와 같은 html 5 태그에는 적용되지 않습니다 – pascalb

스크롤 막대가 다음 overflow: hidden 또는 overflow: auto 사용을 참조하지 않으려면.

이제 헤더 부분을 정적으로 만들려면 섹션에 주 및 초록을 넣고 height: 500px (or something you want)을 만들고 수정 한 다음 을 새로 만든 div에서 사용하십시오. 오버플로 부분을 표시하고 스크롤 막대는 표시하지 않으려면 오버플로 부분을 사용하거나 overflow: auto을 사용하십시오.

출처

2013-07-21 04:25:15

html 5 div의 유무에 관계없이

답변

관련 문제