Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Watch Video

Posted April 24, 2024 4:26pm by

Header and card overlapping

Layout.pug:

doctype html
html(lang="en")
    head
        title Flash Cards
        link(rel='stylesheet', href='/static/stylesheets/style.css')
    body
        include includes/header.pug
        block main

index.pug:

extends app.pug 

block intro 
    h1.namecard-prompt Let's get started 
    a.namecard-submit(href='/cards') Begin!

app.pug:

extends layout 

block main
    section.namecard 
        .namecard-login 
            if name 
                p.namecard-greeting Welcome, #{name}!
                form.namecard-exit(action='/goodbye', method='POST')
                    button(type='submit')
                        img(src='/static/img/close.svg')
            else 
                p.namecard-greeting Hello, student! 
        block intro 
    block card

error.pug:

extends layout

block main
    section.desk
        h1=`${error.message} - Status: ${error-status}`
        img.desk-items(src='/static.img/desk.svg')
        a.button-primary-small(href='/') Go Home
        .paper
            pre.stack-trace= error.stack 
        .tear

hello.pug:

extends app

block intro 
    form.namecard-form(action='/hello', method='post')
      label.namecard-prompt Please enter your name:
        input.namecard-name(type='text', name='username')
      button.namecard-submit(type='submit') Submit

card.pug:

extends app 

block card 
  section(class=`flashcards`)
    .card(class=`card-${side}`)
      .card-header 
      h1.card-title= side 
      #content 
        h2= text
        if hint 
          p.hint 
            i= hint 
      .card-flip-wrap 
        a(href=`${id}?side=${sideToShow}`)
          img.card-flip(src='/static/img/flip.svg')
      .card-next 
        a(href='/cards')
          img(src='/static/img/next.svg')
  script(src='/static/js/app.js')

Does anybody know what to do? i have no idea what is wrong and i really need some enlightening

2 Answers

April 24, 2024 8:20pm

Hiya Ava Jones!

Everything looks create in the code snippets that you shared! As this is a large challenge with many partial files, can you please share your project as a whole? Either with a workspaces snapshot or a github repo.

Also, if you download the project files from the course and then run the completed challenge in the S6V3_Challenge_Complete, are you seeing the same issue with the overlapping?

April 25, 2024 12:08am

Thank you for your help but this course doesn't have a workspace right now and i don't currently have a github. I also don't really know what the file you are referring too. And i cant use a screenshot on treehouse it doesn't seem like.

I get this error when i run the program by pressing the start button: avajones@Avas-MBP flashcards % nodemon app.js [nodemon] 3.1.0 [nodemon] to restart at any time, enter rs [nodemon] watching path(s): . [nodemon] watching extensions: js,mjs,cjs,json [nodemon] starting node app.js The application is running on localhost:3000! Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at new NodeError (node:internal/errors:406:5) at ServerResponse.setHeader (node:http_outgoing:652:11) at ServerResponse.header (/Users/avajones/Personal/flashcards/node_modules/express/lib/response.js:794:10) at ServerResponse.send (/Users/avajones/Personal/flashcards/node_modules/express/lib/response.js:174:12) at done (/Users/avajones/Personal/flashcards/node_modules/express/lib/response.js:1035:10) at exports.renderFile (/Users/avajones/node_modules/pug/lib/index.js:448:12) at exports._express as engine at View.render (/Users/avajones/Personal/flashcards/node_modules/express/lib/view.js:135:8) at tryRender (/Users/avajones/Personal/flashcards/node_modules/express/lib/application.js:657:10) at Function.render (/Users/avajones/Personal/flashcards/node_modules/express/lib/application.js:609:3)

April 25, 2024 2:24pm

Hello again, Ava Jones

Unfortunately, that error does not provide details that would aid in troubleshooting your issue. The files I am referring to are the Project Files. You can use this link or click on downloads under the video. As a reminder, it will be the S6V3_Challenge_Complete folder that you will want to check out.

Another option for sharing your project files is to join the Treehouse Discord Community. This platform allows you to send a zip file of your project and screenshots, making it easier for us to assist you.

May 2, 2024 5:05pm

Brian Jensen, I believe I've identified the issue. The style.css file contains over nine errors. Here's the content of the file for your review. /*! normalize.css 2012-02-07T12:37 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/* Flash Card Styles */

body { position: relative; }

header { padding-top: 20px; padding-bottom: 20px; text-align: center; color: #D64226; font-size: 14px; }

header img { width: 100%; max-width: 350px; }

body { background-color: #EDEAD9; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; }

h1 { margin: 0; }

h2 { font-weight: 400; }

a { text-decoration: none; }

button { outline: none; }

input { width: 50%; height: 30px; font-size: 1em; text-align: center; border: 0; border-radius: 5px; outline: none; color: #34393D; }

/* Buttons */ .button-primary-small { margin-top: 50px; background-color: #fff; border: 2px #D64226 solid; font-size: 1em; padding: 8px 10px; color: #D64226; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; }

.button-primary-small:hover { background-color: #D64226; color: #fff; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

/* Log In */

.namecard { background-color: #F5F3ED; max-width: 400px; margin: auto; color: #727C85; text-align: center; border-radius: 20px; }

.namecard-hello { display: -ms-flex; display: -webkit-flex; display: flex; align-items: center; border-bottom: solid 2px #EDEAD9; padding: 5px 20px; text-align: left; }

.namecard-greeting { font-size: 1em; font-weight: 400; width: 50%; }

.namecard-form { padding-top: 15px; }

.namecard-prompt { font-size: 26px; font-weight: 400; display: block; padding-top: 45px; }

.namecard-name { display: block; margin: 20px auto; }

.namecard-submit { margin-top: 50px; background-color: #fff; border: 2px #D64226 solid; font-size: 1em; padding: 8px 10px; color: #D64226; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; width: 100%; display: block; box-sizing: border-box; }

.namecard-submit:hover { background-color: #D64226; color: #fff; cursor: pointer; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

.namecard-exit { width: 50%; text-align: right; }

.namecard-exit button { background-color: #F5F3ED; border: none; margin-top: 2px; outline: none; }

.namecard-exit button:hover { cursor: pointer; }

/* Flash Cards */ .flashcards { position: absolute; top: 240px; right: 0; left: 0; bottom: 0; }

.card { position: relative; max-width: 400px; min-height: 425px; box-sizing: border-box; margin: auto; padding-bottom: 30px; color: #727C85; text-align: center; border-radius: 20px; line-height: 1.5; border-bottom: 4px solid rgba(0,0,0,.1); }

.card-header { background-color: #727C85; height: 100px; border-top-left-radius: 10px; border-top-right-radius: 10px; }

.card-title { text-align: center; border-top: 2px solid #F5F3ED; border-bottom: 2px solid rgba(0,0,0,.05); color: #727C85; padding: 10px; letter-spacing: 5px; background-color: #F5F3ED; text-transform: uppercase; font-size: 16px; font-weight: 400; }

.card-answer .card-title { background-color: #D64226; color: #F5F3ED; }

.card-question { background-color: #F5F3ED; }

.card-question div:first-of-type { background-image: url("../img/content-header-question.png"); background-size: contain; }

.card-answer { background-color: #D64226; }

.card-answer div:first-of-type { background-image: url("../img/content-header-answer.png"); background-size: contain; }

.card-answer #content { color: #F5F3ED; }

content {

padding: 8% 5%; }

content button {

padding: 8px 10px; font-size: .8em; margin: auto; color: #C79735; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; background-color: #F5F3ED; border: 1px solid #C79735; }

content button {

display: block; }

content button:hover {

cursor: pointer; background-color: #C79735; color: #fff; }

.card-flip-wrap { position: absolute; bottom: 10px; left: 20px; padding-left: 500px: }

.card-flip { max-width: 25px; background-color: #fff; border-radius: 50px; padding: 20px; border: 2px solid #fff; margin-top: 30px; }

.card-flip:hover { border: 2px solid #D64226; cursor: pointer; }

.card-next { position: absolute; bottom: 25px; right: 20px; text-align: center; padding-top: 0px; } .card-next img { max-width: 30px; }

.card-next a:link, .card-next a:visited, .card-next a:hover, .card-next a:active { text-align: center; text-decoration: none; color: #727C85; }

/* 404 Error */

.desk { width: 80%; color: #727C85; margin: auto; text-align: center; }

.desk h1 { font-weight: 400; }

.desk-items { display: block; width: 100%; max-width: 600px; margin: auto; padding-top: 50px; padding-bottom: 50px; }

.paper { text-align: left; color: #34393D; height: 500px; background-color: #f8f8f8; background-size: 100% 2.5em; background-image: linear-gradient(rgba(234, 236, 211, 1) 0.1em, transparent 0.2em); border-left: 0.2em solid rgba(216, 64, 38, 0.5); padding-left: 20px; margin-top: 70px; overflow: scroll; }

.paper pre { font-size: 1em; line-height: 3.15em; white-space: pre-wrap; /* css-3 / white-space: -moz-pre-wrap; / Mozilla, since 1999 / white-space: -pre-wrap; / Opera 4-6 / white-space: -o-pre-wrap; / Opera 7 / word-wrap: break-word; / Internet Explorer 5.5+ */ margin-top: 0; }

.tear { background-image: url("../img/tear.svg"); background-repeat: repeat-x; width: 100%; height: 24px; }

I don't know what is wrong.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.