2010-12-31 14 views
1

Ich arbeite an einer Website für einen Freund. Ich bin neu in CSS. Wenn ich den Code im Browser öffne, ist die Webseite nicht so breit wie der Bildschirm. Ich möchte, dass es auf den Bildschirm passt und nicht so klein ist. Ich verwende derzeit den kostenlosen HTML-Editor für Kaffeetassen, der nur ein einfacher Editor mit Vorschaufunktionen ist. Ich habe Websites wie W3Schools, HTML Dog recherchiert. Kann jemand gute Ressourcen vorschlagen?CSS Website Hilfe Bitte

<!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

würde ich Webmonkey der Tutorials für das Lernen HTML und CSS empfehlen: [http://www.webmonkey.com/tutorials/] Diese Seite hat ich begann mit einfachen HTML grundlegenden Web-Seiten zu machen, bevor ich web- gelernt und Server-Programmierung. – RMorrisey

+0

mögliches Duplikat von [Was ist das beste Buch über CSS?] (Http://stackoverflow.com/questions/199486/what-is-the-best-book-on-css) –

+0

mehr 'gute Ressourcen': 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 -oder-Buch –

Antwort

0

Was Sie diese Zeile erwarten Sie:

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

zu tun?

+0

Ich glaube, ich dachte, es hielt den Header an Ort und Stelle ... das Banner. – rhonda

+0

Es ist nicht. Es setzt die Breite des Container-Div (die in Ihrem Code die GESAMTE Seite enthält) und gibt ihm eine feste Breite von 760 Pixeln. Wenn Sie eine Seite mit Flüssigkeitsbreite wünschen, entfernen Sie diese Zeile. –

+0

Ich habe das versucht und die linke Spalte "Links" quillt in die Mitte der Seite und überläuft die mittlere Spalte. – rhonda

0

Eine Anweisung wie width: 100% würde dieses Element auf die gesamte Breite des übergeordneten Elements erweitern. Wenn ich dies mit dem Tag body anwende, wird der Körper wahrscheinlich auf den gesamten Bildschirm erweitert.