2010-12-31 3 views
1

나는 웹 사이트에서 친구를 찾고 있습니다. 나는 CSS가 처음이다. 브라우저에서 코드를 열면 웹 페이지가 화면만큼 넓지 않습니다. 나는 그것이 화면에 적합하고 너무 작지 않기를 바랄 것이다. 나는 현재 미리보기 기능을 갖춘 기본적인 편집기 인 무료 Coffee Cup HTML 편집기를 사용합니다. 나는 W3Schools, HTML Dog와 같은 사이트를 연구 해왔다. 누구든지 좋은 자원을 제안 할 수 있습니까?CSS 웹 사이트 도움말 Please

#container { width: 760px; margin: 0 auto;} 

수행 작업 :이 라인을 기대 무엇

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

    <head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 

<title>ABA Coach</title> 


    <style type="text/css" media="screen"> 




    body  { margin: 0; padding: 0; } 
     body { color: #333; font: 14px Helvetica, Arial, sans-serif; line-height: 18px; } 
     h2 { color: #333; } 
     a { color: #337810; } 
     p { margin: 0 0 18px; } 
     #container { width: 760px; margin: 0 auto;} 
     #wrapper { float: left; width: 100%; } 



     /* Header */ 
     #header { background-color: lightsteelblue; background-image: url('head.jpg'); border-style:ridge; border-bottom: 5px solid ; } 
     /* 
     #header h1 { color: black; margin: 0 0 3px; padding: 30px 18px 0; } 
     #header p { color: black; font-size: 11px; font-weight: bold; padding: 0 18px; }*/ 


     /* Content Style */ 
     #navigation { border-bottom: 1px solid #ccc; } 
     #navigation ul { padding: 0 18px 9px; } 
     #extra { border-bottom: 1px solid #ccc; } 
     #extra small { font-size: 11px; line-height: 18px; } 
     #content { } 
     #content p, #extra p { padding-right: 18px; } 

     /* Content Positioning & Size */ 
     #navigation { float: left; margin-left: -742px; width: 175px; } 
     #content { margin: 0 215px 36px 215px; } 
     #extra { float: left; margin-left: -200px; width: 175px; } 

     /* Footer */ 
     #footer { background: grey; border-bottom: 2px solid #999; clear: left; width: 100%; } 
     #footer a { color: #eee; } 
     #footer p { color: #ccc; margin: 0; padding: 0 18px 10px; } 
     #footer ul { border-bottom: 1px solid #555; list-style: none; margin: 0 18px 6px; padding: 10px 0 6px; } 
     #footer li { display: inline; font-size: 11px; font-weight: bold; padding-right: 5px; } 


    .center { 
    text-align: center; } 


    </style> 


     </head> 
     <body> 

     <div id="container"> 

     <div id="header"> 

     <div class="center"> 
     <p><a href="index.html"><img src="images/head.jpg" alt="logo" width="100%" height="10%"/></a></p> 



     </div> 

     <div id="wrapper"> 
     <div id="content"> 

     <h2>All About ABA Coach</h2> 

     <p>ABA Coach is a company dedicated to working with individuals and families to provide training and behavior coaching. We have over twenty years of experience working of all levels of abilities. Our experience ranges from (ECI), public and private schools including college level work, independent corporations, and churches.</p> 
     <p>ABA Coach provides expert level functional behavior assessments, behavior intervention plans, IEP development and ARD process intervention, classroom consultations, and behavior intervention plans.</p> 
     <p>ABA Coach administers presentations,consultations, hands on workshops, training for teachers, paraprofessionals, other professionals such as therapists, and siblings and family members.</p> 
     </div> 
     </div> 
     <div id="navigation"> 
     <h2>Links</h2> 
     <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="client.html">Client Log-in</a></li> 
     <li><a href="calendar.html">Calendar</a></li> 
     <li><a href="forms.html">Online Forms</a></li> 
     <li><a href="references.html">References</a></li> 
     <li><a href="contact.html">Contact ABA Coach</a></li> 
     </ul> 
     <img src="images/beach.jpg" width="130" height="105" alt="" title="" border="0" align="" /> 

     </div> 

     <div id="extra"> 
     <h2>What We Can Accomplish</h2> 

     <p>We can provide concrete data of the results of our work.</p> 


     <p><small>Reports and data included:</small></p> 

     <p><small><li>Detailed data and charts of specific goals and changes.</li></small></p> 
     <p><small><li>Video evidence of changes.</li></small></p> 
     <p><small><li> specific goals.</li></small></p> 

     </div> 
     <div id="footer"> 
     <ul> 
     <li><a href="index.html">Home Page</a></li> 
     <li><a href="client.html">Client Log-in</a></li> 
     <li><a href="calendar.html">Calendar</a></li> 
     <li><a href="forms.html">Online Forms</a></li> 
     <li><a href="references.html">References</a></li> 
     <li><a href="contact.html">Contact ABA Coach</a></li> 
     </ul> 
     <p> Copyright 2011 : : 




     </div> 
    </div> 
    <p><a href="#top">Back to Top</a></p> 
    </body> 
    </html> 
+0

나는 HTML과 CSS 학습을위한 webmonkey의 자습서를 추천 할 것입니다 및 서버 프로그래밍. – RMorrisey

+0

[CSS의 가장 좋은 책은 무엇입니까?] 가능한 복제본 (http://stackoverflow.com/questions/199486/what-is-the-best-book-on-css) –

+0

more '좋은 리소스': http : //stackoverflow.com/questions/132587/the-best-css-tutorial-site-blog-book http://stackoverflow.com/questions/2084/can-you-recommend-a-good-css-online-resource - 또는 - –

답변

0

?

+0

나는 그것이 머리글을 제 위치에 잡고 있다고 생각하고 있었다고 생각합니다 ... 배너. – rhonda

+0

그렇지 않습니다. 컨테이너 div의 너비 (코드에 ENTIRE 페이지가 있음)를 설정하고 고정 너비를 760 픽셀로 지정합니다. 유체 너비 페이지를 원하면 해당 선을 제거하십시오. –

+0

나는 그것을 시험해 보았고 왼쪽 열의 "Links"는 페이지 중앙에 스퀴즈를하고 중간 열을 넘겼다. – rhonda

0

width: 100%과 같은 명령문은 해당 요소를 상위 요소의 전체 너비로 확장합니다. body 태그로이 작업을 수행하면 전 체 화면에 맞게 본문이 확장됩니다. [http://www.webmonkey.com/tutorials/] 이 사이트는 내가 배운 전에 나, 일반 HTML 기본적인 웹 페이지를 만들기 시작 가지고 웹 - :