HTML CSS - Samouk mam problem. Ulożenie 4- 8 <div> obok siebie w poziomie. Chce zrobić szachownicę. Błedy.

pytanie zadane 9 listopada 2021 w HTML i CSS przez Posejdon Początkujący (490 p.)
edycja 9 listopada 2021 przez Posejdon

Mam zamiar zrobić szachownice ale napotykam problemy już na starcie :

Nie chce by ktoś za mną zrobił całą szachownicę, tylko prośba o wskazówki , ewentualne błędy kilka godzin nad tym już dukam ;/

Głównie chodzi mi o obliczenia.

Ale też mi się nie zgadza bo jak by dwa ostatnie okienka by się wysypały to bym jeszcze miał nadzieję.

Jak mam błąd w pisowni to proszę o info.

Jeżeli czegoś nie wiem to proszę mi powiedzieć gdzie mam szukać odpowiedzi pod jaką nazwą.

NIe chcę gotowca nie o to mi chodzi, chcę się nauczyć.

Docelowo robię szachownicę ale najpierw muszę zrobić jedną linię.

Przykład 4 kolumn obok siebie - też mi się wysypał, nie wiem dlaczego skoro robiłem już jeden projekt i miałem 4 obok siebie.

<!DOCTYPE html>
<html>
<head>
<html lang="pl">
<meta http-equiv="X-UA-Compatible"content="IE=10">
<title> Ćwiczenie Szachownica </title>
<title> Cwiczenie HTML/CSS</title>


<style>


        
    
        #pojemnik 
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      

     
          
          #line1
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
       
        #line2
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
         
        }
        #line3
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        #line4
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
        .line
        {height:98px;
        float:left;
        width:100px;}
          

</style>



</head>

<body> 

<div id="pojemnik"</div>



  <div id="line1" class=line </div>
1  
   <div id="line2" class=line</div>

2  
   <div id="line3" class=line</div>
1 
   <div id="line4" class=line</div>

2  
</div>










</body>
</html>

Tutaj jeszcze mały upgrade

<!DOCTYPE html>
<html>
<head>
<html lang="pl">
<meta http-equiv="X-UA-Compatible"content="IE=10">
<title> Ćwiczenie Szachownica </title>
<title> Cwiczenie HTML/CSS</title>


<style>


        
    
        #pojemnik 
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik
      {
      width:100%;
      }

     
          
          #line1
          {
          width:25%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
       
        #line2
          {
          width:25%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
         
        }
        #line3
          {
          width:25%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        #line4
          {
          width:25%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
        .line
        {height:98px;
        float:left;
        width:100px;}
          

</style>



</head>

<body> 

<div id="pojemnik"



  <div id="line1" class="line""> </div>

   <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>




</div>





</body>
</html>

Trochę lepiej ale dalej się kszaczy ...

Mam to 4 kolmny obok siebie ...

<!DOCTYPE html>
<html>
<head>
<html lang="pl">
<meta http-equiv="X-UA-Compatible"content="IE=10">
<title> Ćwiczenie Szachownica </title>
<title> Cwiczenie HTML/CSS</title>


<style>


        
    
        #pojemnik 
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik
      {
      width:100%;
      }

     
          
          #line1
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
       
        #line2
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
         
        }
        #line3
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        #line4
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
        
          

</style>



</head>

<body> 

<div id="pojemnik"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>










</body>
</html>

Dobra to już mam 4 kolumny w poziomie...

Tylko po co wpisywałem "class=line" jak tego nie wykorzystałem ?

Chyba już to mam dwa poziomy po 4 kolumy, jest biała krecha ale estetyką zajmę się później - yeah !

<!DOCTYPE html>
<html>
<head>
<html lang="pl">
<meta http-equiv="X-UA-Compatible"content="IE=10">
<title> Ćwiczenie Szachownica </title>
<title> Cwiczenie HTML/CSS</title>


<style>


        
    
        #pojemnik 
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik
      {
      width:100%;
      }

             #pojemnik1
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik1
      {
      width:100%;
      }
          
          #line1
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
       
        #line2
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
         
        }
        #line3
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        #line4
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
        
          

</style>



</head>

<body> 

<div id="pojemnik"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>

<div id="pojemnik2"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>










</body>
</html>

Spróbuję zrobić 4 kolumny poziom

po 4 wiersze.

A z Tymi 8ma, to będzie "podobnie"

A tutaj już trochę inacej próbowałem zrobić 8 kolumn obok siebie i też nic.

<!DOCTYPE html>
<html>
<head>
<html lang="pl">
<meta http-equiv="X-UA-Compatible"content="IE=10">
<title> Ćwiczenie Szachownica </title>
<title> Cwiczenie HTML/CSS</title>


<style>


        
    
        #pojemnik 
        {                 
          width:800px;
          height:800px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
          margin: 0 auto; 
          }
          
     @media screen and {min-width: 1024px;)}
          
          .line1
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
       
        .line2
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
         
        }
        .line3
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        .line4
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;

        }
        .line5
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        .line6
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;

        }
        .line7
          {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        .line8  {
          width:98px;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
          }
          

       
    


</style>



</head>

<body> 

<div id="pojemnik"</div>

  <div class="line1" </div>
1  
   <div class="line2"</div>

2  
   <div class="line3" </div>
1 
   <div class="line4" </div>

2  
    <div class="line5" </div>
1  
   <div class="line6" </div>
2  
     <div class="line7"  </div>
1   
   <div class="line8"  </div>
1

</div>










</body>
</html>

Próbowałem też dawać ID="nazwa" + class="poziom"

Wycztałem że nie mozna sobie wstawić pustych Divów wiec dlatego mam tam cyferki i mniej więcej wiem jak się one rozkładają.

Gdyby udało mi się ułozyć 8 w jednej lini.

To próbowałbym robić jeszcze 7 pojemników.

Po prostu po dokładać.

1 odpowiedź

odpowiedź 9 listopada 2021 przez SzkolnyAdmin Szeryf (86,360 p.)

Szachownica to 8 wierszy z 8 kolumnami każdy. Licząc od dołu (linia 1) w wierszach nieparzystych (1, 3, 5, 7) komórki w kolumnach A, C, E, G (nieparzystych) są czarne, a komórki w kolumnach B, D, F, H są białe. W liniach parzystych (2, 4, 6, 8) na odwrót. Zadanie do rozwiązania na wiele sposobów, np. JavaScript, ale i w czystym CSS-ie się da.

Niżej masz "gotowca". Do rzeczy:

Blok o klasie "chessboard" to szachownica podzielona na 8 linii (bloków), które są ustawione jedn po drugim i mają wysokość 30 pikseli (zmień , jak chcesz).

Bloki i klasie "line" to linie szachownicy, ich zawartość (8 bloków z nadanymi identyfikatorami - przydadzą się do obsługi szachownicy w JavaScripcie) to 8 kolumn o szerokości 30 pikseli (pola szachownicy to kwadraty).

Przeanalizuj sobie style.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Szachownica</title>
    <style> 
		.chessboard {
			display: grid;
			grid-template-rows: repeat(8, 30px);
		}
		.line {
			display: grid;
			grid-template-columns: repeat(8, 30px);
		}
		.chessboard .line:nth-child(even) div:nth-child(odd) {
			background-color: black;
		}
		.chessboard .line:nth-child(even) div:nth-child(even) {
			background-color: lightgrey;
		}
		.chessboard .line:nth-child(odd) div:nth-child(even) {
			background-color: black;
		}
		.chessboard .line:nth-child(odd) div:nth-child(odd) {
			background-color: lightgrey;
		}
	</style>
</head>
<body>
    
<div class="chessboard">
	<div id="l1" class="line">
		<div id="a1"></div><div id="a2"></div><div id="a3"></div><div id="a4"></div><div id="a5"></div><div id="a6"></div><div id="a7"></div><div id="a8"></div>
	</div>
	<div id="l2" class="line">
		<div id="b1"></div><div id="b2"></div><div id="b3"></div><div id="b4"></div><div id="b5"></div><div id="b6"></div><div id="b7"></div><div id="b8"></div>
	</div>
	<div id="l3" class="line">
		<div id="c1"></div><div id="c2"></div><div id="c3"></div><div id="c4"></div><div id="c5"></div><div id="c6"></div><div id="c7"></div><div id="c8"></div>
	</div>
	<div id="l4" class="line">
		<div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div><div id="d5"></div><div id="d6"></div><div id="d7"></div><div id="d8"></div>
	</div>
	<div id="l5" class="line">
		<div id="e1"></div><div id="e2"></div><div id="e3"></div><div id="e4"></div><div id="e5"></div><div id="e6"></div><div id="e7"></div><div id="e8"></div>
	</div>
	<div id="l6" class="line">
		<div id="f1"></div><div id="f2"></div><div id="f3"></div><div id="f4"></div><div id="f5"></div><div id="f6"></div><div id="f7"></div><div id="f8"></div>
	</div>
	<div id="l7" class="line">
		<div id="g1"></div><div id="g2"></div><div id="g3"></div><div id="g4"></div><div id="g5"></div><div id="g6"></div><div id="g7"></div><div id="g8"></div>
	</div>
	<div id="l8" class="line">
		<div id="h1"></div><div id="h2"></div><div id="h3"></div><div id="h4"></div><div id="h5"></div><div id="h6"></div><div id="h7"></div><div id="h8"></div>
	</div>
</div>
</body>
</html>

komentarz 9 listopada 2021 przez Posejdon Początkujący (490 p.)
edycja 9 listopada 2021 przez Posejdon

Dzięki fajny przykład, ale ja będę cisnąć na okrętkę i tak.

Ja muszę dokończyć swoją myśl.

Bo zmieniać wartości w htmlu pixele jest łatwo, ale to nie pozwoli mi powiedzieć przed sobą samym :

" Wiem, jak to zrobić"

Nie poddam się, jak nie taki problem, to za chwilę będę chciał zrobić sobie migająca szachownicę i będę wałkować na szablonach.

Będę miał inny problem :)

Jestem przekonany że jeden Gość który mi pomaga to jeszcze by zrobić w CSS animacje hehehe, już mi raz pokazał. :)

Chce dwa języki dobrze znać, później wezmę się za coś innego .

Mam czas.

Ludzie studiują IT 5 lat, więc wiem że lekko nie będzie.

Mam progres - czyli już widać że idzie mi metoda szachownicy. Pewnie padding do usunięcia i będzie cacy.

<!DOCTYPE html>
<html>
<head>
<html lang="pl">
<meta http-equiv="X-UA-Compatible"content="IE=10">
<title> Ćwiczenie Szachownica </title>
<title> Cwiczenie HTML/CSS</title>


<style>


        
    
        #pojemnik 
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik
      {
      width:100%;
      }

         #pojemnik1
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
         #pojemnik1
      {
      width:100%;
      }
          
        #pojemnik2
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
         #pojemnik2
      {
      width:100%;
      }
         #pojemnik3
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik3
    
      {
      width:100%;
      }
                  
                   #pojemnik4
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik4
      {
      width:100%;
      }
     
          #line1
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
       
        #line2
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
         
        }
        #line3
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        #line4
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
                #line5
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
                #line6
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
                        #line7
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }                #line8
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        
          

</style>



</head>

<body> 

<div id="pojemnik"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>

<div id="pojemnik2"</div>



    <div id="line5" class="line""></div>

    <div id="line6" class="line""></div>

 
   <div id="line7" class="line""></div>

   <div id="line8" class="line""></div>


</div>
<div id="pojemnik3"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>
<div id="pojemnik4"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>









</body>
</html>

Hmmm, nie chce odbiegać od mojego cotentu i stylu ...

Spróbuję pozamieniać kolejność w następnych diwach i powinno być miodzio.

Ale jak by to uprościć. ... Dobre rady -wskazane :)

4 tabetlki na 4 tablelki mam to ! yeah jak zrobić by było to scalone? hmmm

<!DOCTYPE html>
<html>
<head>
<html lang="pl">
<meta http-equiv="X-UA-Compatible"content="IE=10">
<title> Ćwiczenie Szachownica </title>
<title> Cwiczenie HTML/CSS</title>


<style>


        
    
        #pojemnik 
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik
      {
      width:100%;
      }

         #pojemnik1
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
         #pojemnik1
      {
      width:100%;
      }
          
        #pojemnik2
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
         #pojemnik2
      {
      width:100%;
      }
         #pojemnik3
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik3
    
      {
      width:100%;
      }
                  
                   #pojemnik4
        {                 
          width:600px;
          height:100px;
          padding:1px;
          margin: 0 auto; 
      }
      #pojemnik4
      {
      width:100%;
      }
     
          #line1
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
       
        #line2
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
         
        }
        #line3
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        #line4
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
                #line5
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }
                #line6
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
                        #line7
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:black;
          text-align: center;
          float:left;
        }                #line8
          {
          width:24%;
          height:98px;
          padding:1px;
          text-align:center;
          background-color:red;
          text-align: center;
          float:left;
        }
        
          

</style>



</head>

<body> 

<div id="pojemnik"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>

<div id="pojemnik2"</div>



    <div id="line5" class="line""></div>

    <div id="line6" class="line""></div>

 
   <div id="line7" class="line""></div>

   <div id="line8" class="line""></div>


</div>
<div id="pojemnik3"</div>



    <div id="line1" class="line""></div>

    <div id="line2" class="line""></div>

 
   <div id="line3" class="line""></div>

   <div id="line4" class="line""></div>


</div>
<div id="pojemnik4"</div>



    <div id="line2" class="line""></div>

    <div id="line1" class="line""></div>

 
   <div id="line4" class="line""></div>

   <div id="line3" class="line""></div>


</div>









</body>
</html>

Konstruktywna krytyka, propozycje, przemyślenia mile wskazane :)