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

Odcinek Pana Zelenta - problem z ułożeniem kafelków

VPS Starter Arubacloud
0 głosów
245 wizyt
pytanie zadane 17 lutego 2017 w HTML i CSS przez Mikołaj Użytkownik (780 p.)

Witam, jestem w trakcie kursu pana Mirosława (kurs HTML odc. 3) i przy wstawianiu 5 tile'a nie ustawia mi się on przy prawej stronie tylko po lewej, chociaż diva wstawiłem do drugiego diva "square". Nie wiem czy to problem w mojej rodzielczości monitora czy też błąd w kodzie. Pozdrawiam

Kod CSS:

body
{
	background-color: #303030;
	color: #ffffff;
	font-family: 'Raleway', sans-serif;
	font-size: 20px;
}

#container
{
	widht: 1000px;
	margin-left: auto;
	margin-right:auto;
	
	
}

.rectangle
{
		widht: 960px;
		margin: 20px;

}

#logo
{
	
	float: left;
	font-size: 70px;
	
	margin-left:100px;
	margin-right: 100px;
}
.square
{
	widht: 50%;
	float: left;
	
}











#zegar
{
	margin-right: 100px;
	float: right;
	font-size: 70px;
	margin-left: 100px;
}

.tile1
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #3095d3;
	float: left;
	margin-top: 50px;
	
	
}

.tile2
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #666666;
	float: left;
	
	
	
}

.tile3
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #93c748;
	float: left;
}

.tile4
{
	margin: 10px;
	width: 480px;
	height: 142px;
	background-color: #ee5a32;
}

.tile5
{
	margin: 10px;
	width: 480px;
	height: 304px;
	background-color: #666666;
	
	
}

 

Kod HTML:

<!DOCTYPE HTML>

<html lang="pl">

<head>
	<meta charset="utf-8"/>
	<title>Strona jana Kowalskiego</title>
	<meta name="description" content="Witaj na stronie programisty Jana Kowalskiego. Tutaj poznasz wszystkie tajniki programowanie i zdobędziesz całą potrzebną wiedzę!" />
	<meta name="keywords" content="programowanie, komputery, technologia, tech, HTML, CSS, JS, 5, 6, 3, programista" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">

</head>

<body>

	<div id="container">
	
		<div class="rectangle"></div>
			<div id="logo">Jan Kowalski</div>
			<div id="zegar">12:00:00</div>
			<div style="clear: both;"></div>
		
		
		<div class="square"></div>
			<div class="tile1"></div>
			<div class="tile1"></div>
			<div style="clear:both;"></div>
			
			<div class="tile2"></div>
			<div class="tile3"></div>
			<div style="clear:both;"></div>
			
			<div class="tile4"></div>
		<div class="square"></div>
			<div class="tile5"></div>
			
		
		
		<div class="rectangle"></div>
		
		</div>



</body>

</html>

 

3 odpowiedzi

+1 głos
odpowiedź 17 lutego 2017 przez hoktaur Pasjonat (22,250 p.)
wybrane 6 marca 2017 przez Mikołaj
 
Najlepsza

Więc tak 'width' nie 'widht'

#container
{
    width: 1000px;
    margin-left: auto;
    margin-right:auto;
      
}

i coś tu nie tak z marginesami ale nie pamiętam to musisz porównać z kursem

#logo
{
     
    float: left;
    font-size: 70px;
 
#zegar
{
    float: right;
    font-size: 70px;

}

 

0 głosów
odpowiedź 18 lutego 2017 przez michal_borek Nowicjusz (210 p.)
Brakuje <div style="clear:both"></div> po drugim <div class="square"></div>, przed <div class="rectangle"></div>

Pozdrawiam
0 głosów
odpowiedź 27 lutego 2017 przez Mikołaj Użytkownik (780 p.)
Dziękuję wszystkim za pomoc!
komentarz 27 lutego 2017 przez niezalogowany
Jak ktoś Ci pomógł to oznacz najlepszą odpowiedz :)

Podobne pytania

0 głosów
0 odpowiedzi 389 wizyt
+5 głosów
4 odpowiedzi 3,573 wizyt
pytanie zadane 14 sierpnia 2016 w Offtop przez QizmoPL Stary wyjadacz (11,440 p.)
0 głosów
2 odpowiedzi 157 wizyt

92,452 zapytań

141,262 odpowiedzi

319,080 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!

...