• 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

Object Storage Arubacloud
0 głosów
247 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 403 wizyt
+5 głosów
4 odpowiedzi 3,610 wizyt
pytanie zadane 14 sierpnia 2016 w Offtop przez QizmoPL Stary wyjadacz (11,440 p.)
0 głosów
2 odpowiedzi 164 wizyt

92,565 zapytań

141,418 odpowiedzi

319,604 komentarzy

61,952 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...