Autor | Zpráva | ||
---|---|---|---|
Bimbulka Profil |
#1 · Zasláno: 17. 4. 2021, 21:06:26
Nevíte, proč mi nejde u menu baru zobrazovat zelená barva na textu: Domů? Když smažu slideobrázky, nebo všechno pod tím, tak mě to konečně zezelená, nevíte, čím to je?
HTML: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body {font-family: Arial, Helvetica, sans-serif;} .navbar { width: 100%; background-color: #555; overflow: auto; } .navbar a { float: left; padding: 12px; color: white; text-decoration: none; font-size: 17px; } .navbar a:hover { background-color: #000; } Tady je ta zelená: .active { background-color: #4CAF50; } @media screen and (max-width: 500px) { .navbar a { float: none; display: block; } } </style> <body> <div class="navbar"> <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Domů</a> <a href="#"><i class="fa fa-fw fa-envelope"></i> Kontakt</a> <a href="#"><i class="fa fa-fw fa-table"></i> Odkazy</a> <a href="#"><i class="fa fa-fw fa-search"></i> Hledat</a> </div> </body> A tady začíná ten slide: <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box} .mySlides {display: none} img {vertical-align: middle;} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.8s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { .prev, .next,.text {font-size: 11px} } </style> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext"></div> <img src="cesta" alt="2" style="width:100%"> <div class="text">Krajina 1</div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="cesta" alt= "0" style="width:100%"> <div class="text">Krajina 2</div> </div> <div class="mySlides fade"> <div class="numbertext"></div> <img src="cesta" alt= "1" style="width:100%"> <div class="text">Krajina 3</div> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br> <div style="text-align:center"> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> </div> <script> var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; } </script> </body>... Předem děkuji za odpověď |
||
anonym_ Profil * |
#2 · Zasláno: 17. 4. 2021, 21:58:52
Bimbulka
Dodej odkaz na web, kde to je k vidění. 100kB kódu, který spolu možná souvisí, možná ne, je k ničemu. |
||
JaPaJP Profil |
Trochu jsem to upravil , vypada to že v tom je nepořadek, maš tam nějaky věci dvakrát : Živá ukázka
|
||
Bimbulka Profil |
Teprve dělám web
JaPaJP: nejde mi to stále :( Bimbulka: už mi to jde, děkuji |
||
Bimbulka Profil |
a ještě jedno, když chci text Vítejte dát na ten slide, tak musím dát text jako absolutní pozice, že prosím?
|
||
Bimbulka Profil |
#6 · Zasláno: 18. 4. 2021, 11:46:12
No jo, ale teď mi zase nejde prozměnu nejdou dát ty ikonky, jak je menu, kontakt... @JaPaJP
|
||
Keeehi Profil |
#7 · Zasláno: 18. 4. 2021, 12:00:15
Bimbulka:
„Teprve dělám web“ Proto tu taky máme nástroj Živá ukázka kam můžeš svůj dosavadní výtvor vložit. „když chci text Vítejte dát na ten slide, tak musím dát text jako absolutní pozice, že prosím?“ Jako že aby byl text nad obrázkem? Možností je více. Můžeš v nějakém grafickém editoru upravit ten obrázek a vložit text přímo do obrázku. Pak už jen zobrazovat takový obrázek. Nebo jak píšeš, využít absolutní pozice. Text a obrázek budou za sebou, textu se dá absolutní pozice a rodiči (elementu ve kterém jsou) se dá relativní pozice. No a nebo plochu textu vítejte roztáhneš dle potřeby a ten obrázek nebude přímo v HTML ale jako pozadí v CSS přes background-image: url(...);
|
||
Bimbulka Profil |
#8 · Zasláno: 18. 4. 2021, 15:20:27
Keeehi:
Děkuji, ale nechápu toto: "rodiči" (elemtu ve kterém jsou). Jak se zobrazuje ten element prosím? Jako style? |
||
Keeehi Profil |
#9 · Zasláno: 18. 4. 2021, 17:36:05
Rodič je ten element ve kterém daný element je. V případě tohoto kódu je pro <div> rodičem pro <span> a <img>. Rodič (tedy div) by měl mít
position: relative; a span position: absolute; .
<div> <span>Vítejte</span> <img src="..."> </div> |
||
Bimbulka Profil |
#10 · Zasláno: 18. 4. 2021, 21:03:52
Keehi
U toho img src má být cesta k obrázku, že? Předem děkuji |
||
lionel messi Profil |
#11 · Zasláno: 18. 4. 2021, 22:16:26
Bimbulka:
„U toho img src má být cesta k obrázku, že?“ Presne tak. Chápem, že iba začínaš, ale podobné veci je asi najlepšie si najprv skúsiť dohľadať (prvý výsledok). |
||
Časová prodleva: 3 roky
|
0