Lista - menu

pytanie zadane 6 stycznia 2017 w HTML i CSS przez Newaz Użytkownik (880 p.)

Krótko zwięźle i na temat. Zabrałem się za wykonanie zadania z 3 odc technologi webowych i mam problem z nawigacją. Problem opisałem na screenie http://imgur.com/a/pD2XH.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>CS:GO</title>
	<meta name="description" content="Jeżeli jesteś graczem counter-strike'a to koniecznie zajrzyj na tą stronę">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="keywords" content="cs:go,skiny,gry,silver,gold,supreme,skill">
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
	
</head>

<body>
	
	<div class="container">
		<div class="logo"> <img src="img/cs.png"> </div>
		
		<div class="nav"> 
			<ul>
			<li><a href="index.html">Strona Główna</a></li>
			<li><a href="register.html">Dołącz do nas</a></li>
			<li><a href="https://www.twitch.tv/">Twitch</a></li>
			<li><a href="#">Skiny</a></li>
			<li><a href="#">Rankedy</a></li>
			</ul>
		
		</div>
	
	
	
	
	
	</div>
	

</body>

</html>

body
{
	/*Background pattern from subtlepatterns.com*/
	background-image: url("img/footer_lodyas.png");
	font-size: 18px;
	font-family: 'Inconsolata', monospace;
	color: #fff;
	margin: 0;
}

.container
{
	width: 100%;
}

.logo
{
	margin-left: auto;
	margin-right: auto;
	height: 150px;
	width: 800px;
	margin-top: 25px;
}

.nav
{
	
	background-color: #288f03;
	margin-top: 25px;
	width: 20%;
}

ul
{
	list-style-type: none;
	text-align: left;
}

ul a
{
	color: #fff;
	text-decoration: none;
}

li
{
	
	/*border: 1px dashed black;*/
	
}

ul li:hover
{
	
	background-color: #177e02;
}

1 odpowiedź

odpowiedź 6 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)

dla ul padding i margin na 0

zamiast hover dla ul li to ustaw go dla .nav

komentarz 6 stycznia 2017 przez Newaz Użytkownik (880 p.)

Dzięki wielkie, mógłbyś mi jeszcze powiedzieć dlaczego nawigacja się wydłuża gdy próbuje koło niej ustawić diva content? http://imgur.com/a/7xsVQ

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>CS:GO</title>
	<meta name="description" content="Jeżeli jesteś graczem counter-strike'a to koniecznie zajrzyj na tą stronę">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="keywords" content="cs:go,skiny,gry,silver,gold,supreme,skill">
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
	
</head>

<body>
	
	<div class="container">
		<div class="logo"> <img src="img/cs.png"> </div>
		
		<div class="nav"> 
			<ul>
			<li><a href="index.html">Strona Główna</a></li>
			<li><a href="register.html">Dołącz do nas</a></li>
			<li><a href="https://www.twitch.tv/">Twitch</a></li>
			<li><a href="">Skiny</a></li>
			<li><a href="">Rankedy</a></li>
			</ul>
			
		</div>
		<div class="content">
		<h1>Witaj w witrynie klanu Graczy CS:GO Silvers!</h1>
                    <br><br>
		
				Counter-Strike: Global Offensive (CS:GO) – wieloosobowa gra komputerowa z gatunku firstperson
				shooter, stworzona oraz wydana przez studia Valve Corporation i Hidden Path
				Entertainment, które już wcześniej pracowały nad Counter-Strike: Source. Jest to najnowsza
				część serii Counter-Strike.
				Global Offensive wydano 21 sierpnia 2012 roku na platformę Steam. Gra jest dostępna na
				systemy: Microsoft Windows, Linux, Mac OS X, Xbox 360 (poprzez Xbox Live Arcade) oraz
				PlayStation 3 (za pośrednictwem PlayStation Network).
				- źródło: Wikipedia
				Link ma prowadzić pod adres:
				https://pl.wikipedia.org/wiki/Counter-Strike:_Global_Offensive
		 </div>
		 

	</div>
	

</body>

</html>

body
{
	/*Background pattern from subtlepatterns.com*/
	background-image: url("img/footer_lodyas.png");
	font-size: 18px;
	font-family: 'Inconsolata', monospace;
	color: #fff;
	margin: 0;
}

.container
{
	width: 100%;
}

.logo
{
	margin-left: auto;
	margin-right: auto;
	height: 150px;
	width: 800px;
	margin-top: 25px;
}

.nav
{
	background-color: #288f03;
	margin-top: 25px;
	width: 20%;	
	float: left;
}

ul
{
	list-style-type: none;
	padding: 0px;
	text-align: center;
}

ul a
{
	color: #fff;
	text-decoration: none;
}

li
{
	border: 1px dotted #fff;
	padding: 15px;
}

ul li:hover
{
	
	background-color: #177e02;
	transition-delay: 0.1s;
}

.content
{
	width: 50%;
	background-color: red;
	float: left;
}

komentarz 6 stycznia 2017 przez xmentor Nałogowiec (49,520 p.)

Bez tego diva, .nav nadal jest taki sam.

komentarz 6 stycznia 2017 przez Newaz Użytkownik (880 p.)

Nie rozumiem, mógłbyś mi dokładnie wytłumaczyć co zrobiłem źle? Chcę aby content ustawił się obok nawigacji http://imgur.com/a/sDnux ale, gdy daje float:left to "wydłuża" się ona tak jak na screenie wyżej.