0

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>

1 respuesta 1

2

Podes usar un pseudo-selector before. Si tu header es de 220px

<style>
 .ancla:before {       
  display: block;
  content: " ";
  margin-top: -220px;
  height: 220px;  
  visibility: hidden; 
} 
</style>

En el menu haces referencia a:

<li><a href="#ancla-1">Contenidos</a></li>

Luego antes de la sección

 <a class="ancla" id="ancla-1"></a>
 <section id="seccion2">

Sobre cada una de las capas/secciones sobre las que tenes contenido y que se identifican con las anclas, definis el pseudo-selector before que simula la altura de la barra sobre cada una de ellas. Esto permite que al usar las anclas, el contenido no quede oculto bajo la barra.

Espero te sirva.

2
  • Gracias!! No entiendo bien como funciona (y funciona), tenes algun link donde pueda leer? busque y no encontré nada util. Commented el 9 may. 2023 a las 1:20
  • Hola Sebastian, en CSS ::before crea un pseudoelemento que es el primer hijo del elemento seleccionado. Es usado normalmente para añadir contenido estético a un elemento, usando la propiedad content . Fuente: developer.mozilla.org/es/docs/Web/CSS/::before. Me alegro te haya servido, recordá verificar la respuesta marcándole al ✔️ para que tu pregunta esté como respondida.
    – Jorge B
    Commented el 9 may. 2023 a las 1:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.