El texto no encaja en la parte superior del cuadro

0

Estoy creando un sitio y el texto que dice qué hay de nuevo en el fragmento de código a continuación no encaja en la parte superior del cuadro que creé.

:root {
  --border-width: 100px;
  --border-height: 200px;
  --border-color: #000;
  --box-color: #A8CCC9;
  --background-color: #75B9BE;
}


.lftSector {
  border-style: dashed;
  width: var(--border-width, 100px);
  height: var(--border-height, 200px);
  padding: 50px;
  border: 6px solid var(--border-color, gray);
  background-color: var(--box-color);
}
body {
  background-color: var(--background-color);
}
ol {
  width: var(--border-width);
    float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
  <title>Gallery</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,[email protected],200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
  <h1> Welcome to the gallery</h1>
  <div class="lftSector">
    <h1 class="content">What's New?</h1>
    <ol>
      <a href="linkoftruth" ><li><div id="beta">[BETA]</div> Transformation</li></a>
      </ol>
    </div>
</body>
</html>

Como puede ver, esto crea un fondo con un cuadro y texto. Muéstreme cómo colocar <h1>en la parte superior del cuadro con el borde que creé.

0

Hubo algunos problemas con su código. En primer lugar, el encabezado estaba siendo aplastado, porque usó relleno para darle a su div su tamaño, en lugar de un ancho y un alto. A continuación, estaba llamando a las variables de: root, pero también tratando de pasar valores a esas variables. Para lograr su solución, solucioné los problemas mencionados y creé dos nuevas secciones div: una para el encabezado y otra para la lista. Además, estabas envolviendo tus elementos li en etiquetas. Debería ser de otra manera.

:root {
  --border-width: 100px;
  --border-height: 200px;
  --border-color: #000;
  --box-color: #A8CCC9;
  --background-color: #75B9BE;
}

body {
  background-color: var(--background-color);
}

.lftSector {
  width: 300px;
  height: 300px;
  border: 6px solid var(--border-color, gray);
  background-color: var(--box-color);
}

.lftSector > div {
  width: 100%;
  text-align: center;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
  width: 100%;
  height: 80%;
}
  <h1> Welcome to the gallery</h1>
  <div class="lftSector">
    <div>
      <h1 class="content">What's New?</h1>
    </div>
    <div id="content">
      <ol>
        <li><a href="linkoftruth"><span id="beta">[BETA]</span>Transformation</a></li>
      </ol>
    </div>
  </div>

Además, recomendaría generalmente configurar sus anchos en porcentajes, o basados ​​en vw / vh. Solo un consejo.

0

Esto debería ayudar. Ese relleno de 50 px se eliminó y luego se usaron el ancho y el ancho mínimo para controlar el ancho de la caja. También se aplicó margin css al archivo h1.

:root {
  --border-width: 100px;
  --border-height: 200px;
  --border-color: #000;
  --box-color: #A8CCC9;
  --background-color: #75B9BE;
}

.lftSector {
  border-style: dashed;
  width: 50%;                   /* changed */
  min-width: 200px;             /* added */
  height: var(--border-height, 200px);
  border: 6px solid var(--border-color, gray);
  background-color: var(--box-color);
}

body {
  background-color: var(--background-color);
}

ol {
  width: var(--border-width);
  float: left;
}

.content {              /* added */
  margin: 0 .5rem;      /* added */
}                       /* added */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
  <title>Gallery</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,[email protected],200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
  <link href="gstyle.css" rel="stylesheet">
</head>

<body>
  <h1> Welcome to the gallery</h1>
  <div class="lftSector">
    <h1 class="content">What's New?</h1>
    <ol>
      <a href="linkoftruth">
        <li>
          <div id="beta">[BETA]</div> Transformation</li>
      </a>
    </ol>
  </div>
</body>

</html>