Dlaczego nie wyświetla się tak, jak trzeba przez grid?

pytanie zadane 27 września 2025 w HTML i CSS przez Petrone Początkujący (300 p.)
edycja 27 września 2025 przez Petrone

Dlaczego nie wyświetla się tak - jak trzeba przez grid?

<!DOCTYPE html5>
<html5>
<lang="pl-PL">
<head>
<meta charset="UTF-8">
<meta name="description" content="Określić swój problem i poczuć wszystkie emocje i przyjąć  wszystkie emocje do siebie.">
<meta name="keywords" content="uświadamiający, uświadamiające, uświadamiająca, analiza, oświecający, oświecająca, oświecające, filozofowanie, analizowanie.">
<meta name="view-port" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="estetykablogu3.css" type="text/css">
<body>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
</body>
<div id="side-asside">
<img src="C:\Users\micha\Pictures\Saved Pictures\IMG_20220806_132156.jpg">
<footer>
 <p>copy&copyright; uswiadamiajacaanaliza.com 2022</p>
</footer>
</html5>

#main
    font-family: 'Trebuchet MS', 'garamond', 'helvetica','sans-serif';
    font-size: 46px;
    /display: block;/
    /float: left;/
    /display: flex;/
    /width: 100%;/
    display: grid;
    grid-template-columns: 80%;
    text-align: justify;
    width: 299px;
    color: #3c6a9b;
    background-image: ('C:\Users\micha\Pictures\Saved Pictures\IMG_20220827_070956.jpg');
    background-position: absolute;
    background-repeat: repeat;
    border: 46px 23px 46px 46px;
    padding: 4px;
    margin: 46px;
}
#side-asside{
   float: left;
   width: 31px;
   background-image: ("C:\Users\micha\Pictures\Saved Pictures\IMG_20220806_132156.jpg");
}
&footer{
    font-size: 18px;
    display: inline;
    text-align: center;
}

Mogę wysłać zrzut ekranu, tylko na razie nie wiem jak. Tam wyszło bez bez marginesów itp. w layoucie i za małą czcionką i obraz pod spodem zamiast w tle i to inny.

4	komentarz 28 września 2025 przez adrian17 Mentor (354,880 p.) W jakim edytorze to pisałeś? Albo to wygenerował jakiś model? Bo trudno mi uwierzyć że to ma tyle błędów bez udziału jakiejś maszyny która by to poszatkowała; każdy edytor pomaluje połowę tego HTMLa na czerwono zanim wciśniesz "zapisz".

1	komentarz 28 września 2025 przez Distracted_bez_hasła Początkujący (370 p.) Ale kod.

1 odpowiedź

odpowiedź 27 września 2025 przez Comandeer Guru (607,980 p.)

Przydałoby się określenie, jak to ma się wyświetlać? Ogólnie w kodzie jest pełno błędów składniowych.

W HTML-u:

nie ma czegoś takiego jak <!DOCTYPE html5>, jest <!DOCTYPE html>,
nie ma czegoś takiego jak <html5>, jest <html> – i tak nie da się obecnie posłać do przeglądarki innego HTML-a,
[lang] to atrybut elementu html, nie osobny element,
nie ma takiego meta[name] jak view-port, jest viewport,
body powinno być zamknięte za całą treścią, czyli tuż przed </html>,
nie zamykasz divów,
nie ma czegoś takiego jak encja &copyright;, jest &copy;,
Windowsowe ścieżki w img[src] są nieprawidłowe; najlepiej użyć tutaj ścieżki względnej,
obrazek nie ma tekstu alternatywnego.

CSS:

nie masz klamerki otwierającej po #main,
/własność/ to niepoprawna składnia komentarzy; w CSS-ie istnieje tylko jedna składnia komentarzy: /* komentarz */,
tła powinny po raz kolejny używać ścieżek względnych,
border nie przyjmuje takiej wartości, raczej chodziło Ci o border-width; ale to i tak nie zadziała, bo nie ustawiasz stylu bordera,
background-position nie ma wartości absolute,
&footer to niepoprawny selektor, powinno być footer.

Po poprawkach składniowych kod powinien wyglądać mniej więcej tak:

<!DOCTYPE html>
<html lang="pl-PL">
	<head>
		<meta charset="UTF-8">
		<meta name="description" content="Określić swój problem i poczuć wszystkie emocje i przyjąć  wszystkie emocje do siebie.">
		<meta name="keywords" content="uświadamiający, uświadamiające, uświadamiająca, analiza, oświecający, oświecająca, oświecające, filozofowanie, analizowanie.">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="estetykablogu3.css" type="text/css">
	</head>
	<body>
		<div id="main">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
		</div>
		<div id="side-asside">
			<img src="./sciezka-do-obrazka.jpg" alt="Tekst alternatywny">
		</div>
		<footer>
			<p>copy&copy; uswiadamiajacaanaliza.com 2022</p>
		</footer>
	</body>
</html>

#main {
    font-family: 'Trebuchet MS', 'garamond', 'helvetica','sans-serif';
    font-size: 46px;
    display: grid;
    grid-template-columns: 80%;
    text-align: justify;
    width: 299px;
    color: #3c6a9b;
    background-image: ('./sciezka-do-obrazka.jpg');
    background-repeat: repeat;
    border-width: 46px 23px 46px 46px;
    padding: 4px;
    margin: 46px;
}
#side-asside{
   float: left;
   width: 31px;
   background-image: ('./sciezka-do-obrazka.jpg');
}
footer{
    font-size: 18px;
    display: inline;
    text-align: center;
}