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
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%;
}
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 ([email protected]). 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>
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: </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: </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 ([email protected]). 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>
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>  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>  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>  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>  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 ([email protected]). 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>
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 ([email protected]). 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>