Nothing is working!

1

I am currently working on the survey form challenge to complete my HTML and CSS course. Nothing seems to be going right. There are whole swatches of code that the computer, (or whatever reads the code and runs it on CodePen), isn’t running. I am getting very frustrated. :angry: I think that I’m losing my sanity. :rage: Let me list some things out for you:

  1. The box in the middle of the page that holds the form is not centered and is twice the width that I need/ want it to be.
  2. The box that holds the form info is replicating the background image inside it. I need for the box to be a solid color.
  3. I’m scared that the background image will be completely covered by the box and no one will be able to see it.
  4. I have the right code for the test, but there is no test box, like CodePen is unable to run that code, so the tests don’t exist.

There are a couple other things that are bothering me, but I can’t recall exactly what they are right now. All I know is that this whole thing is becoming more and more frustrating. On top of this, there are evidently still some things that are wrong with my tribute page which I have to fix. :tired_face: Also, for all those who wish to know, I never received a validation email from CodePen, and I don’t know how to ask them for another one. (Sorry for my little rant. I needed it. :sob:

here it my code so far. (sorry, yes it is a huge mess): https://codepen.io/NeonFoxX/pen/abdoLMV

2

image
image1888×664 201 KB

Is this more along the lines of what you were going for?

3

Next time use VS Code and “Live server”, it will save you hours and hours

1 Like
4

@nhcarrigan
Kinda, lot closer than what I had.
More like the image should take up the entire page, I have no clue where all that white is coming from.
The box should be centered in the image.
What did you do to get the forum info centered? and the box black???
Tell me your secrets! I am but a novice.

@Spyhere What is that and how does it work? (you can just send me a link to an article that explains it if you want).

5

VS is very powerful. Also search about development tool in chrome, there you will be able to debug even js and react projects. So it will save you hundreds of hours.
Keep your project files in folder.
Also you can click on the project folder with right click and choose “Open with VS” - this is just a small lifehack for you))
2 Likes
6

@Spyhere Thanks I’ll make sure to look into this. :slightly_smiling_face:

7

hey,
first of all if u want img to be as body size just use background-size:cover;

html code : u need to close first div and add a class to it so u can center all in it with display flex, align-items and justify-content.

https://codepen.io/david-gelu/pen/oNbXgJv, here is my solving to you’re problem and pls chose another background or text color, you can’t read it to well.

Have a nice day and happy coding

8

If I can offer you two hints on building your page;

  • Get all of the user stories to pass first, then start styling the page. If you try and do both simultaneously you’re going to give yourself heartache.
  • Use external styling. No internal or in-line styling.
3 Likes
9

Centering: several ways, but easiest is making a class for your tag that you want to center:

do something like in CSS:

.class_to_use {
display: flex;
justify-contents: center;
align-items: center;
}

If that doesn’t work you jacked up your margins/padding and they’re exceeding the space on the screen somehow. There is no fixed math with that, but start with “margin: 0; padding: 0;” and apply it to the * CSS tag. Adjust it after that until it looks right. Make sure you’re using: “box-sizing: border-box;” as well so you are having accurate element sizes.

Fixing the background, use:

background: url(‘https:\\wherever/it/is.jpg’) no-repeat center center/cover;

Set a different background color for the “form” tag, you can set the opacity property to make it slightly see-through. You would have to use rgba color rather than hex or anything else or it’ll make the text transparent too, lol. Just remember “opacity” affects all the text/background and “background-color: rgba(10,10,10,0.7);” would only affect the background color not the text. (probably what you want…)

For the test box you gotta add the “script” tags from the project spec to the bottom of your code right before the end “body” tag.

You will have to manually set widths on the elements if you want to control them. The other way is add padding to them and control the width of their containers until they look right. (There is often more than one way to do things in CSS.)

P.S. - Don’t mix “flex” alignments with “text-align”.