zamykanie divów

pytanie zadane 28 czerwca w HTML i CSS przez Petrone Początkujący (330 p.)

Czy divy trzeba zamykać </div> i dlaczego stopka się wyświetla za duża?

 <!DOCTYPE html>
   <html lang="pl-PL">
   <head>
     <meta charset="UTF-8">
     <meta name="description" content="dysortografia, dysgrafia i dyskalkulia polegają na myleniu liter albo cyfr ze sobą.">
     <title>Czym jest dyskalkulia?</title>
     <meta name="keywords" content="dysleksja, dyskalkulia, dysortografia, dysgrafia, rodzaje dysleksji, dyskalkulii, dysgrafii,dyskalkulia rozwojowa;">
	 <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="tastronawygladatak-a.css" type="text/css">
	 <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
     
    </head>
     <body>
	   <header>
	   </header>
       <div id="main">
	     
	     <div id="flex-article-1">
		 
		 <p><dfn>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula</dfn></p>
		  <ul>
			 <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
             <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li>
             <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean</li> 
			 <li style= text-indent: 28px;>
		  </ul>
		 
			 
		   
		  
                  <hr>		   
         
             <p><dfn>Lorem ipsum</dfn>
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
	     </flex-article-1>
        
                  <hr>                                                   
        <div id="flex-article-2">
		 <p><dfn>Lorem ipsum</dfn>                                                                                                           
          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</p>
        </flex-article-2>
		  <hr>
		<div id="flex-article-3">
		          
            <p><dfn>Lorem ipsum</dfn> 
             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</p>
        </flex-article-3>
	  </main>
		<aside>
		 <img src= "IMG_20220827_071355.jpg"> 
		 
		</aside>  
	   
	    <footer>
		 <p>&copy; czym-dyskalkulia.pl 2021</p>
	    </footer>
     </body>
     


</html>

#main {
    background: #ffffff;
    margin: 80px auto;
    border-radius: 20px;

   
    border: 60px solid #ffffff;

    
    outline: 2px solid #cfd2e2;
    outline-offset: -60px;
}

}


#main::before,
#main::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #d4d7e5, #bfc3d4);
    border-radius: 20px 0 0 0;
    z-index: -1;
}


#main::before {
    top: -60px;
    left: -60px;
}


#main::after {
    bottom: -60px;
    right: -60px;
}
&footer{
	font-size: 18px;
	display: inline;
	text-align: center;
}

2 odpowiedzi

odpowiedź 28 czerwca przez Comandeer Guru (609,000 p.)

Tak, divy należy zamykać w ten sposób. Brak zamknięcia jest błędem składniowym. Tak samo konstrukcja typu </flex-article-3> – to nie jest zamknięcie diva o takiej klasie, tylko zamknięcie elementu o nazwie flex-article-3.

Co do stopki: nie do końca wiem, na czym polega problem? Niemniej kod CSS zawiera błąd składniowy (&footer zamiast footer). Poprawienie go sprawi, że style zostaną zaaplikowane do stopki.

komentarz 22 lipca przez VBService Ekspert (256,660 p.)

Do tego co już napisał @Comandeer

Dla lepszej czytelności kodu możesz użyć komentarzy html np. w taki sposób

<div id="flex-article-1">
   ...
   ...
</div><!-- /flex-article-1 -->

<div id="flex-article-1">
   ...
   ...
</div><!-- /#flex-article-1 -->

<div id="main">
   <div id="flex-article-1">
      ...
   </div><!-- /#flex-article-1 -->

   <div id="flex-article-2">
      ...
   </div><!-- /#flex-article-2 -->

   <div id="flex-article-3">
      ...
   </div><!-- /#flex-article-3 -->

</div><!-- /#main -->

odpowiedź 22 lipca przez VBService Ekspert (256,660 p.)

BTW, powinieneś przemyśleć zamianę w Twoim kodzie użycia generycznych <div> na semantyczne elementy:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

np.:

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8">
    <meta name="description" content="Informacje o dyskalkulii, dysgrafii i dysortografii.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Czym jest dyskalkulia?</title>

    <link rel="stylesheet" href="tastronawygladatak-a.css">
  </head>

  <body>
    <header>
      <h1>Czym jest dyskalkulia?</h1>

      <nav>
        <ul>
          <li><a href="#">Strona główna</a></li>
          <li><a href="#">Objawy</a></li>
          <li><a href="#">Pomoc</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section>
        <article>
          <h2>Definicja dyskalkulii</h2>
  
          <p>
            <dfn>Dyskalkulia</dfn> to specyficzne trudności w uczeniu się matematyki.
          </p>
  
          <ul>
            <li>problemy z liczeniem</li>
            <li>mylenie symboli matematycznych</li>
            <li>trudności z zapamiętywaniem działań</li>
          </ul>
        </article>
  
        <article>
          <h2>Objawy</h2>
  
          <p>
            Dyskalkulia może wpływać na codzienne funkcjonowanie.
          </p>
        </article>
  
        <article>      
          <h2>Wsparcie</h2>
          
          <p>
            Odpowiednia pomoc może poprawić komfort nauki.
          </p>      
        </article>
      </section>
  
      <aside>
      
        <img src="IMG_20220827_071355.jpg" 
             alt="Materiały edukacyjne dotyczące dyskalkulii">
      
      </aside>
    </main>

    <footer>
      <p>&copy; czym-dyskalkulia.pl 2021</p>
    </footer>
  </body>
</html>

komentarz 22 lipca przez Comandeer Guru (609,000 p.)

W Twoim przykładzie raczej wypadałoby zamienić article na section. Za specyfikacją, article to:

[…] a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

[[…] całościowa lub samowystarczalna część dokumentu, strony, aplikacji lub witryny, która jest możliwa do redystrybucji lub użycia w innym kontekście, np. syndykacji [RSS-ie].]

Przykładowo, artykuł "Wsparcie" nie ma sensu w tym kontekście – bo nie jest to samowystarczalna część, którą można opublikować w RSS-ie.