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

Jak odwołać się do class, ale do innej "zakładki strony"

VPS Starter Arubacloud
0 głosów
893 wizyt
pytanie zadane 5 stycznia 2019 w HTML i CSS przez Dogy Użytkownik (520 p.)
edycja 5 stycznia 2019 przez Dogy

Witam! 

Mam pytanie bo jestem dość początkującym programistą. 

Chciałbym się odwołać do class, a dokładnie do tego <div id="zegar"><./div>. 

Chcę w CSS zmienić jego czcionkę. Główną stroną jest "index.html", a "news.html" właśnie gdzie ten zegar się znajduje. Dokładnie to chce zmienić czcionkę, ale to wiem jak zrobić bardziej chodzi o odwołanie się do tego zegara by powiększyć np. jego czcionkę lub żeby był w środku, ale to wiem jak zrobić. Bardziej chodzi o odwołanie. 

(przepraszam za nieład i nie skład, ale mam problemy z ortografią gdyż mam tylko 14 lat)

Jeżeli jest coś nie jasno wyjaśnione proszę napisać!!!

 

Z góry dziękuje za wszystkie próby pomocy!

1
komentarz 5 stycznia 2019 przez ScriptyChris Mędrzec (190,190 p.)

Wstaw proszę kod w odpowiednim bloczku, a nie w formie grafiki.

komentarz 5 stycznia 2019 przez Dogy Użytkownik (520 p.)
przeniesione 5 stycznia 2019 przez ScriptyChris
<!DOCTYPE html>
<html lang="pl">
    <head>
        <!-- kodowanie znaków, możemy używać polskich znaków -->
        <meta charset="UTF-8">
        <!-- sposób wyświetlania na urządzeniach mobilnych -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- tytuł strony. m.in. w wynikach wyszukiwania-->
        <title>Carrot Studio</title>
        <!-- importujemy czcionkę, żeby jej użyć-->
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,900&subset=latin-ext" rel="stylesheet">
        <link rel="icon" href="favicon.ico">
        <!-- ikonka strony -->      
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8" />
        <script type="text/javascript" src="timer.js"></script>
        
    </head>
    
    <body onload="odliczanie();" class="news";>
        <div id="wrapper">
            <header>
                <img src="tlo1.jpg" alt="tlo1 - header"/>
            </header>            
            
            <nav>
                <a class="menu" href="index.html">Strona Główna</a><a class="menu active" href="news.html">Gry</a>
                <a class="menu" href="#">Posada</a>
                <a class="menu" href="#">Kontakt</a>
            </nav>
            
            <div id="zegar"></div>
            
            <section>
                <p>Cos tu jest</p>
            </section>
            <footer>
                 © Kacper, 2018
            </footer>
            
        </div>
    </body>
</html>
function odliczanie()
   {
	
	var dzisiaj = new Date ();
	
	var godzina = dzisiaj.getHours();
	if (godzina<10) godzina = "0"+godzina;
	
	var minuta = dzisiaj.getMinutes();
	if (minuta<10) minuta = "0"+minuta;
	
	document.getElementById("zegar").innerHTML =godzina+":"+minuta;
    
	setTimeout("odliczanie()",1000);	
   }
* {
    margin: 0; 
    padding: 0;
    font-family: Roboto, arial;
    box-sizing: border-box;
  }

body {background-color: coral}

#wrapper {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
}

header img {
    width: 100%; 
    display: block;
}

nav {
    overflow: hidden;
}

nav a {
    display: block;
    width: 25%;
    float: left;
    color: white;
    text-align: center;
    text-decoration: none;
    background-color: darkorange;
    padding: 15px 30px;
    font-size: 20px;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

a.menu:hover {
    background-color: crimson;
    cursor: pointer;
}

@media (max-width:800px){
    nav a {
        width: 50%;
        font-size: 22px;
    }
}
/* najlepiej dawać pod koniec kodu */


.active {
    background-color: crimson;
    cursor: pointer;
}

article {
    margin-top: 30px;
    margin-bottom: 20px;
    padding: 0 20px;
}

article h1 {
    font-size: 30px;
    text-align: center;
    margin: 0 10% 20px 10%;
    padding-bottom: 15px;
    border-bottom: 2px solid crimson;
}

img.left {
    float: left;
    padding: 0px 10px 10px 0;
    width: 25%;
    border-radius: 50% 30%;
}

article p {
    text-align: justify;
    line-height: 25px;
    font-size: 18px;
    padding: 15px 0px;
}

iframe {
    width: 100%;
}

footer {
    height: 40px;
    background-color: darkcyan;
    color: white;
    line-height: 40px;
    text-align: center;
    margin-top: 15px;
}

#zegar {
    font-size: 50px;
    color: aqua;
}

 

Tutaj proszę cały kod dla pewności. I to jest jak pisałem wyżej to nie jest strona główna tylko "podstrona" gdzie można przejść

3 odpowiedzi

0 głosów
odpowiedź 5 stycznia 2019 przez pablop76 VIP (123,060 p.)

Chciałbym się odwołać do class, a dokładnie do tego <div id="zegar"><./div>. 

Jak sam napisałeś twój element nie posiada klasy, którą można posłużyć się do jego ostylowania. Więc pozostaje mu ją nadać.

komentarz 5 stycznia 2019 przez Dogy Użytkownik (520 p.)
Nie rozumiem zbytnio mógł byś wysłać co mam gdzie dodać?
komentarz 5 stycznia 2019 przez pablop76 VIP (123,060 p.)
Potrafisz nadać style dla elementu na stronie?
0 głosów
odpowiedź 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)

Dodaj do obu stron  HTML ten sam link do styli CSS, gdzie masz opisany wygląd klasy. To na stronie głównej i podstronie będziesz miał tak samo wyglądającą klasę. Z tego co udało mi się dojrzeć to będzie:

<link rel="stylesheet" href="style.css">

 

komentarz 5 stycznia 2019 przez Dogy Użytkownik (520 p.)

Albo jestem głupi, albo nie wiem jak to zrobić. :/

#zegar {
    font-size: 50px;
    color: aqua;
}
<div id="zegar"></div>

 

komentarz 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)
.zegar {
    font-size: 50px;
    color: aqua;
}
<div class="zegar"></div>

 

0 głosów
odpowiedź 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)

Zamiast:

<div id="zegar"></div>

Daj to:

<div class="zegar"></div>

I w arkuszach styli odwołaj się do tej klasy za pomocą:

.zegar{

}

 

komentarz 5 stycznia 2019 przez Dogy Użytkownik (520 p.)

Tylko wtedy nie działa mi zegar.

function odliczanie()
   {
	
	var dzisiaj = new Date ();
	
	var godzina = dzisiaj.getHours();
	if (godzina<10) godzina = "0"+godzina;
	
	var minuta = dzisiaj.getMinutes();
	if (minuta<10) minuta = "0"+minuta;
	
	document.getElementsByClassName("zegar").innerHTML =godzina+":"+minuta;
    
	setTimeout("odliczanie()",1000);	
   }

 

komentarz 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)

".zegar"

 

komentarz 5 stycznia 2019 przez Dogy Użytkownik (520 p.)
function odliczanie()
   {
	
	var dzisiaj = new Date ();
	
	var godzina = dzisiaj.getHours();
	if (godzina<10) godzina = "0"+godzina;
	
	var minuta = dzisiaj.getMinutes();
	if (minuta<10) minuta = "0"+minuta;
	
	document.getElementsByClassName(".zegar").innerHTML =godzina+":"+minuta;
    
	setTimeout("odliczanie()",1000);	
   }

Nadal nie działa. :C

 

komentarz 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)
document.querySelector('.zegar').innerHTML = godzina + ":" + minuta;

 

komentarz 5 stycznia 2019 przez pablop76 VIP (123,060 p.)
id="zegar" używa javascript więc nie możesz się go pozbyć nie zmieniając js. Ale możesz dodać klasę zegar i dodawać style do niej. A jeżeli chodzi o to, że zegar jest na podstronie to nie ma znaczenia pod warunkiem podpięcia arkusz css do tej podstrony tak jak do index.html.
komentarz 5 stycznia 2019 przez Dogy Użytkownik (520 p.)
.zegar {
    font-size: 50px;
    color: crimson;
}
function odliczanie()
   {
	
	var dzisiaj = new Date ();
	
	var godzina = dzisiaj.getHours();
	if (godzina<10) godzina = "0"+godzina;
	
	var minuta = dzisiaj.getMinutes();
	if (minuta<10) minuta = "0"+minuta;
	
	document.querySelector(".zegar").innerHTML = godzina + ":" + minuta;
    
	setTimeout("odliczanie()",1000);	
   }
<div class="zegar"></div>

Nie wiem już dlaczego to nie działa zrobiłem wszystko co wy powiedzieliście.

 

komentarz 5 stycznia 2019 przez matir85 Bywalec (2,410 p.)
<script type="text/javascript" src="timer.js"></script>

To powinno być na końcu body przed tagiem zamykającym a nie w head

Podobne pytania

0 głosów
1 odpowiedź 1,281 wizyt
pytanie zadane 12 września 2016 w Java przez Patryk Rafał Bywalec (2,700 p.)
0 głosów
1 odpowiedź 196 wizyt
pytanie zadane 15 lutego 2019 w C i C++ przez Alan Kruszyński Obywatel (1,410 p.)
0 głosów
1 odpowiedź 883 wizyt
pytanie zadane 23 stycznia 2019 w C i C++ przez Alan Kruszyński Obywatel (1,410 p.)

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!

...