Kurs HTML (#3) - Portfolio

pytanie zadane 24 kwietnia 2017 w Nasze projekty przez krojczy Nowicjusz (130 p.)

Witam, przepisałem z filmu kod html i css, ale przeglądarka nic nie widzi oprócz czystego tekstu. Proszę o pomoc i z góry dziękuje.

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1"/>
	<title>Marek Szczepanik - Portfolio</title>

	<meta name="description" content="..."/>
	<meta name="keywords" content="portfolio, programista, tworzenie, strona, www, php, javascript, html, css/>

<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato" rel="stylesheet">
<body>
	<div id="container">
		<div class="rectangle">
			<div id="logo">imie nazwisko</div>
			<div id="zegar">12:00:00</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 class="yt">yt</div>
			<div class="fb">fb</div>
			<div class="gplus">gplus</div>
			<div class="tw">tw</div>
			</div>
			<div style"clear: both;"></div>
		
		
		<div style"clear: both;"></div>
		
		<div class="rectangle">2017 &copy; - Portfolio. Programista webowy zaprasza do współpracy!</div>
		
		</div>
</body>

body
{
	background-color:  #303030;
	color: #ffffff;
}

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

.rectangle
{
	width:  960px;
	margin: 20px;
	text-align: center;
}

.square
	width:50%;
	float: left;
}

#logo
{
	float: left;
	font-family: 'Josefin Sanas', sans-serif;
	font-size: 70px;
	width: 600px;
	text-align: left;
}
	
#zegar
{
	float:left;
	font-family 'Josefin Sanas', sans-serif;
	font-size: 70px;
	text-align: left;
}

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

.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;
}

.yt
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
}

.fb
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #4668b3;
	float: left;
}

.gplus
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d95333;
	float: left;
}

.yt
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}

.tw
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
}

2 odpowiedzi

odpowiedź 24 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

jeśli przeglądarka nie widzi zupełnie nic z pliku CSS to powinno Cię nakierować na sprawdzenie tego, jak podpiąłeś style ;)
ja widzę błąd i myślę, że jak Ty przejrzysz znaczniki w <head> to też zobaczysz ;)

komentarz 24 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

Poprawiam, poprawiam, ale końca nie widzę. Wskażesz błąd?

komentarz 24 kwietnia 2017 przez niezalogowany

Nie zamknąłeś znacznika head.

komentarz 24 kwietnia 2017 przez krojczy Nowicjusz (130 p.)
edycja 25 kwietnia 2017 przez krojczy

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1"/>
	<title>Marek Szczepanik - Portfolio</title>

	<meta name="description" content="..."/>
	<meta name="keywords" content="portfolio, programista, tworzenie, strona, www, php, javascript, html, css"/>

<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato" rel="stylesheet">
</head>
<body>
	<div id="container">
		<div class="rectangle">
			<div id="logo">Marek Szczepanik</div>
			<div id="zegar">12:00:00</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 class="yt">yt</div>
			<div class="fb">fb</div>
			<div class="gplus">gplus</div>
			<div class="tw">tw</div>
			</div>
			<div style"clear: both;"></div>
		
		
		<div style"clear: both;"></div>
		
		<div class="rectangle">2017 &copy;Marek Szczepanik - Portfolio. Programista webowy zaprasza do współpracy! </div>
		
		</div>
</body>

Też nie śmiga. Co tym razem?

komentarz 24 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

teraz chyba masz już ok, więc powinno działać ;)
w <body> masz jeszcze błędy przy <div style="clear:both"> ale style z CSS i tak powinny być już wyświetlone

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

Dalej nic, na pewno to musi byc cos z wczytywaniem stylu. Tylko co i gdzie?

komentarz 25 kwietnia 2017 przez niezalogowany

Sprawdź, czy ścieżka do pliku CSS się zgadza.

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

UDAŁO SIĘ! WINA W BRAKU OKREŚLENIA TYPU CSS PODCZAS ZAPISYWANIA SKŁADNI TEKSTOWEJ DO PLIKU CSS.

DZIĘKI WIELKIE ZA POMOC!

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)
edycja 25 kwietnia 2017 przez krojczy

I nie wiem co jest nie tak z klasami kafelek 1,2,3,4,5 i id logo, pomocy!

komentarz 25 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

to nie są problemy, których nie dałbyś rady sam rozwiązać ;)
jeśli okazuje się, że te kafelki nie mają żadnego stylu, który zapisałeś w CSS to trzeba szukać problemu w ich oznaczeniu iiii dochodzisz wtedy do wniosku, że w HTML masz klasę title a w CSS tile...
poza tym brakuje tu czegoś:

.square
    width:50%;
    float: left;
}

i do tile5 chyba też powinieneś dodać float: left;

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

Jeszcze duzo wody uplynie w Radomce zanim ta strona bedzie podobna do strony autora serwisu.

komentarz 25 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

ja nie wiem, nie rozumiem....Ty robisz to specjalnie, czy jak? :D
poprawiłam kod tak, jak napisałam i u mnie wyglądało ok :P
wstaw na codepen kod z tego ostatniego obrazka, bo aż nie wierzę

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

Droga Noemi oto co pokazuje cp:

komentarz 25 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

raczej chodziło mi o podanie linka do tego kodu na codepenie ;p

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

http://codepen.io/krojczy/

komentarz 25 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

no i nadal nie poprawiłeś tego .square...
poza tym tu w pytaniu podałeś już kod HTML i tam było ok, a teraz na cp nagle masz błędy, skąd je wziąłeś?
mam na myśli div style="clear:both" <-- to Ci blokuje ustawienie divów

komentarz 25 kwietnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

@krojczy - nie wiem w czym piszesz kod (mam na myśli IDE/edytor), ale większość błędów które popełniasz (niedomknięte tagi, brak klamr) są do wychwycenia z poziomu IDE/edytora. Zainstaluj sobie Sublime, albo WebStorm (wersja trial na 30 dni jest darmowa) i korzystaj z konsoli przeglądarki (to podstawowe źródło informacji o błędach), bo w przeciwnym razie - zwłaszcza na początku nauki programowania - bardzo szybko zniechęcisz się, że z powodu przysłowiowego braku przecinka nie działa Ci coś nad czym siedzisz kilka godzin.

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

IDE u mnie to Notepad++, jednak tak jak mowisz robie kolejne podejscie z nadzieja, ze sie nie wypale. Co do .square to co powinienem tam poprawic? Czy zamykac <div style="clear:both"> znacznikiem </div>, bo roznicy nie widze zadnej.

komentarz 25 kwietnia 2017 przez imklau Nałogowiec (42,090 p.)

div ma mieć znacznik zamykający.
Wybacz, ale już dostałeś rozwiązanie, więcej Ci nie powiem ;)

komentarz 25 kwietnia 2017 przez krojczy Nowicjusz (130 p.)

prawie mi sie udalo :) thx

komentarz 25 kwietnia 2017 przez ScriptyChris Mędrzec (190,190 p.)

Czy zamykac <div style="clear:both"> znacznikiem </div>, bo roznicy nie widze zadnej.

Kolejny protip - zacznij korzystać z dokumentacji.

https://developer.mozilla.org/en/docs/Web/HTML/Element/div

Tag omission None, both the starting and ending tag are mandatory.

komentarz 14 grudnia 2017 przez krojczy Nowicjusz (130 p.)
edycja 14 grudnia 2017 przez krojczy

droga Noemi, szlo dobrze, ale w lato przygrzalo slonce z za okna i ogarnal mnie letarg, chodz udalo mi sie uzyskac kolory i prostokaty, ale poukladac ich w odpowiedniej kolejnosci ni cholery. jak zyc bez portfolio?

komentarz 14 grudnia 2017 przez imklau Nałogowiec (42,090 p.)

ale, że od kwietnia jeszcze tego nie skończyłeś?

komentarz 14 grudnia 2017 przez krojczy Nowicjusz (130 p.)

niezle odpowiedzialem, edytujac swojego posta, makabra.

komentarz 17 grudnia 2017 przez krojczy Nowicjusz (130 p.)

czy ktos moze ma przepisany i dzialajacy html, css z tego wideo?

komentarz 17 grudnia 2017 przez imklau Nałogowiec (42,090 p.)

kurde no przecież nie aż tak trudno jest przepisać dobrze kod z filmiku :P

odpowiedź 1 maja 2017 przez pan.dynia Użytkownik (680 p.)

Widzę twój błąd.

Przejdź przez sekcję head, a wszystko się wyjaśni.

P.S. Nie chodzi o podpięcie CSS-a

komentarz 13 grudnia 2017 przez krojczy Nowicjusz (130 p.)
edycja 14 grudnia 2017 przez krojczy

<head>

<meta charset="utf-8"/>

<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1"/>

<title>Marek Szczepanik - Portfolio</title>

<meta name="description" content="..."/>

<meta name="keywords" content="portfolio, programista, tworzenie, strona, www, php, javascript, html, css"/>

<link rel="stylesheet" href="style.css" type="text/css">

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans%7CLato" rel="stylesheet">
</head>

pozamykalem kilka znacznikow i nic z tego :(