Autor Zpráva
Bimbulka
Profil
#1 · Zasláno: 17. 4. 2021, 21:06:26
Odpovědět Citovat
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
Odpovědět Citovat
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
#3 · Zasláno: 17. 4. 2021, 23:23:01 · Upravil/a: JaPaJP 18. 4. 2021, 07:01:44
Odpovědět Citovat
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
#4 · Zasláno: 18. 4. 2021, 07:17:31 · Upravil/a: Bimbulka o 29 minut později
Odpovědět Citovat
Teprve dělám web


JaPaJP:
nejde mi to stále :(


Bimbulka:
už mi to jde, děkuji
Bimbulka
Profil
#5 · Zasláno: 18. 4. 2021, 08:35:01 · Upravil/a: Bimbulka 18. 4. 2021, 10:39:39
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0