0

Estoy practicando lo que voy aprendiendo en clases y estoy inventando esta pagina, y quiero tener un nav que redirija dentro del html a las diferentes secciones correspondientes, que eso ya lo hace bien, pero cuando lo uso, se redirije y no aparece como alineado de manera vertical, a lo que me refiero es que en vez de redirijirlo y que se muestre desde el principio, lo redirije y se muestra como ya un poco comenzada esa seccion, aca dejo fotos y el codigo para que se entienda bien porque no se ni como explicarlo bien del todo. Agradezco la ayuda! :)

HTML

<body>
    <header>
        <h1>Ciro</h1>
        <a href="https://us02web.zoom.us/postattendee?mn=-YKFmj40OEQTJWHDPPsCAGRkYtOkwI9eFWGu.Oc-fO8jc4swAiH6a" style="text-decoration: none;"><h5>Spanish</h5></a>
    </header>
    <nav>
        <div><a href="#locationInfo">Location</a></div>
        <div><a href="#apartmentPictures">Pictures</a></div>
        <div><a href="#equipment">House Equipment</a></div>
        <div><a href="#expectations">Expectations Host-Guest</a></div>
        <div><a href="#contact">Contact</a></div>
    </nav>
    <section id="locationInfo">
        <div class="neighborhood">
        <p>We are in Palermo!</p>
        <p>and why that is something so good? because Palermo is currently one of the most popular neighborhood choosen by young people, here you will find museums, parks, bars, clubs, fanstastic gastronomy and a lot of musica and why not, maybe some street show of tango. You will not regret of living in Palermo.</p>
        </div>
        <div class="mapPic">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52563.88535420398!2d-58.464446345495055!3d-34.57272161691775!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcb59c771eb933%3A0x6b3113b596d78c69!2sPalermo%2C%20CABA!5e0!3m2!1ses!2sar!4v1682101665170!5m2!1ses!2sar" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"><img src="img/mapa.jpg"></iframe>
        </div>
    </section>
    <section id="apartmentPictures">
        <ul class="carruselPic">
            <li><img src="img/house pic (1).jpeg"><p>Bathtub + Shower</p></li>
            <li><img src="img/house pic (2).jpeg"><p>Toilet + Videt</p></li>
            <li><img src="img/house pic (3).jpeg"><p>Patio with outsider furniture</p></li>
            <li><img src="img/house pic (4).jpeg"><p>Patio with private grill</p></li>
            <li><img src="img/house pic (5).jpeg"><p>Living room with open kitchen and a bar</p></li>
            <li><img src="img/house pic (6).jpeg"><p>Big cabinets for storage in the kitchen</p></li>
            <li><img src="img/house pic (7).jpeg"><p>Living - Kitchen</p></li>
            <li><img src="img/house pic (8).jpeg"><p>Living with the entrance</p></li>
            <li><img src="img/house pic (9).jpeg"><p>View of the kitchen from the living room</p></li>
            <li><img src="img/house pic (10).jpeg"><p>Big tv in livingroom</p></li>
            <li><img src="img/house pic (10).jpeg"><p>living room</p></li>
            <li><img src="img/house pic (12).jpeg"><p>Main bedroom, with view to the skyline of Palermo</p></li>
            <li><img src="img/house pic (13).jpeg"><p>View of the patio from the office that counts with a closet</p></li>
            <li><img src="img/house pic (14).jpeg"><p>Office</p></li>
            <li><img src="img/Planos dibujo de departamento .png"><p>Graphic of the distribution of the house with mesurements</p></li>
        </ul>
    </section>
    <section id="equipment">
        <div class="textEquipment">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae, quae illo consequuntur odio sequi perferendis? Tempora libero quam dignissimos ducimus iste, blanditiis quis quo assumenda, eveniet asperiores, ex aperiam id.</p>
        </div>
        <div class="equipmentPic">
            <img src="img/storage (1).webp">
        </div>
        <div class="textEquipment">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur vel nostrum laudantium doloribus ipsum beatae minus dolore nemo, minima distinctio temporibus, hic eligendi modi cum voluptatibus possimus laborum impedit sequi.</p>
        </div>
        <div class="equipmentPic">
            <img src="img/storage (2).webp">
        </div>
        <div class="textEquipment">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam in, vero, officiis quasi voluptates cupiditate laudantium, aliquid et ducimus aperiam illo enim voluptatum ab nesciunt pariatur eius temporibus ad placeat?</p>
        </div>

    </section>
    <section id="expectations">
        <div>
            <ul>
                <p>Expectations as a guest <i class="fa-solid fa-key" style="color: #e4c5ac;"></i></p>
                <li>no</li>
                <li>rompas</li>
                <li>nada</li>
                <li>por</li>
                <li>gracias</li>
                <li>favor</li>
                <li>favor</li>
                <li>favor</li>
                
            </ul>
            <ul>
                <p>Expectations as a host <i class="fa-solid fa-house" style="color: #e4c5ac;"></i></p>
                <li>no</li>
                <li>rompas</li>
                <li>nada</li>
                <li>por</li>
                <li>gracias</li>
                <li>favor</li>
                <li>favor</li>
                <li>favor</li>
            </ul>
        </div>
    </section>
    <footer id="contact">
        <p>If you like what you see, please feel free to contact for more info and check the ability dates</p>
        <div class="contactInfo">
            <div><i class="fa-brands fa-instagram fa-3x" style="color: #345d4f;"></i></div>
            <div><i class="fa-solid fa-at fa-3x" style="color: #345d4f;"></i></div>
            <div><i class="fa-brands fa-whatsapp fa-3x" style="color: #345d4f;"></i></div>
        </div>
        <p style="font-size: 13px;">© 2023. María Sol González. Todos los derechos reservados.</p>
    </footer>
    
</body>

CSS

header h1{
    text-align: center;
    font-size: 8rem;
}
header h5{
    display: flex;
    justify-content: end;
    padding-right: 1rem;
    width: 5rem;
    margin-left: 37rem;
}
header h5 :hover{
    color: #664527;
}
nav{
    background-color: rgb(247, 247, 247);
    height: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-top: 1rem;
    position: sticky;
    z-index: 1;
    top:0;
}
#locationInfo{
    background-color: #F3E3D3;
    height: 22rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.neighborhood :first-child{
    font-size: 40px;
    width: 20rem;
    margin-left: 18rem;
    margin-top: 5rem;
}
.neighborhood :last-child{
    width: 35rem;
    line-height: 25px;
    margin-left: 10rem;
    margin-top: 3rem;
}
.mapPic{
    width: 26rem;
    margin-right: 3rem;
    margin-top: 5vh;
}
.mapPic img{
    width: 100%;
    height: 100%;
}
#apartmentPictures{
    height: 30rem;
    display: flex;
    justify-content: center;
}
#apartmentPictures ul{
    background-color: #664527;
    height: 33rem;
    scroll-snap-type: x mandatory;
    list-style: none;
}
#apartmentPictures ::-webkit-scrollbar {
    display: none;
}
.carruselPic{
    display: flex;
    gap: 35px;
    overflow: auto;
}
.carruselPic img{
    background-color: rgb(255, 255, 255);
    width: 23rem;
    height: 26.9rem;
    margin-top: 2rem;
    margin-left: 1.3rem;
    object-fit: contain;
    scroll-snap-align: center;
    border-radius: 5%;
}
#apartmentPictures ul :last-child {
    margin-right: 1.3rem;
}
#apartmentPictures p{
    color: white;
    width: 23rem;
    margin-left: 1.3rem;
    text-align: center;
}
#equipment{
    background-color: #BCCCC2;
    margin-top: 3.02rem;
    height: 27rem;
    display: flex;
    flex-direction: row;
}
.equipmentPic{
    background-color: pink;
    width: 15rem;
    height: 20rem;
    border-radius: 90px 90px 0px 0px;
    border-style: solid;
    border-color: #8c1842;
    border-width: 4px;
    margin-top: 4rem;
    margin-left: 1rem;
}
.equipmentPic img{
    width: 100%;
    height: 100%;
    border-radius: 90px 90px 0px 0px;
    object-fit:fill;
}
.textEquipment p{
    background-color: rgb(247, 247, 247);
    width: 13.8rem;
    margin-top: 15rem;
    margin-left: 1.1rem;   
}
#expectations{
    background-color: #345D4F;
    width: 100%;
    height: 25rem;
    color: rgb(228, 197, 172);
}
#expectations div{
    width: 95%;
    height: 100%;
    margin-left: 2rem;
    display: flex;
    flex-direction: row;
    gap: 5rem;
}
#expectations ul{
    border-style:double;
    border-color:goldenrod;
    list-style: none;
    width: 95%;
    height: 22.8rem;
    margin-top: 1rem;
}
#expectations p{
    text-align: center;
    font-size: 30px;
    margin-top: 2rem;
}
#expectations li{
    width: 60%;
    margin-top: 1rem;
    margin-left: 7rem;
}
footer{
    background-color: #F3E3D3;
    height: 10rem;
}
footer p{
    color: #664527;
    text-align: center;
    padding-top: 1.5rem;
    font-size: 20px;
}
.contactInfo{
    height: 4rem;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

asi es como me gustaria que cuando le den click al a href, se muestre, de manera vertical arranca donde justamente arranca esa seccion

Pero asi es como me esta funcionando ahora el a href, me lo redirije bien, pero no me lo muestra donde justamente arranca la seccion sino que ya esta como por debajo

1
  • Puedes hacer el código ejecutable? Tal vez asi tu problema se entienda mejor
    – Euricky999
    Commented el 9 nov. 2023 a las 16:39

1 respuesta 1

0

El href esta llevando al inicio de la id de la seccion que quieres, pero no se toma encuenta que estas usando un nav, entonces parece que te deja un poco mas abajo de lo que deberia. Yo recomendaria usar una anchor en tu HTML agrega este elemento detras de cada seccion solo modifica la id para que tenga nombre correcto para cada una

<a class="anchor" id="anchorPictures"></a>

y en el css, usa este para afectar todos los elementos de clase anchor

a.anchor {
display: block;
position: relative;
top: -2rem;
visibility: hidden;}

Puedes modificar el atributo "top" en el css para definir que tanto arriba del anchor quieres que te lleve el link, en este ejemplo use -2rem ya que es el alto que tiene tu nav, tambien no olvides modificar el href de tus botones en la nav para que lleven a los anchors y no a las section ids

1
  • Muchisimas gracias! no sabia de esta posibilidad! fuiste de mucha ayuda, ahora ya se resolvio mi problema. Gracias! :) Commented el 24 abr. 2023 a las 0:05

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.