Creating high-quality tabs for a gaming project

Question

Creating high-quality tabs for a gaming project

I tried following a tutorial on YouTube to create some professional tabs, but unfortunately my code didn't turn out the way I wanted. I was hoping to be able to scroll through different tabs and have a separate HTML file for each one.

Although I'm new to CSS, I believe I formatted it correctly based on the video instructions.

Below is my CSS/HTML code:

CSS code:

...

My HTML code:

...

After implementing the code, the output wasn't what I expected. Instead of being able to scroll through the pages like in the tutorial, my tabs were not functioning properly. Here is a screenshot of the issue: http://prntscr.com/nrkf6v.

javascript html css

Answer 1

Answer №1

Your formatting is incorrect.

You made 5 or 6 CSS errors and a significant one in HTML (the <body tag was not closed). In web development, every character matters. While there are exceptions, they are just that: exceptions.

The golden rule is: "every mistake breaks something."
Here is the correct output.

To ensure your code is error-free, you should use a validator tool (HTML validator, CSS validator, etc...) or an IDE (an intelligent editor that provides suggestions and alerts you of potential mistakes based on current web standards).

body {
  margin: auto;
  background: #efefef;
  font-family: arial;
}

.nav_bar {
  margin: auto;
  border-bottom: 1px solid #000000;
  width: 860px;
  padding: 0 20px 0 20px;
  height: 64px;
  margin-top: 30px;
}
/* more CSS code... */

Answer 2

Your formatting is incorrect.

You made 5 or 6 CSS errors and a significant one in HTML (the <body tag was not closed). In web development, every character matters. While there are exceptions, they are just that: exceptions.

The golden rule is: "every mistake breaks something."
Here is the correct output.

To ensure your code is error-free, you should use a validator tool (HTML validator, CSS validator, etc...) or an IDE (an intelligent editor that provides suggestions and alerts you of potential mistakes based on current web standards).

body {
  margin: auto;
  background: #efefef;
  font-family: arial;
}

.nav_bar {
  margin: auto;
  border-bottom: 1px solid #000000;
  width: 860px;
  padding: 0 20px 0 20px;
  height: 64px;
  margin-top: 30px;
}
/* more CSS code... */

Creating high-quality tabs for a gaming project

Answer №1

Similar questions

What is preventing me from getting this straightforward CSS transition to function properly?

The onchange event for the input type=file is failing to trigger on Google Chrome and Firefox

IFrame displaying blank page instead of report

Why is the error message "Invalid field name: '$conditionalHandlers' in 'collaborators..$conditionalHandlers'" popping up now?

The display attribute is malfunctioning in Internet Explorer when trying to style Font Awesome icons

Strategies for optimizing the storage of data from react-quill to the backend system

Having trouble with updating label text in MUIDataTable in ReactJS?

The Bootstrap datepicker functions properly when used in plain HTML, but encounters issues when implemented within the .html()

Can you guide me on using protractor locators to find a child element?

Prevent pseudo elements from increasing the height of the viewport

What is the best way to horizontally center a div on an extra small screen using Bootstrap?

You cannot modify a variable inside an event handler function unless it is declared globally in the code

Transfer the address information to the billing address fields

Tips on modifying a particular item within a sub-document array using Mongoose?

Import data from a distant file into a node Buffer within the web browser

Leveraging async/await to handle the insertion of SQL data

Dealing with Laravel and AJAX - Issue with Loading DIV

What is the best way to recycle Vue and Vuetify code?

Building a DIV Element in the Space Between a Header and Footer Using HTML and CSS

Tips for linking my TypeScript document to the server