Problem z ustawieniem css, hover, active

Problem z ustawieniem css, hover, active
Łukasz S.kyWalker
Łukasz S.kyWalker
Łukasz S.kyWalker
Łukasz S.kyWalker
  • Rejestracja:prawie 7 lat
  • Ostatnio:ponad 6 lat
  • Postów:1
0

Witam serdecznie!! czy znajdzie się może osoba która pomogła by mi rozwiązać problem z wyświetlaniem menu głównego, mianowicie zalezy mi aby po naciśnieciu jednego z czterech przycisków głównego menu zostały zaokrąglone tylko:

-lewy górny i dolny narożnik przycisku: dla pierwszego przycisku z lewej,
-oraz prawy górny i dolny narożnik przycisku: dla ostatniego przycisku, czyli tego po prawej stronie,
-oraz aby wewnetrzne dwa przyciski nigdy nie zaokrąglały swoich narożników.

Wszystko po to aby całe menu składajace sie z 4 przyciskow (gdy spojrzysz na nie jako całość) to w różnych przypadkach, gdy jest wcisniety lub nie jest jakikolwiek przycisk, to menu to bedzie mialo zawsze zaokraglone 4 nazożniki. Mój kod powoduje że kazdy wciśnięty przycisk zaokrągla swoje 4 narożniki, co nie wygląda dobrze. Z góry dziękuję za pomoc!!

link do strony: http://54.37.232.249/index.html

Kopiuj
style2.css:
* {
    margin: 0;
    padding: 0;

    /* font-family: Quicksand, sans-serif; */
    box-sizing: border-box; /* DZIEKI TEMU WPISOWI NASZE MENU SIE NIE ROZJEDZIE GDY NADAMY ZA SZEROKIE BOKI PRZYCISKOW */
}

body {
    background: url("background.png");
    background-size: 100%;
    background-attachment: fixed;
    font-family: 'Quicksand', sans-serif;

}
div.container{
    width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

div.main-content{
    width: 75%;
    float: left;
}

div.sidebar{
    width: 25%;
    float: left;
}

div.content{
    overflow: auto; /* dzieki temu wpisowi footer jest na samym dole */
}

/* a.menu {
display: inline-block;
width: 25%;
/* padding: 15px 30px 15px 30px; 
margin-top: 10px;
color: antiquewhite;
text-decoration: none;
text-align: center;
} */

nav{
    overflow: hidden; /* WPISUJ TO GDY NAGLE POJAWIAJA SIE LUB ZNIKAJA LINIE PIKSELI */
}

.menu1{
    display: block;
    width: 25%;
    color: black;
    float: left;
    text-align: center;
    text-decoration: none;
    background-color: #b2a70f;
    padding: 15px 15px;
    font-size: 14px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-top-left-radius:  5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.active, .menu1:hover{
    background-color: #e4082e;
    cursor: pointer;
    color: white;
    border-top-left-radius:  5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.menu0{
    display: block;
    width: 25%;
    float: left;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: #b2a70f;
    padding: 15px 15px;
    font-size: 14px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-radius: 0px;
}

.active, .menu0:hover {
    background-color: #e4082e;
    cursor: pointer;
    color: white;
    border-radius: 0px;
}

.menu4{
    display: block;
    width: 25%;
    color: black;
    float: left;
    text-align: center;
    text-decoration: none;
    background-color: #b2a70f;
    padding: 15px 15px;
    font-size: 14px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-top-right-radius:  5px;
    border-bottom-right-radius: 5px;
}

.active, .menu4:hover {
    background-color: #e4082e;
    cursor: pointer;
    color: white;
    border-top-right-radius:  5px;
    border-bottom-right-radius: 5px;
}

.menu5{
    display: block;
    width: 100%;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: #b2a70f;
    padding: 15px 15px;
    font-size: 14px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-top-right-radius:  5px;
    border-top-left-radius: 5px;
}

.active, .menu5:hover {
    background-color: #e4082e;
    cursor: pointer;
    color: white;
    border-top-right-radius:  5px;
    border-top-left-radius: 5px;
}

.menu2{
    display: block;
    width: 100%;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: #b2a70f;
    padding: 15px 15px;
    font-size: 14px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.active, .menu2:hover {
    background-color: #e4082e;
    cursor: pointer;
    color: white;
}

.menu8{
    display: block;
    width: 100%;
    color: black;
    text-align: center;
    text-decoration: none;
    background-color: #b2a70f;
    padding: 15px 15px;
    font-size: 14px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-bottom-left-radius:  5px;
    border-bottom-right-radius: 5px;
}

.active, .menu8:hover {
    background-color: #e4082e;
    cursor: pointer;
    color: white;
    border-bottom-left-radius:  5px;
    border-bottom-right-radius: 5px;
}

article, aside, footer, header, section{
    display: block; /* wymienione selektory sa elementami blokowymi ktore wyswietlaja sie jeden pod drugim */
}

header{
    background: rgba(255, 255, 255, 0.8);
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;  
}

aside{
    background: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;  
}

a.source{
    text-decoration: none;
}

footer{
    background: rgba(255, 255, 255, 0.8);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;  
}

header{
    margin-top: 10px;
    margin-bottom: 10px;
}

header img{
    width: 100%;
    margin: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    border-radius: 5px 5px;
}

header h1{
    text-align: center;
    margin-bottom: 25px;
}

aside h2{
    text-align: center;
    color: darkslateblue;
    font-size: 16px;
    margin-bottom: 2px;
}

h2{
    font-size: 18px;
    width: 100%;
}

article{
    padding-top: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px; 
    background: rgba(255, 255, 255, 0.8);
    margin-right: 10px;
    margin-bottom: 10px;
    overflow: auto;
    text-align: justify;
    overflow: hidden; /* WPISUJ TO GDY NAGLE POJAWIAJA SIE LUB ZNIKAJA LINIE PIKSELI */
}

#article20{
    color: black;
    padding-top: 10px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px; 
    background: rgba(255, 255, 255, 1);
    /*background: rgba(178, 167, 15, 0.8);*/
}

p{   font-size: 16px;
}

p.source{
    font-size: 10px;
    text-align: right;
    text-align: bottom;
}

p.lista{
    font-size: 15px;
    color: #e4082e;
    font-weight: bold;
}

p.databiegu{
    font-size: 20px;
    color: #e4082e;
    font-weight: bold;
    float: left;
}
p.nazwabiegu{
    font-size: 20px;
    color:#938900;
    font-weight: bold;
}
p.imiona{
    font-size: 14px;
}

footer{
    text-align: center;
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;

    /*line-height: 40px;*/
}

iframe{
    width: 100%;
}

.figure1{
    width: 33.3333%;
    float: left;
    padding-right: 10px;
    border-radius: 5%;
    /*border-right: 2px dashed;
    border-bottom: 2px dashed; */
}
.figure2{
    width: 33.3333%;
    float: left;
    /*border-right: 2px dashed;
    border-bottom: 2px dashed; */
}

img.pic0{
    width: 100%;
    border-radius: 5px 5px;
}

img.pic1{
    width: 100%;
    border-radius: 5%;
    padding-right: 10px;
}
img.pic2{
    width: 100%;
    border-radius: 5%;
    padding-left: 5px;
    padding-right: 5px;
}
img.pic3{
    width: 100%;
    border-radius: 5%;
    padding-left: 10px;
}

figcaption{
    text-align: center;
    font-size: 13px;
    margin-bottom: 5px;
}

#article1 h2{
    color: darkslateblue;
}
#article2 h2{
    color: darkslateblue;
}
#article3 h2{
    color: darkslateblue;
}
#article4 h2{
    color: black;
}

@media (max-width:200px) {
    nav a {
        width: 50%;
        font-size: 60px;
    }
}

@media (max-width:1300px) {
    body {
        background: url("black_woven_seamless_tile.jpg");
        background-size: 100%;
    }
Kopiuj
index.html:
<!DOCTYPE html>

<html lang="pl">
    <head>

        <meta charset="utf-8"/>
        <meta name="description" content="Opis strony"/>
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <title>GAiT-owe CZEMPIONY</title>
        <link href="https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext" rel="stylesheet">
        <link rel="icon" href="favicon.ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="style2.css">
    </head>

    <body> 
        <div class="container">
            <header>
                <h1>GAiT-owe CZEMPIONY</h1>
                <a href="index.html"><img src="logo2.jpg" alt="Logo GAiT" /></a>
                <nav>
                    <a class="menu1 active" href="index.html">NASZE WYNIKI</a><a class="menu0" href="index2starts.html">PROPOZYCJE STARTÓW</a><a class="menu0" href="index3health.html">NASZE ZDROWIE</a><a class="menu4" href="index4photos.html">ZDJĘCIA Z ZAWODÓW</a>
                </nav>
            </header>
            <div class="content">
                <div class="main-content">
                    <section>

                        <article id="article20">
                            <h2>NASZE WYNIKI:</h2>
                        </article>

                        <article id="article2">
                            <p>JUŻ WKRÓTCE ZNAJDĄ SIĘ TUTAJ AUTOMATYCZNE TABELE Z WYNIKAMI</p>

                        </article>


                        <article id="article20">
                            <h2>PIERWSZY MATERIAŁ WIDEO KTÓRY ZMOTYWUJE CIĘ DO BIEGANIA:</h2>
                        </article>

                        <article>
                            <iframe width="1000" height="500" src="https://www.youtube.com/embed/gF0rrpMH-Jo?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        </article> 
                    </section>
                </div>
                <div class="sidebar">
                    <aside>

                        <nav2>
                            <a class="menu5" target="_blank" href="http://podzialy.gait.pl/index.php">SPRAWDŹ GRAFIK PRACY</a><a class="menu2" target="_blank" href="https://www.facebook.com/groups/1653021654815730/?ref=bookmarks">FACEBOOK GRUPY</a><a class="menu2" target="_blank" href="http://biegnijmy.pl/kalkulator">KALKULATOR BIEGOWY</a><a class="menu8" target="_blank" href="https://kalendarzbiegowy.pl/">KALENDARZ BIEGOWY</a>
                        </nav2>

                    </aside>
                </div>
            </div>
            <footer>Copyright © 2018 Candidus (lukaszsiatkowski@gmail.com). All rights reserved.</footer>
        </div>

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121907054-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'UA-121907054-1');
        </script>

    </body> 
</html>
Kopiuj
index2starts.html:
<!DOCTYPE html>

<html lang="pl">
    <head>

        <meta charset="utf-8"/>
        <meta name="description" content="Opis strony"/>
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <title>GAiT-owe CZEMPIONY</title>
        <link href="https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext" rel="stylesheet">
        <link rel="icon" href="favicon.ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="style2.css">
    </head>

    <body> 
        <div class="container">
            <header>
                <h1>GAiT-owe CZEMPIONY</h1>
                <a href="index.html"><img src="logo2.jpg" alt="Logo GAiT" /></a>
                <nav>
                    <a class="menu1" href="index.html">NASZE WYNIKI</a><a class="menu0 active" href="index2starts.html">PROPOZYCJE STARTÓW</a><a class="menu0" href="index3health.html">NASZE ZDROWIE</a><a class="menu4" href="index4photos.html">ZDJĘCIA Z ZAWODÓW</a>
                </nav>
            </header>
            <div class="content">
                <div class="main-content">
                    <section>

                        <article id="article20">
                            <h2>PROPOZYCJE STARTÓW:</h2>
                        </article>


                        <article id="article1">

                            <figure class="figure1">
                                <img class="pic0" src="bpw1.jpg">
                            </figure>
                            <p class="databiegu">2018.LIPIEC.28:&nbsp</p> <p class="nazwabiegu">28. Bieg Powstania Warszawskiego</p>
                            <p class="lista">LISTA STARTOWA:</p>
                            <p class="imiona">01. G. Łukasz<br>02. K. Robert S.<br>03. R. Patryk<br>04. S. Łukasz<br>05. Z. Piotr</p>
                        </article>

                        <article id="article1">
                            <figure class="figure1">
                                <img class="pic0" src="bieg_dominika_2006_8.jpg">
                            </figure>
                            <p class="databiegu">2018.SIERPIEŃ.04:&nbsp</p> <p class="nazwabiegu">25. Bieg św. Dominika</p>
                            <p class="lista">LISTA STARTOWA:</p>
                            <p class="imiona">01. G. Łukasz<br>02. K. Andrzej<br>03. K. Robert S.<br>04. P. Sławomir<br>05. R. Patryk<br>06. S. Łukasz<br>07. S. Krzysztof<br>08. Z. Piotr</p>
                        </article>

                        <article id="article20">
                            <h2>DRUGI MATERIAŁ WIDEO KTÓRY ZMOTYWUJE CIĘ DO BIEGANIA:</h2>
                        </article>

                        <article>
                            <iframe width="1000" height="500" src="https://www.youtube.com/embed/gF0rrpMH-Jo?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        </article> 
                    </section>
                </div>
                <div class="sidebar">
                    <aside>

                        <nav2>
                            <a class="menu5" target="_blank" href="http://podzialy.gait.pl/index.php">SPRAWDŹ GRAFIK PRACY</a><a class="menu2" target="_blank" href="https://www.facebook.com/groups/1653021654815730/?ref=bookmarks">FACEBOOK GRUPY</a><a class="menu2" target="_blank" href="http://biegnijmy.pl/kalkulator">KALKULATOR BIEGOWY</a><a class="menu8" target="_blank" href="https://kalendarzbiegowy.pl/">KALENDARZ BIEGOWY</a>
                        </nav2>

                    </aside>
                </div>
            </div>
            <footer>Copyright © 2018 Candidus (lukaszsiatkowski@gmail.com). All rights reserved.</footer>
        </div>

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121907054-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'UA-121907054-1');
        </script>

    </body> 
</html>
Kopiuj
index3health.html:
<!DOCTYPE html>

<html lang="pl">
    <head>

        <meta charset="utf-8"/>
        <meta name="description" content="Opis strony"/>
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <title>GAiT-owe CZEMPIONY</title>
        <link href="https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext" rel="stylesheet">
        <link rel="icon" href="favicon.ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="style2.css">
    </head>

    <body> 
        <div class="container">
            <header>
                <h1>GAiT-owe CZEMPIONY</h1>
                <a href="index.html"><img src="logo2.jpg" alt="Logo GAiT" /></a>
                <nav>
                    <a class="menu1" href="index.html">NASZE WYNIKI</a><a class="menu0" href="index2starts.html">PROPOZYCJE STARTÓW</a><a class="menu0 active" href="index3health.html">NASZE ZDROWIE</a><a class="menu4" href="index4photos.html">ZDJĘCIA Z ZAWODÓW</a>
                </nav>
            </header>
            <div class="content">
                <div class="main-content">
                    <section>

                        <article id="article20">
                            <h2>NASZE ZDROWIE:</h2>
                        </article>



                        <article id="article1">

                            <figure class="figure1">
                                <img class="pic0" src="speed01.jpg">

                            </figure>
                            <p>&nbsp Siedzący tryb życia jest bardzo niebezpieczny. Coraz więcej czasu spędzamy za biurkiem, za kierownicą czy przed telewizorem. Wiąże się to z podwyższonym ryzykiem chorób serca, cukrzycy, nowotworów, a nawet depresji. Naukowcy zgodnie twierdzą, że siedzenie sieje spustoszenie w naszych organizmach.</p><p>&nbsp Kiedy ćwiczymy, nie tylko spalamy kalorie i stajemy się szczuplejsi, ale przede wszystkim poprawiamy kondycję, pomagamy naszemu sercu, wzmacniamy wszystkie mięśnie, ścięgna oraz stawy, poprawiamy odporność organizmu i świetnie rozładowujemy stres. A zatem... do dzieła!!</p><p class="source"><a class="source" href="http://www.zdrowiefit.pl/siedzenie-jest-niezdrowe-jak-palenie-tytoniu/">SOURCE</a></p>
                        </article>

                        <article id="article1">

                            <figure class="figure1">
                                <img class="pic0" src="health-care-heart-word-cloud-fitness-sport-concept.jpg">

                            </figure>
                            <p>&nbsp Ruszaj się więcej. Osoby mało aktywne fizycznie są dwa razy bardziej narażone na choroby serca. Należy więc dużo chodzić (przynajmniej pół godziny dziennie w dość szybkim tempie), gimnastykować się (rano przez 15-20 minut), jeździć na rowerze, pływać. Ruszaj się jednak z rozwagą i unikaj przeciążeń.</p><p>&nbsp Pamiętaj o zasadzie "3 x 30 x 130". Oznacza ona, że każdy z nas powinien ćwiczyć co najmniej 3 razy w tygodniu i przynajmniej przez 30 minut każdego z treningów jego serce powinno bić z prędkością ok. 130 uderzeń na minutę.</p><p class="source"><a class="source" href="http://www.poradnikzdrowie.pl/zdrowie/uklad-krwionosny/alfabet-serca-jak-dbac-o-serce_33512.html">SOURCE</a></p>
                        </article>


                        <article id="article20">
                            <h2>TRZECI MATERIAŁ WIDEO KTÓRY ZMOTYWUJE CIĘ DO BIEGANIA:</h2>
                        </article>

                        <article>
                            <iframe width="1000" height="500" src="https://www.youtube.com/embed/gF0rrpMH-Jo?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        </article> 
                    </section>
                </div>
                <div class="sidebar">
                    <aside>

                        <nav2>
                            <a class="menu5" target="_blank" href="http://podzialy.gait.pl/index.php">SPRAWDŹ GRAFIK PRACY</a><a class="menu2" target="_blank" href="https://www.facebook.com/groups/1653021654815730/?ref=bookmarks">FACEBOOK GRUPY</a><a class="menu2" target="_blank" href="http://biegnijmy.pl/kalkulator">KALKULATOR BIEGOWY</a><a class="menu8" target="_blank" href="https://kalendarzbiegowy.pl/">KALENDARZ BIEGOWY</a>
                        </nav2>

                    </aside>
                </div>
            </div>
            <footer>Copyright © 2018 Candidus (lukaszsiatkowski@gmail.com). All rights reserved.</footer>
        </div>

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121907054-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'UA-121907054-1');
        </script>

    </body> 
</html>
Kopiuj
index4photos.html:
<!DOCTYPE html>

<html lang="pl">
    <head>

        <meta charset="utf-8"/>
        <meta name="description" content="Opis strony"/>
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
        <title>GAiT-owe CZEMPIONY</title>
        <link href="https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext" rel="stylesheet">
        <link rel="icon" href="favicon.ico">
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="style2.css">
    </head>

    <body> 
        <div class="container">
            <header>
                <h1>GAiT-owe CZEMPIONY</h1>
                <a href="index.html"><img src="logo2.jpg" alt="Logo GAiT" /></a>
                <nav>
                    <a class="menu1" href="index.html">NASZE WYNIKI</a><a class="menu0" href="index2starts.html">PROPOZYCJE STARTÓW</a><a class="menu0" href="index3health.html">NASZE ZDROWIE</a><a class="menu4 active" href="index4photos.html">ZDJĘCIA Z ZAWODÓW</a>
                </nav>
            </header>
            <div class="content">
                <div class="main-content">
                    <section>

                        <article id="article20">
                            <h2>ZDJĘCIA Z ZAWODÓW:</h2>
                        </article>



                        <article id="article3">

                            <figure class="figure2">
                                <img class="pic1" src="speed01.jpg">
                                <figcaption>Długie siedzenie za kierownicą jest niebezpieczne dla naszego organizmu.</figcaption>
                            </figure>

                            <figure class="figure2">
                                <img class="pic2" src="speed01.jpg">
                                <figcaption>Długie siedzenie za kierownicą jest niebezpieczne dla naszego organizmu.</figcaption>
                            </figure>

                            <figure class="figure2">
                                <img class="pic3" src="speed01.jpg">
                                <figcaption>Długie siedzenie za kierownicą jest niebezpieczne dla naszego organizmu.</figcaption>
                            </figure>

                            <figure class="figure2">
                                <img class="pic1" src="speed01.jpg">
                                <figcaption>Długie siedzenie za kierownicą jest niebezpieczne dla naszego organizmu.</figcaption>
                            </figure>

                            <figure class="figure2">
                                <img class="pic2" src="speed01.jpg">
                                <figcaption>Długie siedzenie za kierownicą jest niebezpieczne dla naszego organizmu.</figcaption>
                            </figure>

                            <figure class="figure2">
                                <img class="pic3" src="speed01.jpg">
                                <figcaption>Długie siedzenie za kierownicą jest niebezpieczne dla naszego organizmu.</figcaption>
                            </figure>

                        </article> 

                        <article id="article20">
                            <h2>CZWARTY MATERIAŁ WIDEO KTÓRY ZMOTYWUJE CIĘ DO BIEGANIA:</h2>
                        </article>

                        <article>
                            <iframe width="1000" height="500" src="https://www.youtube.com/embed/gF0rrpMH-Jo?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                        </article> 
                    </section>
                </div>
                <div class="sidebar">
                    <aside>

                        <nav2>
                            <a class="menu5" target="_blank" href="http://podzialy.gait.pl/index.php">SPRAWDŹ GRAFIK PRACY</a><a class="menu2" target="_blank" href="https://www.facebook.com/groups/1653021654815730/?ref=bookmarks">FACEBOOK GRUPY</a><a class="menu2" target="_blank" href="http://biegnijmy.pl/kalkulator">KALKULATOR BIEGOWY</a><a class="menu8" target="_blank" href="https://kalendarzbiegowy.pl/">KALENDARZ BIEGOWY</a>
                        </nav2>

                    </aside>
                </div>
            </div>
            <footer>Copyright © 2018 Candidus (lukaszsiatkowski@gmail.com). All rights reserved.</footer>
        </div>

        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121907054-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'UA-121907054-1');
        </script>

    </body> 
</html>
edytowany 4x, ostatnio: Łukasz S.kyWalker
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Patryk27
Patryk27
Patryk27
Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:ponad rok
  • Lokalizacja:Wrocław
  • Postów:13042
0

Naprawdę myślisz, że ktoś za darmo będzie analizował cały ten Twój kod i szukał w nim błędów?
Wrzuć minimalną wersję prezentującą problem, dorzuć kilka screenshotów i wtedy pogadamy - szanuj czas osób na forum.

JD
Dokladnie 12 slide’ów na telefonie przy obiedzie i switch of the phone
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Treść
Podgląd
Kliknij, aby dodać treść...
Kliknij, aby dodać załącznik lub wklej ze schowka.
Instrukcja obsługi Markdown
Pomoc 1.18.8

Typografia

Edytor obsługuje składnie Markdown, w której pojedynczy akcent *kursywa* oraz _kursywa_ to pochylenie. Z kolei podwójny akcent **pogrubienie** oraz __pogrubienie__ to pogrubienie. Dodanie znaczników ~~strike~~ to przekreślenie.

Możesz dodać formatowanie komendami , , oraz .

Ponieważ dekoracja podkreślenia jest przeznaczona na linki, markdown nie zawiera specjalnej składni dla podkreślenia. Dlatego by dodać podkreślenie, użyj <u>underline</u>.

Komendy formatujące reagują na skróty klawiszowe: Ctrl+B, Ctrl+I, Ctrl+U oraz Ctrl+S.

Linki

By dodać link w edytorze użyj komendy lub użyj składni [title](link). URL umieszczony w linku lub nawet URL umieszczony bezpośrednio w tekście będzie aktywny i klikalny.

Jeżeli chcesz, możesz samodzielnie dodać link: <a href="link">title</a>.

Wewnętrzne odnośniki

Możesz umieścić odnośnik do wewnętrznej podstrony, używając następującej składni: [[Delphi/Kompendium]] lub [[Delphi/Kompendium|kliknij, aby przejść do kompendium]]. Odnośniki mogą prowadzić do Forum 4programmers.net lub np. do Kompendium.

Wspomnienia użytkowników

By wspomnieć użytkownika forum, wpisz w formularzu znak @. Zobaczysz okienko samouzupełniające nazwy użytkowników. Samouzupełnienie dobierze odpowiedni format wspomnienia, zależnie od tego czy w nazwie użytkownika znajduje się spacja.

Znaczniki HTML

Dozwolone jest używanie niektórych znaczników HTML: <a>, <b>, <i>, <kbd>, <del>, <strong>, <dfn>, <pre>, <blockquote>, <hr/>, <sub>, <sup> oraz <img/>.

Skróty klawiszowe

Dodaj kombinację klawiszy komendą notacji klawiszy lub skrótem klawiszowym Alt+K.

Reprezentuj kombinacje klawiszowe używając taga <kbd>. Oddziel od siebie klawisze znakiem plus, np <kbd>Alt+Tab</kbd>.

Indeks górny oraz dolny

Przykład: wpisując H<sub>2</sub>O i m<sup>2</sup> otrzymasz: H2O i m2.

Składnia Tex

By precyzyjnie wyrazić działanie matematyczne, użyj składni Tex.

<tex>arcctg(x) = argtan(\frac{1}{x}) = arcsin(\frac{1}{\sqrt{1+x^2}})</tex>

Kod źródłowy

Krótkie fragmenty kodu

Wszelkie jednolinijkowe instrukcje języka programowania powinny być zawarte pomiędzy obróconymi apostrofami: `kod instrukcji` lub ``console.log(`string`);``.

Kod wielolinijkowy

Dodaj fragment kodu komendą . Fragmenty kodu zajmujące całą lub więcej linijek powinny być umieszczone w wielolinijkowym fragmencie kodu. Znaczniki ``` lub ~~~ umożliwiają kolorowanie różnych języków programowania. Możemy nadać nazwę języka programowania używając auto-uzupełnienia, kod został pokolorowany używając konkretnych ustawień kolorowania składni:

```javascript
document.write('Hello World');
```

Możesz zaznaczyć również już wklejony kod w edytorze, i użyć komendy  by zamienić go w kod. Użyj kombinacji Ctrl+`, by dodać fragment kodu bez oznaczników języka.

Tabelki

Dodaj przykładową tabelkę używając komendy . Przykładowa tabelka składa się z dwóch kolumn, nagłówka i jednego wiersza.

Wygeneruj tabelkę na podstawie szablonu. Oddziel komórki separatorem ; lub |, a następnie zaznacz szablonu.

nazwisko;dziedzina;odkrycie
Pitagoras;mathematics;Pythagorean Theorem
Albert Einstein;physics;General Relativity
Marie Curie, Pierre Curie;chemistry;Radium, Polonium

Użyj komendy by zamienić zaznaczony szablon na tabelkę Markdown.

Lista uporządkowana i nieuporządkowana

Możliwe jest tworzenie listy numerowanych oraz wypunktowanych. Wystarczy, że pierwszym znakiem linii będzie * lub - dla listy nieuporządkowanej oraz 1. dla listy uporządkowanej.

Użyj komendy by dodać listę uporządkowaną.

1. Lista numerowana
2. Lista numerowana

Użyj komendy by dodać listę nieuporządkowaną.

* Lista wypunktowana
* Lista wypunktowana
** Lista wypunktowana (drugi poziom)

Składnia Markdown

Edytor obsługuje składnię Markdown, która składa się ze znaków specjalnych. Dostępne komendy, jak formatowanie , dodanie tabelki lub fragmentu kodu są w pewnym sensie świadome otaczającej jej składni, i postarają się unikać uszkodzenia jej.

Dla przykładu, używając tylko dostępnych komend, nie możemy dodać formatowania pogrubienia do kodu wielolinijkowego, albo dodać listy do tabelki - mogłoby to doprowadzić do uszkodzenia składni.

W pewnych odosobnionych przypadkach brak nowej linii przed elementami markdown również mógłby uszkodzić składnie, dlatego edytor dodaje brakujące nowe linie. Dla przykładu, dodanie formatowania pochylenia zaraz po tabelce, mogłoby zostać błędne zinterpretowane, więc edytor doda oddzielającą nową linię pomiędzy tabelką, a pochyleniem.

Skróty klawiszowe

Skróty formatujące, kiedy w edytorze znajduje się pojedynczy kursor, wstawiają sformatowany tekst przykładowy. Jeśli w edytorze znajduje się zaznaczenie (słowo, linijka, paragraf), wtedy zaznaczenie zostaje sformatowane.

  • Ctrl+B - dodaj pogrubienie lub pogrub zaznaczenie
  • Ctrl+I - dodaj pochylenie lub pochyl zaznaczenie
  • Ctrl+U - dodaj podkreślenie lub podkreśl zaznaczenie
  • Ctrl+S - dodaj przekreślenie lub przekreśl zaznaczenie

Notacja Klawiszy

  • Alt+K - dodaj notację klawiszy

Fragment kodu bez oznacznika

  • Alt+C - dodaj pusty fragment kodu

Skróty operujące na kodzie i linijkach:

  • Alt+L - zaznaczenie całej linii
  • Alt+, Alt+ - przeniesienie linijki w której znajduje się kursor w górę/dół.
  • Tab/⌘+] - dodaj wcięcie (wcięcie w prawo)
  • Shit+Tab/⌘+[ - usunięcie wcięcia (wycięcie w lewo)

Dodawanie postów:

  • Ctrl+Enter - dodaj post
  • ⌘+Enter - dodaj post (MacOS)