HTML - pytanie od początkującego

pytanie zadane 21 lutego 2017 w HTML i CSS przez Yorweth Obywatel (1,310 p.)
edycja 21 lutego 2017 przez Yorweth

Witam,

Jak w temacie jestem początkujący, od paru dni oglądam film poświęcone HTML i CSS, w końcu postanowiłem napisać coś swojego lecz utknąłem przy samym początku, dobrym rozmieszczeniu strony w CSS.

1. Mam ikonę domową w lewym górnym rogu która jest również hiperłączem, czemu kolor mogłem zmienić dopiero w fontello, a nie poprzez :link? podobnie jest z .icon-home:hover, nie mogę zmienić koloru ikonki (color:), jedynie to tło.

2. Header podzieliłem na przycisk home i logo, niestety zrobiłem to na szerokości w %, moje pytanie jak poprawie to zrobić w px, jeśli cały header ma 100%, powiedzmy że home będzie miał 100x100px, ile wtedy dać logu by nie odjechało o te 100px w bok? (margin-top przycisku home zrobiłem w fontello) po wpisaniu mojego kodu widać że logo jest przesunięte

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	
	<title>BetaWeb</title>
	<meta name="description" content="Tworzenie stron www. Strona zaprojektowana dla Ciebie lub Firmy."/>
	<meta name="keywords" content=" tworzenie stron, www, webmaster, twoja strona, dla firm, css, html, javascript"/>
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	
	<link href="https://fonts.googleapis.com/css?family=Barrio&amp;subset=latin-ext" rel="stylesheet">
	
	<link href="css/fontello.css" rel="stylesheet" type="text/css"/>
	
	<script src="jquery.js"></script>
	<script src="jquery-1.11.3.min.js"></script>
	<script>

		$(document).ready(function() {
		var NavY = $('.header').offset().top;
	 
		var stickyNav = function(){
		var ScrollY = $(window).scrollTop();
		  
		if (ScrollY > NavY) { 
			$('.header').addClass('sticky');
		} else {
			$('.header').removeClass('sticky'); 
		}
		};
	 
		stickyNav();
	 
			$(window).scroll(function() {
			stickyNav();
		});
		});
	
	</script>
	
</head>

<body>
	
	<div class="header">
		<a href="index.html"><div><i class="icon-home"></i></div></a>
		<div id="logo">BETA<span style="color: #330099">WEB</span></div>
		<div style="clear:both;"></div>
	</div>
	
	<div class="content">
		
	</div>

</body>
</html>

body
{
	background-image: url("img/black_scales.png");
	font-size: 24px;
	color: white;
	text-align:center;
}

.header
{
	width: 100%;
	height:100px;
	background-color: #990033;
	font-family: 'Barrio', cursive;
	letter-spacing:3px;
	font-size: 60px;
}
#logo
{
	width:90%;
	height:100px;
	float:left;
	
}
.icon-home
{
	width: 10%;
	height: 100px;
	float:left;
	text-decoration:none;
}
.icon-home:hover
{
	display: block;
	cursor: pointer;
	background-color: #cc0033;
}

.sticky
{
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
}

1 odpowiedź

odpowiedź 21 lutego 2017 przez imklau Nałogowiec (42,090 p.)
wybrane 21 lutego 2017 przez Yorweth

Najlepsza

Od razu mała rada dla początkującego: stylizuj po klasach, a nie id ;)
Ikonę zrobiłeś hiperłączem, więc nie możesz np ikonie dać text-decoration: none. To możesz dodać jako styl do hiperłącza, tak samo z :hover.
A co do drugiego pytania to wytłumacz lepiej, bo ciężko zrozumieć, albo już nie ta godzina ;p

komentarz 21 lutego 2017 przez Yorweth Obywatel (1,310 p.)

Dziękuję, pierwszy problem udało mi się zniwelować, jak głupi zamiast klasy to próbowałem ustawić :hover czy link :/

w drugim troszkę pogmerałem i udało mi się dojść do rozwiązania. Obie szerokości dałem w % , dziękuję za pomoc i raczej temat do zamknięcia.

Proszę wybacz stratę czasu, ale dopiero się uczę i no przyznam że siedziałem przy tym problemie 3h