Po najechaniu na przyciski nav rusza element pod spodem

pytanie zadane 9 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,120 p.)
zamknięte 9 lipca 2020 przez gmcode

Po najechaniu na moje przyciski w sekcji nav powoduje to ze sekcja dolna header sie rusza, jak to naprawić ?

*
{
    margin: 0;
    padding: 0;
}
                                                    /* SEKCJA NAWIGACJA HEADER */
nav 
{
    max-width: 1440px;
    margin: 15px auto;
    text-align: right;

}
                                            
nav a 
{
    font-size: 22px;
    text-decoration: none;
    display: inline-block;
    color: black;
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    margin: 0 30px;

}
nav a:hover
{
    border-bottom: 1px solid black;
  
}

                                                    /* SEKCJA HEADER  */

header 
{
    height:540px;
    background-color:rgb(255,88,81);

}                    
header h1
{
    text-align: center;
    margin-top: 30px;
    font-size: 18px;
    font-weight: normal;
    
}         
header h2
{
    text-align: center;
    font-size: 40px;
    margin-top: 30px;
    font-weight: bold;
}     
header p
{
    padding-top: 30px;
    text-align: center;
    font-size: 70px;
    font-weight: bold;

}            
header img
{
    width: 500px;
    height: 400px;
    float: right;
    margin-top: -220px;
    
}
                                                     /* SEKCJA MAIN */
main 
{
    max-width: 1440px;
    background-color: #f2f1ed;;
}
main .tech
{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-top: 30px;
}
main p.description
{
    font-size: 20px;
    text-align: center;
    margin: 30px 30px 50px 30px;
    padding-bottom: 30px;
}
                                                        /* SEKCJA PROJEKTY */

main div.project
{
    display: inline-block;
    width: 33%;
}      
main h2
{
    font-size: 16px;
    text-align: center;
    padding-bottom: 30px;
}           
main div.img
{
    height: 200px;
    background-color: burlywood;
    margin: 20px 30px;
}                                   


                                                /* SEKCJA STOPKA FOOTER */

footer 
{
    background-color: #f2f1ed;
    color: black;
    text-align: center;
    font-size: 10px;
    height: 20px;
}


<body>
    <nav>
        <a href="aboutme.html" target="_blank">About Me</a>
        <a href="#1">Projects</a>
        <a href="aboutme.html" target="_blank">Contact</a>
    </nav>
    <header>
        <p>HELLO.</p>
        <h1>Projects</h1>
        <h2>My Projects </h2>
        <img src="headerpicture.png" alt="header picture">
    </header>
    <main>
        <h2 class="tech">My Technologies</h2>
        <p class="description">
           .
        </p>
        <section class="projects" id="1">
            <div class="project">
                <div class="img"></div>
                <h2>Personal Portfolio</h2>
            </div>
            <div class="project">
                <div class="img"></div>
                <h2>Hotel Website</h2>
            </div>
            <div class="project">
                <div class="img"></div>
                <h2>Restaurant Website</h2>
            </div>
        </section>
    </main>
    <footer>
        <p>Copyright &copy;</p>
    </footer>
</body>

komentarz zamknięcia: gotowe

komentarz 9 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż jeszcze kod HTML. Złącz też oba powyższe CSS-owe bloczki w jeden. ;)

1 odpowiedź

odpowiedź 9 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)

Trochę mało szczegółów, co masz na myśli "rusza się"? Przesuwa się o 1px w dół?

Jeśli tak to to najpewniej dlatego że nie masz box-sizing: border-box albo wrzuciłem za mało kodu i go nie widać.

Napisz czy to rozwiązuje problem czy chodzi o coś innego.

komentarz 9 lipca 2020 przez gmcode Gaduła (3,120 p.)

Dokładnie tak po najechaniu na górny przycisk w nav sekcja dolna rusza sie o 1px , wkleiłem cały css strony.

Gdzie powinienem dopisać wartość box-sizing: border box

komentarz 9 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)

w css wrzuć * { box-sizing: border-box; }

komentarz 9 lipca 2020 przez gmcode Gaduła (3,120 p.)

nic nie pomogło dalej ten sam problem

komentarz 9 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)

wrzuć cod na codepen to Ci wskażę co powoduje problem.

https://codepen.io/pen/

komentarz 9 lipca 2020 przez gmcode Gaduła (3,120 p.)

ok załatwione https://codepen.io/gmzych/pen/ExPLLNd

komentarz 9 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Daj elementowi a określoną wysokość, np. 45 lub 50px, bo w tym momencie jego wysokość jest tymczasowo zwiększana o 1px przez border dodany przy hoverze.

P.S. Nie trzeba tworzyć snippeta na CodePen samodzielnie. Jeśli post zawiera bloczki z kodem HTML/CSS/JavaScript, to snippety (CodePen i JSFiddle) tworzą się automatycznie i są dostępne pod przyciskami w prawym górnym rogu posta.

komentarz 9 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)

dodałem

nav a {
font-size: 22px;
text-decoration: none;
display: inline-block;
color: black;
font-family: 'Roboto', sans-serif;
padding: 10px;
margin: 0 30px;
border-bottom: 1px solid transparent;

}

chociaż ja bym zrobił inaczej. Zmieniłem twojego codepena, możesz sobie zobaczyć:

https://codepen.io/Jakub90/pen/NWxMMpp

komentarz 9 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)

@jsholic dzięki za info, problem jest taki że zakładający pytanie utworzył dwa bloczki css, a nie html i css.

1	komentarz 9 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.) Tak, i poinformowałem go o tym w pierwszym komentarzu. ;)

komentarz 9 lipca 2020 przez gmcode Gaduła (3,120 p.)

Teraz działa dzięki za pomoc, chociaż mi znikł inny element po wprowadzeniu border-box: sizing

komentarz 9 lipca 2020 przez ScriptyChris Mędrzec (190,190 p.)

Co konkretnie Ci znikło? Pokaż kod po zmianach.

komentarz 9 lipca 2020 przez gmcode Gaduła (3,120 p.)

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Website - Project</title>
  <meta name="description" content="Porfolio, strona zawiera zakres moich umiejętności">
  <link href="https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <meta name='keywords' content='webdeveloper, strony internetowe, portfolio, css, HTML'>
  <meta name='robots' content='index,follow'>
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

</head>

<body class="aboutme">
    <div class="wrapper">
        <header>
            <h1>About me</h1>
            <hr>
            <img src="headerpic.png" alt="header picture" class="headerpic">
        </header>
        <main>
            <p class="aboutmetext">
                Hi!. I'm learning how to make websites. Considering my soft skills I would like to emphasize my exceptional organizational and communication skills. I am a highly-motivated person who is willing to go above and beyond on any project and to learn valuable skills on my own time.
            </p>
            <h2 class="aboutmeinfo1">Get In touch</h2>
            <h1>Contact</h1>
            <p class="aboutmeinfo2">
                Tel: 543-343-252 <br>
                Email: kontakt@gmail.com
            </p>
        </main>
        <footer>
            <p>Copyright &copy;</p>
        </footer>
    </div>

</body>

Obrazek zniknął z tej podstrony który jest w header

komentarz 9 lipca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)

to nie jest spowodowane box-sizing: border-box; Powód musi być inny, nie mamy jak tego sprawdzić, grafika nie jest widoczna na codepenie:

komentarz 9 lipca 2020 przez gmcode Gaduła (3,120 p.)

Na tej stronie głównej wszystko już jest ok, ale po przejściu pod about me tam jest header i w nim zdjęcie które znikło z powodu box-sizing poniżej w linku

https://codepen.io/Jakub90/pen/NWxMMpp