Fontello w HTML

pytanie zadane 20 grudnia 2016 w HTML i CSS przez Oskar Niemiec Nowicjusz (160 p.)
zmienione kategorie 20 grudnia 2016 przez HaKIM

Cześć! Niedawno zacząłem swoją przygodę z HTML/CSS. Zbudowałem pierwszą stronę wykorzystując informacje z filmu HTML 3. Niestety, ikona Fontello w divie "fb" nie wyświetla się prawidłowo. Plik fontello.css znajduje się u mnie na dysku we właściwej lokalizacji. Drugie pytanie dotyczy klas i id - czy w takim małym projekcie powinienem używać tylko klas, tylko id, a może jednego i drugiego? Nie do końca rozumiem zasadność stosowania któregokolwiek z rozwiązań. Proszę o pomoc i z góry dziękuję.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="slowa, kluczowe, wypisane, po, przecinku" />
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/fontello.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Lato:300,900&amp;subset=latin-ext" rel="stylesheet">
	
</head>

<body>
	
	<div class="main">
		<div class="logo">amatorskihokej.pl</div>
		
		<div class="menu">
			<div class="button1">HOME</div>
			<div class="button2">WYNIKI</div>
			<div class="button3">KLUBY</div>
			<div class="button4">SPRZET</div>
			<div class="button5">KONTAKT</div>
		</div>

		<div class="big">
			<div class="pic"> <img src="pic.jpg" /></div>
			<div class="list">
				<div class="fb">
					<a href="http://facebook.com" target="_blank" class="sociallink"><i class="icon-facebook"></i></a>
				</div>
				<div class="yt">yt</div>
				<div class="hokej">hokej</div>
				<div class="orly">orly</div>
			</div>
		</div>
		
		<div class="footer">2016 &copy;</div>
	</div>
	
</body>
</html>

body
{
	text-align: center;
	font-family: 'Lato', sans-serif;
	background-color: #000000;
}

.main
{
	width: 1200px;
	height: 640px;
	margin-left: auto;
	margin-right: auto;
	color: #aaa5a5;
	font-weight: 300;
}

.logo
{
	background-color: #000000;
	color: #eeeeee;
	font-size: 100px;
	height: 120px;
	letter-spacing: 15px;
	font-weight: 700;
	color: #aaa5a5;
	font-weight: 700;
}

.menu
{
	height: 60px;
	background-color: #b20200;
}

.button1
{
	background-color: #b20200;
	color: #dddddd;
	font-size: 36px;
	height: 50px;
	width: 218px;
	border-right: 2px dotted #aaa5a5;
	float: left;
	color: #aaa5a5;
	margin: 5px;
}

.button2
{
	background-color: #b20200;
	color: #dddddd;
	font-size: 36px;
	height: 50px;
	width: 218px;
	border-right: 2px dotted #aaa5a5;
	float: left;
	color: #aaa5a5;
	margin: 5px;
}

.button3
{
	background-color: #b20200;
	color: #dddddd;
	font-size: 36px;
	height: 50px;
	width: 218px;
	border-right: 2px dotted #aaa5a5;
	float: left;
	color: #aaa5a5;
	margin: 5px;
}

.button4
{
	background-color: #b20200;
	color: #dddddd;
	font-size: 36px;
	height: 50px;
	width: 218px;
	border-right: 2px dotted #aaa5a5;
	float: left;
	color: #aaa5a5;
	margin: 5px;
}

.button5
{
	background-color: #b20200;
	color: #dddddd;
	font-size: 36px;
	height: 50px;
	width: 220px;
	float: left;
	color: #aaa5a5;
	margin: 5px;
}

.big
{
	height: 400px;
	width: 1200px;
}

.pic
{
	background-color: #333333;
	color: #cccccc;
	font-size: 40px;
	height: 400px;
	width: 1100px;
	float: left;
}

.list
{
	height: 400px;
	width: 100px;
	float: left;
}

.fb
{
	background-color: white;
	color: #bbbbbb;
	font-size: 20px;
	height: 100px;
	width: 100px;
}

.yt
{
	background-color: #000000;
	color: #bbbbbb;
	font-size: 20px;
	height: 100px;
	width: 100px;
}

.hokej
{
	background-color: #000000;
	color: #bbbbbb;
	font-size: 20px;
	height: 100px;
	width: 100px;
}

.orly
{
	background-color: #000000;
	color: #bbbbbb;
	font-size: 20px;
	height: 100px;
	width: 100px;
}

.footer
{
	background-color: #b20200;
	color: #aaaaaa;
	font-size: 40px;
	height: 50px;
	color: #aaa5a5;
}

komentarz 20 grudnia 2016 przez Vento Pasjonat (17,120 p.)
edycja 20 grudnia 2016 przez Vento

Zacznij używać tagów html5 :)
http://tutorials.comandeer.pl/html5-blog.html

2 odpowiedzi

odpowiedź 20 grudnia 2016 przez Jackobs Bywalec (2,430 p.)

odpowiedź 20 grudnia 2016 przez Filip31411 Dyskutant (8,820 p.)

powinienem używać tylko klas, tylko id, a może jednego i drugiego?

Różnica pomiędzy id, a class polega na tym, że id dla danego elementu musi być unikatowe, a klasa może się powtarzać. Przykład:

Trzy div'y ostylowane po id:

<div id="pierwszy"></div>
<div id="drugi"></div>
<div id="trzeci"></div>

#pierwszy { width: 100px; height: 100px; }
#drugi { width: 100px; height: 100px; }
#trzeci { width: 100px; height: 100px; }

Trzy div'y ostylowane po class:

<div class="trzyDivy"></div>
<div class="trzyDivy"></div>
<div class="trzyDivy"></div>

.trzyDivy { width: 100px; height: 100px; }

Nigdy nie robimy tak:

<div id="JakiesId"></div>
<div id="JakiesId"></div>
<div id="JakiesId"></div>

Można więc pomyśleć, że id nie ma sensu, bo oba kody robią to samo, a ten z użyciem class jest o wiele krótszy. Ponadto class'y można użyć do ostylowania pojedynczego elementu, więc idea unikalności atrybutu id ginie.

Jednak podział ten ma na celu rozdzielenie warstw aplikacji czy też po prostu strony tzn: atrybutu class używamy do stylowania elementu przez CSS'a, a id do walidowania, edytowania itp. elementu przez JavaScript.

Po prostu do stylowania używa się class :)