En este sitio, en el CSS pongo "position:fixed" al header, el header queda arriba fijado, eso funciona bien, con z-index se ve siempre encima, ok hasta ahi, pero cuando presiono los links de la botonera o menu que linkean a las secciones que están más abajo (son ABOUT y CONTENIDOS), me ubica las secciones de ABOUT o CONTENIDO en la parte superior del viewport (en top: 0, supongo) y el header queda encima de cada seccion que es linkeada y tapa la sección. No puedo lograr que queden por debajo del header al apretar los respectivos botones ABOUT y COBTENIDOS y se vean completas las secciones. Si alguien me puede orientar super agradecido. Hay que poner "Pantalla Completa" en ejecutar para que se vea la falla. Muchas gracias de antemano.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
display: flex;
width: 100%;
flex-direction: column;
background-color: #333344;
font-family: "Courier New", Courier, monospace;
border-radius: 10px;
}
main{
margin-top: 230px;
}
header,
section,
footer {
width: 960px;
margin-left: auto;
margin-right: auto;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 220px;
padding-top: 10px;
border-radius: 20px;
background-color: #000000;
margin-right: auto;
margin-left: auto;
margin-bottom: 0.5%;
z-index: 10;
border: 10px solid #1a5599;
}
#logo {
display: flex;
align-items: center;
width: 100%;
height: 120px;
border-radius: 10px;
justify-content: center;
}
h1 {
display: flex;
top: 0px;
font-size: 80px;
font-weight: bold;
color: #ffffff;
margin-left: 0%;
border-radius: 10px;
box-shadow: 4px 4px 1px #ffffff99;
text-shadow: 3px 3px 1px #268bff;
padding: 10px;
padding-left: 15px;
background-color: #000000bb;
}
#botones {
display: flex;
width: 500px;
height: 50px;
margin-top: 10px;
float: left;
align-items: center;
margin-left: 1%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul a {
display: block;
color: #ffffff;
text-decoration: none;
font-weight: 700;
font-size: 18px;
padding: 10px;
}
ul li {
display: flex;
position: relative;
float: left;
margin: 2px;
margin-bottom: 5px;
padding: 0;
background-color: #000000;
border-radius: 10px;
box-shadow: 2px 2px 0px #ffffff99;
justify-content: center;
}
ul li:hover {
opacity: 0.8;
}
#btn_redes {
display: flex;
float: right;
width: 200px;
height: 50px;
margin-top: 10px;
border-radius: 10px;
justify-content: end;
}
a .redFace {
width: 50px;
height: 50px;
background-color: #ffffff99;
border-radius: 10px;
margin-right: 10px;
}
a .redInst {
width: 50px;
height: 50px;
background-color: #ffffff99;
border-radius: 10px;
margin-right: 10px;
}
p {
display: block;
margin: 0;
}
#about1 {
display: flex;
background-color: #1a5599;
border-radius: 20px;
margin-bottom: 0.5%;
}
#about1::before{
content: '';
top: 100px;
}
.arti1_1 {
display: flex;
position: relative;
width: 98%;
height: 480px;
margin-left: 1%;
margin-right: 1%;
margin-top: 10px;
border-radius: 10px;
align-items: center;
}
.dviImgSec1{
margin: 1%;
width: 50%;
}
.imgSec1 {
border-radius: 10px;
box-shadow: 2px 2px 10px #ffffff99;
height: 100%;
width: 100%;
}
.texSec1 {
color: aliceblue;
margin: 1%;
text-align: center;
width: 50%;
}
.tituloSec1 {
box-shadow: 0px 0px 3px #ffffff99;
font-size: 28px;
background-color: #000000bb;
border-radius: 10px;
text-shadow: 1px 2px 1px #268bff;
padding: 1%;
margin: 0;
margin: 10px 5px;
box-shadow: 3px 3px 1px #ffffff99;
}
.parrafo1 {
box-shadow: 0px 0px 3px #ffffff99;
font-size: 18px;
background-color: #00000088;
border-radius: 10px;
padding: 3%;
box-shadow: 2px 2px 0px #ffffff99;
margin: 10px 5px;
}
#seccion2 {
display: flex;
height: 500px;
justify-content: space-between;
background-color: #113;
border-radius: 20px;
margin-bottom: 0.5%;
}
.arti2_1 {
display: flex;
flex-direction: column;
width: 50%;
height: 480px;
margin-top: 10px;
margin-left: 1%;
align-items: center;
border: 10px solid #1a5599;
border-radius: 20px;
}
#cuestionario {
display: none;
color: white;
border: 2px solid black;
border-radius: 10px;
width: 90%;
padding: 5px;
margin-bottom: 5px;
}
.cuestionario p {
color: #1a55bb;
font-weight: bold;
background-color: #000000;
border-radius: 5px;
padding: 5px 10px;
}
.btn1 {
cursor: pointer;
font-size: 0.9rem;
font-weight: bold;
margin: 20px;
padding: 10px;
color: aliceblue;
background-color: #000000;
border-radius: 10px;
box-shadow: 0px 0px 3px #ffffff99;
}
.arti2_2 {
width: 47%;
height: 480px;
margin-top: 10px;
margin-right: 1%;
float: right;
border: 10px solid #1a5599;
border-radius: 20px;
}
.arti_sec2 {
color: antiquewhite;
font-size: 1rem;
padding: 2px;
}
#textoOculto1 {
display: none;
}
#textoOculto1.abrir {
display: block;
}
#mostrarMasMenos1 {
display: block;
color: aliceblue;
width: auto;
font-weight: bold;
padding: 5px 5px;
}
#mostrarMasMenos1:hover {
width: auto;
font-weight: bold;
cursor: pointer;
color: #268bff;
}
#textoOculto2 {
display: none;
}
#textoOculto2.abrir {
display: block;
}
#mostrarMasMenos2 {
display: block;
color: aliceblue;
width: auto;
font-weight: bold;
padding: 5px 5px;
}
#mostrarMasMenos2:hover {
width: auto;
font-weight: bold;
cursor: pointer;
color: #268bff;
}
#seccion3 {
display: flex;
height: 500px;
background-color: #1a5599;
justify-content: space-between;
border-radius: 20px;
}
.arti3_1 {
width: 32%;
height: 480px;
background-color: violet;
margin-top: 10px;
margin-left: 1%;
border: 10px solid #113;
border-radius: 20px;
}
.arti3_2 {
width: 32%;
height: 480px;
background-color: purple;
margin-top: 10px;
border: 10px solid #113;
border-radius: 20px;
}
.arti3_3 {
width: 32%;
height: 480px;
background-color: palevioletred;
margin-top: 10px;
margin-right: 1%;
border: 10px solid #113;
border-radius: 20px;
}
footer {
display: flex;
flex-wrap: wrap;
height: 300px;
background-color: #113;
justify-content: space-between;
border-radius: 20px;
align-content: space-around;
margin-top: 0.5%;
}
#datos {
display: flex;
flex-direction: column;
width: 48.5%;
height: 260px;
margin-top: 10px;
background-color: #000000;
margin-left: 1%;
border-radius: 10px;
justify-content: flex-end;
}
h3{
margin: 0;
padding: 10px;
color: aliceblue;
text-align: center;
font-size: 1.5rem;
}
.h3-datos {
font-size: 1.3rem;
margin: 0;
padding: 0;
}
h4 {
margin: 0;
padding: 10px;
color: aliceblue;
text-align: center;
font-size: 16px;
}
.mapa {
position: relative;
width: 100%;
height: 100%;
border-radius: 10px;
padding: 5px;
}
#form {
display: flex;
width: 48.5%;
height: 260px;
margin-top: 10px;
float: right;
margin-right: 1%;
border-radius: 10px;
background-color: #000000;
justify-content: flex-end;
}
#formMain {
display: flex;
flex-direction: column;
width: 100%;
margin: 0px auto;
border-radius: 10px;
align-items: center;
margin: 10px;
}
.input-padron {
display: block;
margin-bottom: 10px;
padding: 5px;
width: 100%;
border-radius: 10px;
font-size: 1rem;
color: aliceblue;
}
input,
textarea {
width: 100%;
box-shadow: 0px 0px 3px #ffffff99;
border-width: 2px;
background: none;
border-style: solid;
margin: 0;
padding: 0;
}
.boton {
cursor: pointer;
font-size: 1.2rem;
font-weight: bold;
margin: 0;
width: 35%;
padding: 1%;
color: aliceblue;
background-color: #000000;
border-radius: 10px;
box-shadow: 0px 0px 3px #ffffff99;
}
.boton:hover {
opacity: 0.5;
}
.desarrollado {
margin: 0;
width: 100%;
padding: 5px;
text-align: center;
font-weight: bold;
color: #ffffff;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Evaluacion Unidad 9</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- css bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous"
/>
<!-- css -->
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="medias.css" />
<!-- javascript -->
</head>
<body>
<main>
<!-- HEADER -->
<header id="header" class="">
<div id="logo">
<h1>Matematricks</h1>
</div>
<nav id="botones">
<ul>
<li><a href="#logo">Inicio</a></li>
<li><a href="#about1">About</a></li>
<li><a href="#seccion2">Contenidos</a></li>
<li><a href="#form">Contacto</a></li>
</ul>
</nav>
<nav id="btn_redes">
<a href="https://es-la.facebook.com/" target="new"><img class="redFace" src="img/square-facebook.svg" alt=""/></a>
<a href="https://www.instagram.com/" target="new"><img class="redInst" src="img/square-instagram.svg" alt="" /></a>
</nav>
</header>
<!-- Section1 -->
<section id="about1">
<div class="arti1_1">
<div class="dviImgSec1">
<img class="imgSec1" src="img/geometry-g4a033ff6b_1280.jpg" alt="" />
</div>
<div class="texSec1">
<h2 class="tituloSec1">Profe Sebastian</h2>
<p class="parrafo1">
Este es mi sitio personal, donde comparto tutoriales con ejercicios resueltos.
</p>
<p class="parrafo1">
15 años enseñando matematica a jovenes y adultos de todas las edades y niveles.
</p>
<p class="parrafo1">Aqui encontraras guias de actividades para que practiques.</p>
<p class="parrafo1">Y esos tips que haran la diferencia!!!</p>
</div>
</div>
</section>
<!-- Section2 -->
<section id="seccion2">
<div class="arti2_1">
<h3>« PingPong »</h3>
<div id="cuestionario">
<div class="cuestionario"></div>
</div>
<button class="btn1" onclick="lanzaCuestionario()">Cuestionario</button>
</div>
<div class="arti2_2">
<h3 class="h3-arti2-2">Contenido</h3>
<article class="arti_sec2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quasi harum minima, officia
alias,
</p>
<p id="textoOculto1">
placeat dicta mollitia qui omnis ducimus fuga excepturi enim. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Voluptatum repudiandae quod tenetur iste, magni totam nisi iusto
quia laborum vel placeat nulla, dicta laudantium blanditiis quisquam aliquam excepturi facilis
praesentium!
</p>
<a id="mostrarMasMenos1">«« ver mas »»</a>
</article>
<article class="arti_sec2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, quasi harum minima, officia
alias,
</p>
<p id="textoOculto2">
placeat dicta mollitia qui omnis ducimus fuga excepturi enim. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Voluptatum repudiandae quod tenetur iste, magni totam nisi iusto
quia laborum vel placeat nulla, dicta laudantium blanditiis quisquam aliquam excepturi facilis
praesentium!
</p>
<a id="mostrarMasMenos2">«« ver mas »»</a>
</article>
</div>
</section>
<!-- Section3 -->
<section id="seccion3">
<div class="arti3_1">arti3_1</div>
<div class="arti3_2">arti3_2</div>
<div class="arti3_3">arti3_3</div>
</section>
<!-- footer -->
<footer>
<!-- mapa -->
<div id="datos">
<h3 class="h3-datos">Ubicacion » Mar del plata » Argentina</h3>
<h4>Wp: 2235468257 | fb: lalala | ig: lalala</h4>
</div>
<!-- formulario -->
<div id="form" class="divForm" action="">
<form id="formMain" action="#" name="contacto">
<input
type="text"
id="nombre"
class="input-padron"
placeholder="Nombre y Apellido"
type="text"
name="nombre"
/>
<input type="email" id="correo" name="correo" class="input-padron" placeholder="[email protected]" />
<input type="tel" id="telefono" name="telefono" class="input-padron" placeholder="Telefono" />
<textarea
cols=""
rows="4"
id="mensaje"
class="input-padron"
placeholder="Tu mensaje"
required
></textarea>
<button type="submit" class="boton">Enviar</button>
</form>
</div>
<p class="desarrollado">| Desarrollado por escrib |</p>
</footer>
</main>
<!-- javascript -->
<script src="unidad7.js"></script>
<script src="unidad8.js"></script>
<!-- js bootstrap -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"
></script>
</body>
</html>