• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Po najechaniu na przyciski nav rusza element pod spodem

VPS Starter Arubacloud
0 głosów
356 wizyt
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ź

+1 głos
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.)
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

Podobne pytania

0 głosów
1 odpowiedź 149 wizyt
pytanie zadane 28 sierpnia 2018 w HTML i CSS przez Meffy Użytkownik (730 p.)
0 głosów
2 odpowiedzi 210 wizyt
pytanie zadane 31 października 2015 w HTML i CSS przez niezalogowany

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...