css - Why can't I add more paragraphs to this HTML document? -
i've finished html , css course @ codecademy , want study python.
before do, build small website things i'm learn, practice html , css skills.
i'm having trouble, because can't add more content below html file , don't know why.
here html (also on http://pastebin.com/br4w1ygl):
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>python</title> </head> <body> <div class="texto"> <h2>welcome flying circus</h2> <p>python powerful, flexible programming language can use in web/internet development, write desktop graphical user interfaces (guis), create games, , more. python is:</p> <ul> <li><strong>high-level</strong>, meaning reading , writing python easy—it looks lot regular english!</li> <li><strong>interpreted</strong>, meaning don't need compiler write , run python! can write here @ codecademy or on own computer (many shipped python interpreter built in—we'll interpreter later in lesson).</li> <li><strong>object-oriented</strong>, meaning allows users manipulate data structures called <strong>objects</strong> in order build , execute programs. we'll learn more objects later.</li> <li><strong>fun use</strong>. python named after monty python's flying circus, , example code , tutorials refer show , include jokes in order make learning language more interesting.</li> </ul> <p>this course assumes no previous knowledge of python in particular or programming/computer science in general.</p> <div id="instrucoes"> <h4>instructions</h4> <p>ready learn python? click save & submit code continue!</p> </div> <div id="hint"> <h4>hint</h4> <p>if loading bar fills doesn't fade away, try refreshing page.</p> </div> </div> <a id="voltar" href="#">[ voltar ]</a> <div class="codigo"> print "welcome python!" </div> <p>oi<p> </body> </html> and css (http://pastebin.com/48xvxede):
html, body, form, fieldset, legend { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin-top: 0; } fieldset,img { border: 0; } legend{ color: #000; } sup { vertical-align: text-top; } sub { vertical-align: text-bottom; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; vertical-align: top; font-weight: normal; } input, textarea, select { font-size: 110%; line-height: 1.1; } abbr, acronym { border-bottom: .1em dotted; cursor: help; } /*o meu código começa aqui, o código acima é um reset*/ /*fonte reset: http://www.maxdesign.com.au/articles/css-reset/ */ html { width: 1300px; margin: 0 auto; font-family: sans-serif; font-size: 0.95em; color: #424242; background-color: #ffffff; } body { } .texto { position: absolute; top: 20px; width: 550px; } #instrucoes { background-color: #fafafa; width: 536px; padding: 5px; color: #585858; border: 2px solid #d8d8d8; } #hint { background-color: #fafafa; width: 536px; padding: 5px; color: #585858; border: 2px solid #d8d8d8; margin: 10px 0 0 0; } .codigo { position: absolute; left: 630px; top: 65px; padding: 10px; width: 676px; height: 420px; background-color: #e6efc2; color: #264409; border: 2px solid #c6d880; font-family: mono; font-weight: bold; font-size: 0.85em; } #voltar { position: absolute; left: 1275px; top: 25px; color: #585858; } a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {background-color: #f2f2f2; } a:active {text-decoration: none;} hr { border: 0; width: 100%; color: #d8d8d8; background-color: #d8d8d8; height: 2px; } here's jsfiddle: http://jsfiddle.net/mbmf2/
does here know why can't add more paragraphs?
the <p> elements have inside main, first div class texto, otherwise, "oi" text,* it'll appear outside document flow because of css took codeacademy's site.
also, when used in context put in, isn't practice wrapper:
.texto { position: absolute; } that cause multitude of confusion down line , doesn't have purpose when taken out of context codeacademy's site (where it's left side-bar).
* forgot close </p> element "oi", don't worry happens experienced developers too! in fact, it shouldn't matter layout , browser rendering, school of thought it's more robust , future-proof code if elements aren't self-closing closed.
Comments
Post a Comment