• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML Wyśrodkowanie

VPS Starter Arubacloud
0 głosów
230 wizyt
pytanie zadane 26 października 2016 w HTML i CSS przez Pinecha Nowicjusz (200 p.)
edycja 26 października 2016 przez ScriptyChris

Witam, chce stworzyć identyczny projekt jak w odcinku 3 z nauki HTML. Już tam troszeczkę popisałem, stworzyłem sobie przykładowe kafelki, lecz mam problem z wyśrodkowaniem wszystkiego.

Prosił bym o wyszukanie tekstu i wytłumaczenie mi gdzie popełniłem błąd. Dziękuję!


<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>Pinecha - Portfolio</title>
	
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www! Zatrudnij programistę webowego: PHP, JavaScript, HTML, CSS, MySQL, WordPress, Joomla, Drupal." />
	<meta name="keywords" content="zamów, stronę, tworzenie, www, programista, portfolio, php, javascript, html, css, WordPress, Joomla, Drupal" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet" type="text/css">
</head>

<body>

	<div id="container"></div>
		
		<div class="rectangle">
			<div id="logo"> <left><h1>Bartosz "Pinecha"</h1></left></div>
			<div id="zegar"> <h1>12:00:00</h1></div>
			<div style="clear:both;"></div>
		</div>
		
		<div class="square">
			<div class="title1">1</div>
			<div class="title1">1</div>
			<div style="clear:both;"></div>
			
			<div class="title2">2</div>
			<div class="title3">3</div>
			<div style="clear:both;"></div>
			
			<div class="title4">4</div>	
		</div>
		
		<div class="square">
		<div class="title5">5</div>
		
		
		
		</div>
		
		
		
		<div style="clear:both;"></div>
		
		<div class="rectangle"></div>
		
	</div>


</body>



 CSS:

body
{
    background-color: #696969;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
 
}
 
#container
{
    width:1000px;
    margin-left: auto;
    margin-right: auto;
     
}
 
.retangle
{
    width: 960px;
    margin: 20px;
     
}
 
.square
{
    width: 50%;
    float: left;
}
 
#logo
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70 px;
    width: 600px;
}
 
#zegar
{
    float: left;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 70 px;
}
 
.title1
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #9ACD32;
    float: left;
}
.title2
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #1E90FF;
    float: left;
}
 
.title3
{
    margin: 10px;
    width: 230px;
    height: 142px;
    background-color: #FFD700;
    float: left;
}
.title4
{
    margin: 10px;
    width: 480px;
    height: 142px;
    background-color: #B22222;
}
.title5
{
    margin: 10px;
    width: 480px;
    height: 304px;
    background-color: #666666;
}

// Dodałem kod CSS, który autor pokazał komentarzu

1 odpowiedź

+3 głosów
odpowiedź 26 października 2016 przez xyuru Obywatel (1,000 p.)
wybrane 27 października 2016 przez Pinecha
 
Najlepsza

Cześć.
W 18. linijce kodu niepotrzebnie zamykasz container:
    <div id="container"></div>
Po usunięciu tekstu podświetlonego na czerwono moduły są wyśrodkowane jak trzeba. Pozdrawiam.

Podobne pytania

0 głosów
3 odpowiedzi 738 wizyt
pytanie zadane 11 listopada 2019 w HTML i CSS przez radzioszq Nowicjusz (120 p.)
0 głosów
1 odpowiedź 255 wizyt
pytanie zadane 16 maja 2020 w HTML i CSS przez Wiktor Koźlik Użytkownik (950 p.)
–1 głos
1 odpowiedź 256 wizyt
pytanie zadane 6 kwietnia 2023 w HTML i CSS przez magiiczny Nowicjusz (140 p.)

92,452 zapytań

141,262 odpowiedzi

319,074 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...