Pomoc z wyśrodkowaniem w html

pytanie zadane 5 lipca 2021 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)
edycja 6 lipca 2021 przez Dawidziu

Witam. Chciałbym, aby te ostatnie 2 elementy znajdowały się w tym górnym pasku. Jak to zrobić?

Kod HTML:

<!DOCTYPE HTML>

<html>

	<head>
		
		<meta
		charset="UTF-8"
		>
		
		<link
		rel="stylesheet"
		href="Style.css"
		type="text/css"
		>
		
		<link
		rel="preconnect"
		href="https://fonts.googleapis.com"
		>
		
		<link
		rel="preconnect"
		href="https://fonts.gstatic.com"
		crossorigin
		>

		<link
		href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
		rel="stylesheet"
		>

		
	</head>
	
	<body>
		
		<nav
		class="Top"
		>
		
			<section
			class="TopPierwsze"
			>
			
				<div
				class="Czas"
				>
					
					23:42
				
				</div>
				
				<div
				class="Czas"
				>
					
					05.07.2021
				
				</div>
			
			</section>
			
			<section
			class="TopGłówne"
			>
			
				<div
				class="Sekcja"
				>
					
					<img
					src="Symbole/Pulpit.png"
					>
				
				</div>
				
				<div
				class="Sekcja"
				>
					
					<img
					src="Symbole/Uruchomione.png"
					>
				
				</div>
				
				<div
				class="Sekcja"
				>
					
					<img
					src="Symbole/Wszystko.png"
					>
				
				</div>
				
				<div
				class="Clear"
				>
				</div>
				
			</section>
			
			<section
			class="TopSterowanie"
			>
			
				<div
				class="Sekcja"
				>
					
					<img
					src="Symbole/Sterowanie.png"
					>
				
				</div>
				
				<div
				class="Sekcja"
				>
					
					<img
					src="Symbole/Powiadomienia.png"
					>
				
				</div>
				
				<div
				class="Clear"
				>
				</div>
			
			</section>
			
			<div
			class="Clear"
			>
			</div>
		
		</nav>
		
	</body>

</html>

Kod CSS:

body
{
	margin: 0;
	background: #232323;
	font-family: 'Poppins', sans-serif;
	color: #fff;
}

.Top
{
	width: 100%;
	height: 80px;
	background-color: #1a1a1a;
}

.TopPierwsze
{
	margin-left: 20px;
	float: left;
	height: 80px;
	padding: 5px;
}

.TopGłówne
{
	height: 80px;
	width: 240px;
	margin: 0 auto;
}

.TopSterowanie
{
	float: right;
	height: 80px;
	width: 160px;
}

.Sekcja
{
	height: 60px;
	width: 60px;
	margin: 10px;
	float: left;
	background: #343434;
	border-radius: 10px;
}

.Sekcja > img
{
	height: 40px;
	width: 40px;
	margin: 10px;
}

.Czas
{
	text-align: Center;
	fotn-size: 10px;
	margin: 5px;
}

.Clear
{
	clear: both;
}

1 odpowiedź

odpowiedź 6 lipca 2021 przez VBService Ekspert (253,420 p.)
edycja 6 lipca 2021 przez VBService

Od dłuższego czasu doradzamy, tu na forum, żeby zacząć używać
flex lub grid-a zamiast float.

Why would you use flexbox instead of floats?

Propozycja z flex.

<!DOCTYPE HTML>
 
<html>
 
    <head>
         
        <meta
        charset="UTF-8"
        >
         
        <link
        rel="stylesheet"
        href="Style.css"
        type="text/css"
        >
         
        <link
        rel="preconnect"
        href="https://fonts.googleapis.com"
        >
         
        <link
        rel="preconnect"
        href="https://fonts.gstatic.com"
        crossorigin
        >
 
        <link
        href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
        rel="stylesheet"
        >
 
         
    </head>
     
    <body>

      <nav
      class="Top"
      >
        
          <section
          class="TopPierwsze"
          >
                <div
                class="Czas"
                >
                     
                    23:42
                 
                </div>
                 
                <div
                class="Czas"
                >
                     
                    05.07.2021
                 
                </div>
            
          </section>
 
          <section
          class="TopGłówne"
          >
  
                <div
                class="Sekcja"
                >
                     
                    <img
                    src="Symbole/Pulpit.png"
                    >
                 
                </div>
                 
                <div
                class="Sekcja"
                >
                     
                    <img
                    src="Symbole/Uruchomione.png"
                    >
                 
                </div>
                 
                <div
                class="Sekcja"
                >
                     
                    <img
                    src="Symbole/Wszystko.png"
                    >
                 
                </div>         
            
          </section>        

          <section
          class="TopSterowanie"
          >
 
                <div
                class="Sekcja"
                >
                     
                    <img
                    src="Symbole/Sterowanie.png"
                    >
                 
                </div>
                 
                <div
                class="Sekcja"
                >
                     
                    <img
                    src="Symbole/Powiadomienia.png"
                    >
                 
                </div>            
            
          </section>
        
      </nav>
               
    </body>
 
</html>

body
{
    margin: 0;
    background: #232323;
    font-family: 'Poppins', sans-serif;
    color: #fff;
}

.Top
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 80px;
    background-color: #1a1a1a;
}

.TopPierwsze
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
    margin-left: 20px;
    height: 80px;
    padding: 5px;
}

.TopGłówne
{
    height: 80px;
    max-width: 260px;
}

.TopSterowanie
{
    height: 80px;
    max-width: 180px;
}

.Czas
{
    text-align: center;
    fotn-size: 10px;
}
.Sekcja
{
    display: inline-block;
    height: 60px;
    width: 60px;
    margin: 10px;
    background: #343434;
    border-radius: 10px;
}
.Sekcja > img
{
    height: 40px;
    width: 40px;
    margin: 10px;
}

komentarz 6 lipca 2021 przez VBService Ekspert (253,420 p.)

Jeżeli już używasz polskich nazw w kodzie to staraj się nie używać polskich "ogonków"

. . .

class="TopGłówne"

. . .

na

class="TopGlowne"

komentarz 6 lipca 2021 przez Comandeer Guru (601,590 p.)

Jeżeli już używasz polskich nazw w kodzie to staraj się nie używać polskich "ogonków"

Dlaczego?

komentarz 6 lipca 2021 przez VBService Ekspert (253,420 p.)
edycja 6 lipca 2021 przez VBService

Po pierwsze, chcę doprecyzować, że napisałem "staraj się", więc to nie jest przymus, jak ktoś chce może używać.

Po drugie, dlaczego?
Bo np. ktoś będzie przeglądał kod, kto nie posiada czcionek w swoim edytorze z latin extended i zobaczy takie "krzaczki". (Kilka przykładów - google fonts)

Tekst do demonstracji: TopGłówn ćęńśżź aka TopGlowne censz

pominąłem fakt, mieszania języków TopGłówne

komentarz 6 lipca 2021 przez Comandeer Guru (601,590 p.)

Bo np. ktoś będzie przeglądał kod, kto nie posiada czcionek w swoim edytorze z latin extended i zobaczy takie "krzaczki". (Kilka przykładów - google fonts)

Od lat nie spotkałem edytora, który miałby domyślnego fonta niewspierającego znaków Unicode. Nie wyobrażam sobie de facto pracy z tego typu edytorem, choćby dlatego, że część zależności może mieć komentarze w języku innym niż angielski (co jest często spotykane choćby w kodzie pisanych przez chińskich czy niemieckich programistów). Nawet jeśli kod jest po angielsku, to mogą w nim istnieć np. pliki językowe w różnych językach – i wówczas wypadałoby, gdyby edytor tego typu pliki językowe renderował poprawnie.

Dlatego zaryzykowałbym stwierdzenie, że to problem czysto teoretyczny, praktycznie niespotykany obecnie.

komentarz 6 lipca 2021 przez VBService Ekspert (253,420 p.)

Dlatego napisałem

i jak sam doszedłeś do wniosku @Comandeer

więc proponuję "zluzować majty" i nie drążyć dalej tematu.

1	komentarz 7 lipca 2021 przez Dawidziu Bywalec (2,610 p.) Ogólnie to jest taki projekt tylko dla mnie, a tak zazwyczaj staram się używać angielskich nazw