Мои вкладки испорчены, и я не знаю, как расширить мою область контента для моих вкладок ⇐ Html

[Anonymous]

Хорошо, так что у меня здесь довольно много проблем, которые я понятия не имею, как я вызвал. Для начала, я не знаю, как я испортил свои вкладки, но они не должны выглядеть так. Фон, который должен быть для вкладок, левитирует и находится в неправильном месте. Цвет фона для выбранной вкладки также испорчен. Кроме того, когда вы нажимаете на каждую вкладку, область контента довольно мала, и она не должна быть такой. Я пытаюсь расширить ширину для области контента для всех вкладок, поэтому они одинакового размера, но я не знаю, как это сделать. Я также не так, как расширить высоту области контента на вкладке, чтобы переполнение находилось в области контента. Еще одна проблема, с которой я столкнулся, - это изменение цвета шрифта и шрифт для контрольного списка, который я сделал об эмоциях. Пожалуйста, помогите мне, что идет не так. Lang-CSS PrettyPrint-Override ">

Код: Выделить всё

html,
body {
height: 100%;
width: 100%;
background-color: #d3dce6;
font-family: monospace;
scroll-behavior: smooth;
font-family: "Courier Prime";
color: #4c585b;
}

body {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

label {
font-size: 24px;
font-weight: 700;
cursor: pointer;
color: #525d6f;
opacity: 0.4;
transition: opacity 0.4s ease-in-out;
display: block;
width: calc(100% - 48px);
text-align: right;
z-index: 100;
user-select: none;
}

input[type="radio"] {
display: none;
width: 0;
}

label:hover,
input[type="radio"]:checked + label {
opacity: 1;
}

.popup {
width: 80%;
height: 80%;
min-height: 480px;
max-height: 480px;
border-radius: 48px;
box-sizing: border-box;
border: 16px solid #ebf0f4;
background-color: #dfe6ed;
box-shadow: 16px 16px 48px #2e364330;
display: flex;

.content {
display: none;
}

&:has(#tab1:checked) {
.content[data-tab="tab1"] {
display: block;
}
}

&:has(#tab2:checked) {
.content[data-tab="tab2"] {
display: block;
}
}
&:has(#tab3:checked) {
.content[data-tab="tab3"] {
display: block;
}
}
&:has(#tab4:checked) {
.content[data-tab="tab4"] {
display: block;
}
}
&:has(#tab5:checked) {
.content[data-tab="tab5"] {
display: block;
}
}
&:has(#tab6:checked) {
.content[data-tab="tab6"] {
display: block;
}
}
}

.tabs {
width: 100%;
max-width: 240px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
position: relative;
}

.marker {
position: absolute;
width: 100%;
height: 200%;
display: flex;
flex-direction: column;
top: calc(-100%);
left: 0;
transition: transform 0.2s ease-in-out;
}

.marker #bottom,
.marker #top {
background-color: #ebf0f4;
box-shadow: 32px 32px 48px #2e364315;
}

.marker #top {
height: calc(50%);
margin-bottom: auto;
border-radius: 0 0 32px 0;
}

.marker #bottom {
height: calc(50% - 72px);
border-radius: 0 32px 0 0;
}

#tab1:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 0));
}

#tab2:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 1));
}

#tab3:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 2));
}

#tab4:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 3));
}

#tab5:checked ~ .marker {
transform: translateY(calc(calc(50% / 6) * 4));
}

#tab6:checked ~ .marker {
transform: translateY(calc(calc(51% / 6) * 5));
}

.content {
flex: 1;
padding: 26px;
}

h2 {
font-family: "Abril Fatface";
font-weight: bold;
font-size: 26px;
text-align: center;
color: #4c585b;
text-shadow: 1px 3px #eef7ff;
padding: 9px;
border-style: dashed;
border-color: #a5bfcc;
border-width: 5px;
background-color: #e5e1da;
}
aside {
background-color: #e5e1da;
width: 30%;
color: #4c585b;
display: inline-flex;
flex-flow: column;
padding: 12px;
border: 5px dashed #a5bfcc;
vertical-align: top;
font-family: "Courier Prime";
}
.quote {
color: #7e99a3;
font-size: 20px;
text-indent: 50px;
line-height: 30px;
}
.ab {
background-color: #e5e1da;
display: inline-flex;
flex-flow: column;
padding: 24px;
border: 5px dashed #a5bfcc;
width: 45%;
margin-top: 0px;
height: 300px;
}
input[type="submit"] {
background-color: #d0ddd0;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
blockquote {
font-size: 14px;
font:  "Helvetica";
}< /code>




Homepage

Daily Check-in

Calendar

Our Bot Linda

Puzzles

Collab w/ Amazon







The Daily Journal



 Quote of the Day 

 "Even the smallest positive change can ripple outwards, creating a beautiful effect on your day."



 Record Your Emotion 




 enjoyment

 Excitement

 Happy

Confusion

 Anxious

 Fear

 Anger

 Digust

 Bored

 Sadness

 Content




Content Second Tab
Content third Tab
Content fourth Tab
Content fifth Tab
amazon web services

Подробнее здесь: https://stackoverflow.com/questions/794 ... or-my-tabs