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

question-closed Linki Menu obiekty z menu są nie na swoich miejscach

VPS Starter Arubacloud
0 głosów
286 wizyt
pytanie zadane 14 września 2019 w HTML i CSS przez CyprianKoruba Początkujący (290 p.)
zamknięte 14 września 2019 przez CyprianKoruba

Hej wszystkim jestem nowy i od pewnego czasu siedzę w html/css tworzę pewną stronę internetową. Mam z nią pewien problem. Mianowicie w menu nazwanym middle mam 5 divów każdy ma przypisaną taka samą funkcję hover sprawiała ona że z lewej strony leciał pasek który zmieniał kolor danego diva z ciemno szarego na biały oraz kolor tekstu z białego na czerwony jednak zmieniał się tylko gdy najechałem na tekst w divie a nie na samego diva . Postanowiłem więc zrobić jak Pan Mirosław Zelent w swoim 3 odcinku html i zrobić by cały div był linkiem. Gdy już to zmieniłem układ wszystkich divów rozsypał się. I teraz pytanie dlaczego i jak to naprawić? Pytanie może być głupie ale naprawdę próbowałem to zmienić i nie wiem jak. Z góry serdecznie dziękuje za pomoc.

PS. Nie mam pojęcia w czym jest problem więc wklejam cały kod.

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

<head>
    <meta charset="UTF-8">
    <title>afla project</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Arvo|Lato&display=swap" rel="stylesheet">
</head>

<body>


    <header>
        <div class="logo">
            <img src="images/logo.png" alt="Logo">
        </div>
        <center>
        <nav>
           
            <div class="middle">

                <a href="podstrony/index.html"><button class="btn btn1">Strona Główna</button></a>
                <a href="podstrony/aktualnosci.html"><button class="btn btn2">Aktualności</button></a>
                <a href="podstrony/kontakt.html"><button class="btn btn3">Kontakt</button></a>
                <a href="podstrony/onas.html"><button class="btn btn4">O nas</button></a>
                <a href="podstrony/projekty.html"><button class="btn btn5">Projekty</button></a>

            </div>
         
        </nav>
        
               </center>
    </header>

    <div class="background">
        <div class="wrapper">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quasi minus, voluptas sapiente unde aliquid ab possimus ad aliquam aperiam eos illo est nulla explicabo perspiciatis modi itaque, eaque quam?
        </div>
        <center>

            <img src="images/gra.jpg" alt="zdjęcie z gry fps">

        </center>

    </div>
    <center>
        <div class="background1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.




    </center>
    <center>
        <div class="background2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint tenetur aliquid assumenda optio. Laudantium ipsam corporis, cupiditate excepturi, eos exercitationem accusantium reiciendis, ipsum blanditiis doloremque, porro ut voluptas repellendus sapiente.


        </div>


    </center>
</body>

</html>
.middle {
    position: absolute;
    transform: translate(-50%, -50%) text-align: center;
    text-align: center;
    margin-top: 15px;
    color:white;
}
.btn:first-child
{
margin-left:125px;
}
.btn {
    background: none;
    border: 2px solid white;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    padding: 12px 20px;
    min-width: 200px;
    margin: 10px;
    cursor: pointer;
    transition: color 0.4s linear;
    position: relative;
    font-size: 19px;
}

.btn:hover {
    color: red;
}

.btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: -1;
    transition: transform 0.5s;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
 
}

.btn1::before {
    transform: scaleX(0);
}

.btn2::before {
    transform: scaleX(0);
}

.btn3::before {
    transform: scaleX(0);
}

.btn4::before {
    transform: scaleX(0);
}

.btn5::before {
    transform: scaleX(0);
}

.btn1:hover::before {
    transform: scaleX(1);
}

.btn2:hover::before {
    transform: scaleX(1);
}

.btn3:hover::before {
    transform: scaleX(1);
}

.btn4:hover::before {
    transform: scaleX(1);
}

.btn5:hover::before {
    transform: scaleX(1);
}


















body {
    background-color: #1C1717;
    margin: 0;
}

nav {
    background-color:#cc0000;
 
    margin: 0;
  
}


.logo {
    margin-top:100px;
    margin: auto;
    margin-left: 400px;
}

.menu {

    text-align: center;
    text-decoration: none;
}

.menu > li {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    text-decoration: none;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 18px;
    line-height: 200%;
    min-height: 40px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: 'Lato', sans-serif;
}

.wrapper {
    font-family: 'Lato', sans-serif;
    color: white;
    margin-left: 120px;
    margin-right: 120px;
    margin-top: 100px;
    
}

#zdjgra {
    width: auto;
    height: auto;
    margin-top: 40px;
    margin-bottom: 40px;
}

.background {
    background-color: #1C1717;
    height: 550px;
    color: white;
    font-family: 'Lato', sans-serif;
}

.background1 {
    background-color: #554B4B;
    height: 550px;
    color: white;
    font-family: 'Lato', sans-serif;
    padding: 70px;
    margin-top: 100px;
    margin-bottom: 0;
}

.background2 {
    background-color: #1C1717;
    height: 550px;
    color: white;
    font-family: 'Lato', sans-serif;
    padding: 70px;
    margin-top: 100px;
}

a:hover {
    cursor: pointer;
    color:#cc0000;
}

a:link {
   color:white
    background-color: transparent;
    text-decoration: none;
}
a:link:hover{
color:#fff;
}
a:visited {
color:#fff;
    background-color: transparent;
    text-decoration: none;
}
a:visited:hover
{
    color:#1C1717
}

 

komentarz zamknięcia: znalazłem odpowiedź na pytanie zadane na forum

1 odpowiedź

0 głosów
odpowiedź 14 września 2019 przez Artek Stary wyjadacz (11,800 p.)

1. Używanie center jest przestarzałe - porzuć to

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center

2.Linki w nawigacji tworzą listę zatem należałoby zastosować <ul>.

3.Nie styluj po id - poczytaj dlaczego.

4. Proszę o nie pokazywanie kodu, który jest nieistotny dla danego problemu. Łatwiej się połapać.

5. 

Mianowicie w menu nazwanym middle mam 5 divów

Ja tam widzę co najwyżej diva który jest klasy middle i nie widzę aby zawierał 5 divów.  Nie do końca rozumiem o co Ci chodzi. Jaki pasek z lewej strony?

komentarz 14 września 2019 przez CyprianKoruba Początkujący (290 p.)
Masz rację zagalopowałem się nie mam divów tylko buttony btn btn1, btn btn2, btn btn3, btn btn4, btn btn5.

próbowałem inspirując się odcinkiem z dark code mianowicie: https://www.youtube.com/watch?v=Nmaw6pBEsI8

stworzyć podobną funkcję hover jednakże umieścić w buttonach linki do podstron

jednak po najechaniu i zmianie koloru tła, kolor czcionki nie zmieniał się. Robił to tylko wtedy gdy najechało się na tekst z danego buttona ponieważ na dole kodu css jest napisane że dla a:link:hover kolor ma się zmeniać ,więc postanowiłem zmienić cały button w link i wtedy wszystko się rozeszło . Dodatkowo funkcja hover nie ma działać jak w filmiku jar z lewej strony raz z góry lecz zawsze z lewej strony nie wiem czy ma to jakieś znaczenie ale chyba warto dodać.

PS. dzięki za wszelkie uwagi . Czym powinienem zastąpić center by dalej dany obiekt był wyśrodkowany

Podobne pytania

0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 30 listopada 2019 w HTML i CSS przez Teslum_369 Gaduła (4,190 p.)
0 głosów
3 odpowiedzi 1,256 wizyt
pytanie zadane 5 lutego 2018 w HTML i CSS przez Rascal Początkujący (250 p.)
0 głosów
2 odpowiedzi 620 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...