Przeglądarka źle interpretuje kod html, css

Spakuj w paczkę zip i przeciągnij na pole do pisania odpowiedzi.

Zakładając, że to prosta statyczna strona.

Zrzut raczej średnio pomoże. Opcjonalnie też po przeciągnięciu forum go doda.


I nie baw się w usuwanie tagów <html>, <head>, <body>, mimo że są niewymagane w HTML5.

indeks.txt (1,2 KB)

	  margin: left: auto;
	  margin: right: auto;

źle - powinno być z myślnikiem zamiast ": " (dwukropka i spacji):

	  margin-left: auto;
	  margin-right: auto;

	   tekst-align: center;

żle - nie powinno się mieszać polskiego z angielskim w nazwach własności CSS:

	   text-align: center;

#h2 {
  text-align: center;
}

W kodzie nie masz identyfikatora h2 to nie działa - id ≠ atrybut.

W kodzie html trzeba go dodać lub usunąć “#” z kodu CSS i potem ograniczyć działanie jakby miało ograniczyć się do jednego tagu <h2>.

Poprawiłem i też nic z tego. Ale konkretnie jeszcze o te sekcje #logo i #h2
mają być na środku.

O H2 dopisałem, błąd powoduje, że nie masz do niego w kodzie html dopisanego id="h2" by działał CSS.

A to moja propozycja z Twoim kodem:

<html lang="pl">
<head>
<meta charset="utf-8" />
<meta name="discription" content="opis stony ok 150 znaków rózne pierniki i pierniczki" />
<meta name="keywords" content="kilka z przecinkami, słów, kojarzących się ze stroną" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
<title>ZB.B</title>
<link rel="styleshit" href="style.css" type="tekst/css" />  
<style>
#container{
width: 1200px;
margin: 0 auto;
text-align: center;
}
#logo{
background-color: yellow; 
color: red;
}
h2, .center{
text-align: center;
}
</style>
</head>

<body>
<div id="container">	 
	<div id="logo">
	<h1>GRAFIKA</h1>
	</div>
</div>
<h2>Photoshop poradniki</h2>
<h3>Poradnik:</h3>
<p><a href="https://www.youtube.com/watch?v=F0kYHdmCLPo" target="_blank" title="youtube">Nakładanie tekstury</a></p>
<p><a href="https://www.youtube.com/watch?v=W75Xfv0WSH0" target="_blank" title="youtube">Interfejs Podstawy</a></p>
<p class="center"><img width="400" height="250" src="img/peugeot206.jpg" title="Ładny?" alt="Peugeot 206" /></p>
</body> 
</html>
1 polubienie

Moi drodzy dziękuję Wam na razie. ale nie mam czasu już dzisiaj.
Przetestuję to wszystko. A z tym tekst (text) :slight_smile: to ewidentny mój byk. Tak jak wspomniałem dopiero zaczynam . Na swoje usprawiedliwienie dodam również, że teraz w sierpniu wskoczy mi na kark 7 krzyżyk.
Penie powiecie po co ci to dziadku, a no dla własnej przyjemności i satysfakcji
Czy będę mógł liczyć na pomoc. Dziękuję ślicznie.

Ach ok zdążyłem przed wyjazdem. Działa. Muszę bardzo uważnie pisać. Jeszcze raz dziękuję.

W tym samym temacie ponieważ problem jest podobny.
Mianowicie tym razem odsyłacze zewnętrzne Firefox wyświetla w kolorze czerwonym z podkreśleniem, natomiast
Edge na niebieskoindex_kopia.txt (4,1 KB)
kod html w załączeniu;
w arkuszu css dodałem jak mają się zachowywać linki
tak żeby przeglądarki wyświetlały w kolorze czarnym bez podkreślenia. A po najechaniu myszką kolor czerwony i podkreślenie. Co robię nie tak? Proszę o pomoc. Z góry dziękuję. Arkusz css w załączniu.
style_ kopia.txt (1,6 KB)

#a
{
color: black;
}

#a:hover

W takim przypadku odnosisz się do identyfikatora o nazwie a, a nie tagu html.

Korzystałem między innymi z tego forum:
https://forum.webhelp.pl/css/podkreslenie-linku-po-najechaniu-myszka-t40179.html
i tego kursu:
http://www.kurshtml.edu.pl/html/kolor_odsylaczy,body.html

Masz ten sam problem co wcześniej. Do tego przepisałeś kod z błędem, nie wiem co Ci mogę więcej powiedzieć czy też pomóc.

1 polubienie
w pliku style.css linki (a) zdefiniuj tak:
------------------------------------------
a { color: black; text-decoration: none }
a:hover { color: red; text-decoration: underline; }
---------------------------------------------------
Uwaga: a bez #a
1 polubienie

O właśnie dzięki. Tak ale tu nasuwa mi się następujące pytanie:
Wiem, że przed selektorami dodaje się znaki (#), (.) lub nie.?

Czy są inne znaki, które należy wstawić lub nie?

Chyba dla tego popełniam błędy.

Przeczytaj: http://www.kurshtml.edu.pl/css/elementy.html to się dowiesz.

1 polubienie

Poczytaj w kursie o klasach i identyfikatorach - dział CSS.

http://www.kurshtml.edu.pl/css/selektor_identyfikatora,specjalne.html
http://www.kurshtml.edu.pl/css/klasy_selektorow,specjalne.html

Zanim to przetrawię to trochę potrwa, ale dziękuję.

Szybka, podstawowa ściągawka:
1.
HTML
<znacznik>zawartość</znacznik>
Gdzie “znacznik” (z angielskiego “tag”) to np. html, body, div, a, p… (lista podstawowych znaczników z opisem)

CSS
znacznik {atrybut: wartość;}
W takim przypadku każdy “znacznik” na stronie będzie posiadał określoną wartość atrybutu.
Przykład:
html
<p>Hello world</p>
css
p {background-color: red;}
Gdzie każdy akapit na stronie posiada tło w kolorze czerwonym.
2.
HTML
<znacznik id="identyfikator" class="klasa">zawartość</znacznik>
Gdzie “identyfikator” i “klasa” są nazwami atrybutów kolejno id i class. Dla znacznika można określać oba atrybuty lub jeden z nich. Pamiętać też należy, że atrybut identyfikatora (o konkretnej nazwie) może wystąpić tylko raz na stronie dla wybranego elementu (jest unikalny, niepowtarzalny), zaś atrybut klasy o danej nazwie może wystąpić wielokrotnie…
CSS
znacznik#identyfikator {atrybut: wartość;}
lub
#identyfikator {atrybut: wartość;}
lub
znacznik.klasa {atrybut: wartość;}
lub
.klasa {atrybut: wartość;}
W css nazwę identyfikatora poprzedzamy znakiem # (hash/krzyżyk), a klasę . (kropka).
Znaczniki, identyfikatory i klasy są w css-ie rodzajami selektorów (więcej o selektorach tutaj). I nie używamy polskich znaków w nazwach.
Przykład:
html
<div class="jeden">zawartość</div>
<div class="trzy">zawartość</div>
<div id="glowny" class="dwa">zawartość</div>
<div class="dwa">zawartość</div>
<div class="trzy">zawartość</div>
<div class="jeden">zawartość</div>
css
#glowny {width: 30px; height: 10px;}
.jeden {background-color: yellow;}
.dwa {background-color: #00ff00ff;}
.trzy {background-color: rgb(140, 140, 140);}

Zanim klepniesz kolejny post, że coś nie działa, to skorzystaj z tego:
https://validator.w3.org/
https://jigsaw.w3.org/css-validator/

Takie walidatory oszczędzają sporo czasu w szukaniu przyczyn błędnego wyświetlania, bo czasem wystarczy literówki nie zauważyć i człowiek pół dnia na Google siedzi bez skutku, podczas gdy rozwiązanie ma pod nosem. Po prostu własne błędy ciężko się znajduje - niezależnie czy to kod, czy zwykłe wypracowanie z polskiego. :wink:

Nie wiedziałem, że takie narzędzia jeszcze istnieją. Ktoś to rozwija? To jest w ogóle aktualne? Bo wydaje mi się, że to wszystko zostało zastąpione przez wszelkiej maści lintery.